I would like to be able to remove the horizontal scrollbar from the bokeh table or at least push it down so it does not hide the last row on the table.
As showed on the picture, I cannot read the last row. The vertical scrollbar cannot go further down.
Thanks,
I've been having the same issue. Are you using Google Chrome by chance?
If I use Google Chrome I have this problem and can't get rid of the horizontal scrollbar for the life of me.
But with Firefox the scrollbar is gone if you pass fit_columns=True to your DataTable() call. Or fit_columns=False if you want the scrollbar to show up. Ironically under Firefox if the scrollbar shows up it does not block off the bottom row.
Related
I have setup this playground to show the problem I am having
tailwind playground example
Resize the window a little to get the scroll bar.
I want to have scrolling just in the body element of this layout.
When scrolling is activated, it hides parts of some elements, and I can't get them fully visible when scrolling.
What am I missing here ?
I have got a table with a scroll with the style "overflow-x:visible" to the scroll. But when I move the horizontal scroll It look like this 1
I tried applying position : absolute and the overflow problem was solved but the table pasted with the bottom of the top div and the first table header's name dissapear, looking like this 2
Thanks Mayank for your answer, I make the changes but the problem persists, because now I have two horizontal scrollbars, one always visible but too short to show all the table and the other only appears on the bottom of the table and it's only visible if you move down using the lateral scrollbar.
In the first screenshot, you can see the double scroll
In the second screenshot, you can see that in the top of the table you can't see the other columns but the scrollbar is to short to use it
I have been playing around with -webkit-overflow-scrolling:touch; for a while and I getting randomly the following problem:
I only need scroll top/bottom ( width is fixed ), but sometimes the user needs to scroll left and right to
trigger the vertical scroll.
In other words, the user has to scroll horizontally to make the container scroll vertically.
again it is random, some times it just works.
I already have check all the relative positions for the child elements within the scroll.
any thoughts ?
I had as well a scroll that never broke and by looking at the html inside it I realised that if you apply the -webkit-overflow-scrolling:touch; in ul element it will never break.
the scroll that used to break had many elements within it and all I had to do was make the ul elements scrollable separately.
cheers
Ran into the same problem, been struggling with it forever until I did this:
Changed overflow-y: scroll to overflow: scroll. I've loaded up the page close to 20 times now and haven't experienced the left/right going up/down weirdness.
I work on a complex web application that uses multiple iframes. I have a window.setInterval setup that removes native scrolling from hidden iframes and adds it to the visible iframe. This works great except I experienced the same issue where I had to swipe left / right to scroll up down. I noticed if you opened or clicked on a different browser tab and then clicked back it fixed itself. We fixed our issue by adding the following jQuery after we apply the native scrolling to the visible iframe:
$(window).height($(window).height());
I am thinking this must force a repaint similar to clicking on a different tab and then clicking back does. Hopefully this helps someone in a similar situation!
As stated in the comments by Graygilmore. This worked for me:
// NOTE 2019-04-09: [referenced link was removed]
Make sure no parent element of the scrollable area is visibility:hidden or display:none.
my theme (www.wortwaerts.net) works fine in IE8: If I change the window size by squeezing or stretching it, all elements (especially the search and category dropdown in the header) keep their position - and a horizontal scroll bar will appear if the screen gets to small.
My problem: In other browsers, e.g. Mozilla, squeezing the window makes the search shift upwards and the category dropdown downwards – also, the text content is cut off and no horizontal scroll bar appears that enables the user to read the cut-off content.
Does anybody know why only in IE8 all elements keep the position? And how to fix the elements and make a horizontal scroll bar appear in other browsers as well (how to change which theme files)...? Putting #screen { width: 58.875em; } into style.css doesn't work...
I'm really a starter and would be happy about any hint :o) Thanks, Felix
just add "min-width: 58.875em" to your code it shoud work but i'm not sure...
Check out my site http://hiox.org . How to get rid of horizontal scroll bar?
Well, i did not see the horizontal scroll bar on that site. This is most likely because of resolution. Use this css style however.
scroll-x:hidden;
Buy a wider monitor (I see no horizontal scroll bars)?
Actually Sarfraz's suggestion is good, but something secondary to bear in mind is the wide range of users on your site (some using 1024x768, and still others using 1920x1200) and how to give equal usability to as many as possible.
Is it possible you could reduce the width of a few columns? "Title" and "By" look like they could be a bit smaller... then it won't force the table to be wider than neccessary, thus removing your horizontal scroll bars.
Rekha, I was having the same issues with a page I was working on.
It could be that one or more of your elements widths/margins/padding/border are too wide, creating a invisible extra space in the browser.
A fix that may work is setting the html and body padding/margin to 0 and then changing other elements margin to 0 (i.e. change a header section that spans 100% of the width of the browser, change margin to 0).
Try looking at your page with the Firefox add-on, "Firebug" (link http://getfirebug.com/downloads), to see if there is an element's padding/margin is acting unexpectedly.