I'm using ag-grid with angular 5 application.
The application is rtl - right to left.
In some of the grids I have a horizontal (right to left) scroll.
I have just noticed that when I scroll left - the grid content moves right (ok)
but the headers move to the opposite direction.
I enabled RTL on grid:
<ag-grid-angular #agGrid
style="width: 100%; height:100%"
id="myGrid"
class="ag-theme-balham"
[enableRtl]="true"
[enableFilter]="true"
[enableSorting]="true"
[columnDefs]="columnDefs"
[suppressDragLeaveHidesColumns]="true"
[enableCellChangeFlash]="true"
[enableColResize]="true"
[getContextMenuItems]="getContextMenuItems"
[defaultExportParams]="defaultExportParams"
[localeText]="localeText"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
I have noticed that when I take of the [enableRtl]="true",
I dont see that problem, but the grid becomes LTR (I realy have to use the RTL).
Thanks for any help !
I had this issue with ag-grid 20.2.0 and angular 6 in chrome.
Just add it :
.ag-root{border:none !important;}
Related
Page in question is here
The overflow can be seen on mobile only (e.g. iPhone SE) on Chrome browser. Issue doesn't happen on Firefox.
The issue is with the horizontal scroll table, shown here:
picture of the horizontal scroll table
If you remove the white-space: nowrap tag from the table.hscroll-table selector, the overflow goes away and the horizontal scroll works properly. Otherwise, the horizontal scroll works, but there's also overflow on the entire page, enabling horizontal scrolling throughout the whole page and a bad user experience.
I can't for the life of me figure out why this is happening. Is it a Chrome bug?
Any help would be greatly appreciated. I can remove the white-space: nowrap to fix the issue, but that makes the table design worse.
Weirdly enough, the issue only seems to be with the td tags. If I add white-space: nowrap to the header cells only, there's no unwanted overflow.
Ok, turns out the problem was because of the screen reader text that was being generated within the table by the rating icons.
I set the screen reader text to display: none as a temporary fix and now display the text right beside the rating instead.
I'm using bootstrap with bootstrap-toc (https://afeld.github.io/bootstrap-toc/)
Working with the following scenario:
http://jsbin.com/cerozeleya/edit?output (make sure to click "run with Js" to be able to see the sidebar)
As I scroll the view, I would like the sidebar to scroll until a point where the jumbotron is no longer in view. At that point, it should stay affixed while the content scrolls.
I can't get that behaviour to happen with the included jsbin. I tried messing with the data-offset-top/data-offset-bottom attributes within my nav #toc but nothing changes. I found another question here that instructed the following changes on the css:
.affix{ top: 0px;}
.affix-bottom{ position: absolute;}
But that didn't work either. I tried reading the affix and scrollspy documentation, but its either not clicking with me, or I'm not seeing what I'm doing wrong.
Any help appreciated. Thanks!
You have to use data offset top within the tag which you want to affixed
data-spy="affix" data-offset-top="197"
Eg.
<nav id="toc" data-toggle="toc" data-spy="affix" data-offset-top="197"></nav>
Edit the offset value according to your needs
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
Still can't handle with issue in non-responsive bootstrap3 http://getbootstrap.com/examples/non-responsive/
If you'll resize window to less then .container width you'll see 1px width space in this example too. I also got it on my iOS devices. And this kills me!
Screenshot http://cl.ly/image/1f0w342Q1q0a
What I am trying to do is get the grey boxes on this to go to the edge of the page, I have found a similar article here but when I have tried changing the margin and padding to 0 nothing is happening, this table is created in a cms that has been coded by previous developers and I have no idea why I can't get these grey areas to automatically fill the edge of any size screen.
Any help on where I am going wrong would be grateful as I am re-developing this website and need it done ASAP
you will have to remove the width of the wrapper to auto
then add to your content2 div something like: padding: 0 200px; for the gray only
Your #wrapper style is set to width: 970px. Change that to width: auto and you're good to go.
if you are talking about the box shown in blue below
is because the table is been redered inside the <div id="wrapper">
if you change the width: of the DIV to auto.... your boxes will go all the way to the edge as shown on the other image
after changing the width to auto of the wrapper div looks like: