There are both horizontal and vertical scroll on table body.
As there are more number of columns, extra columns are visible by horizontal scroll due to this vertical scroll also overflowed.
I have to position the scrollbar to the right visible part always.
I tried wrapping the table inside a div and setting the width 100vw but it did not work. I also tried separately wrapping both body and header but in that case table lost its property and extra independent horizontal scroll introduced for header and body.
Is there any way i can position just scrollbar to the right most visible part of table body.
Related
I have a flex container which displays a horizontal scroll bar when the number of flex items exceeds the available viewport width.
This works fine until I add a pseudo element (down caret) to one of the items, causing a vertical scroll bar to appear.
As expected, adding overflow-y: hidden to my container will hide part of my pseudo element. So my question is how can I prevent a vertical scroll bar when trying to independently set the x-axis to 'auto' only?
JS Fiddle example
Then you want add the extra space to avoid Vertical Scroll .
You can achieve this just add extra space on .hud-card this selecter.
.hud-card {
margin-bottom: 12px;
}
The situation is a jqGrid inside a div where the size of the grid is larger than the div both vertically and horizontally. The goal is to have the column headers scroll left and right with horizontal scroll, and also keep them always visible when scrolling vertically.
It is easy enough to add CSS to have both scrollbars by setting overflow-x: auto to the div containing the jqGrid and overflow-y to auto for the ui-jqgrid-bdiv.
The problem with this technique is that the vertical scrollbar is only visible when the grid is scrolled horizontally to the right enough to show the right side of the grid. Making the ui-jqgrid-bdiv scroll and using DOM manipulation to set the sizes of the containing elements results in both scrollbars being visible, but the body content scrolls without scrolling the column headers.
There is a similar stack overflow question JqGrid add vertical scroll with horizontal scolling, but the answers do not address this.
It doesn't look as if there would be a pure CSS solution given the DOM structure of the grid. Is there a JavaScript solution out there, perhaps one listening to scroll events?
You could set the height and width property of the grid itself so that the grid will take care of the scrolling instead of the div that it is nested in. Set the dimensions to be the same or slightly smaller than the div's.
<div style="height:200px; width:100px;">
<table id="grid"></table>
</div>
<script>
$("#grid").jqGrid({
height: '200',
width: '100',
shrinkToFit: false //Tells the grid to let columns go to set size
//Add all your properties
});
</script>
OR
if you can get away with not setting the width and height of the parent div, you can just set the grid's dimensions like shown above. As long as the grid's properties are set to a certain size, it will make it's own scroll bars if the data is outside of those bounds.
jsFiddle
EDIT
I have fixed the whitespace behaviour by resizing components within the VerticalPanel, that seem to have had an effect on the panel's dimension somehow missed by the console. I don't quite understand how.
However, I am still stuck with none of my panels showing vertical scroll bars.
In a GWT project, I have the following structure:
Page
DockLayoutPanel
North (header)
Center (body)
South (footer)
/DockLayoutPanel
Body
SplitLayoutPanel$1
West
SplitLayoutPanel$2
North
Center
TabPanel
ScrollPanel
VerticalPanel
-Several widgets-
/VerticalPanel
/ScrollPanel
/TabPanel
/Center
/SplitLayoutPanel$2
/West
Center
/SplitLayoutPanel$1
My problems are with the ScrollPanel in the TabPanel, which in itself contains a VerticalPanel containing several widgets. This is true for each Tab in the TabPanel.
My problem is that, while the width's for all containers in SplitLayoutPanel$2's center have 100% width, the ScrollPanel contains a horizontal scrollbar with a considerable white area next to it's VerticalPanel, while they are in absolute metrics the same size.
Illustrating the situation
This is the TabPanel, with ScrollPanel, and VerticalPanel. Notice how the horizontal scrollbar exists, while the TabPanel, ScrollPanel and VerticalPanel have the same width. Scrolling to the right yields a white area.
The ScrollPanel and VerticalPanel all sport an absolute width of 598px. The West component of the DockLayoutPanel has a size of 600, so that matches. Also notice how bringing up the developer console has made the scrollbar disappear. In fact, the entire panel has disappeared behind it, and no vertical scrollbar pops up.
When scrolling the bar to the right, the VerticalPanel gets partially placed off screen, and the ScrollPanel shows this whitespace. Obviously, I don't want the whitespace to be there, so there won't be need for a scrollbar at all. All panels in this situation still have the same width: 598px. Resizing the SplitLayoutPanel, using the border to the right, increases these values (obviously), but the panels do still share equal width and the whitespace remains the same size, while I'd expect it to get wider too.
The second tab contains a load of text, which continues off the screen, but no scrollbars appear.
Problem conclusion
No vertical scrollbars
A horizontal scrollbar with some magically summoned whitespace
Compontents claim to have equal width
Any help is greatly appreciated.
EDIT
Have tried resizing the VerticalPanel to 90 or 80% width. The whitespace seems unaffected and it shows that 100% really covers the visible width and not more.
TabPanel (at least the one from GWT proper) resizes from the inside-out: its size varies depending on the size of the selected tab. So your ScrollPanel will never have a vertical scrollbar unless you explicitly give it a size, and your content is actually overflowing the layer of the SplitLayoutPanel you put the TabPanel in.
Layout panels, such as TabLayoutPanel, on the other hand resize from the outside-in: the SplitLayoutPanel would set the size of the TabLayoutPanel in its center region, and the TabLayoutPanel would in turn set the size of the ScrollPanel, so if the content of the ScrollPanel overflows, a vertical scrollbar appears.
First Point : Don't mix and match layout panels and non - layout panels.
Second Point : If you want proper resizing and scrollbars, always try to mention width and height in percentages.
I see that you have mentioned width to be 100%. But what about the height?
What I suggest for you is,
Change TabPanel to TabLayoutPanel
Set all the panels height throughout the heirarchy as 100%
So here's what I want to do:
Let there be a fixed size column. The height of the column should take up the size of the parent.
Inside the column I have two divs, stacked vertically. The width of both of them takes up the column width. The height of the first div is fixed size. The second however is variable, taking up whatever remains from the parent. Moreover its content is variable. If its content is to large a vertical scroll bar should appear.
How can I do this with HTML and CSS?
Here's a quick JSFiddle POC.
My problem is that if I set the second divs height as auto it will stretch outside its parent. If I set it 100% it will be again larger than its parent. It's important that the scroll bar to appear only for the second div, not the main div itself.
Thanks,
Here is what I would do:
http://jsfiddle.net/Tfzhm/1/
Add position:relative to the container div, and make the scrollable div position:absolute. The top should be set to the same amout of pixel as the height of the first stacked div. And finally, set bottom:0px so it gets to the bottom line of the containing div.
What is the status on overflow-x and overflow-y? Whenever I give overflow a value, and inspect that element, the browsers tend to split this into overflow-x and overflow-y. However, trying to explicitly state this gives nothing.
For example, on my math class page: http:math.davehampson.net the grades tab is very wide, and I want it to scroll within the <div> There is no height declared, so it stretches down, and I get a horizontal scroll bar.
By problem is that I also get an unneeded vertical scroll bar. If I change overflow:scroll to overflow-x:scroll, then nothing happens. The table is displayed in full width, and the entire page scrolls. Which, because the body is black, does not show up.
Is there a way for me to eliminate this inactive vertical scroll bar?
Thanks, Dave
overflow:auto only adds a scroll bar when the content within it exceeds the allocated space.
So if you only need a horizontal scroll, make sure the height of the content is less than the height of the enclosing div, if that makes sense.