Using SMartGWT I created a TileGrid, and now I'm trying to set the Overflow parameter in a way such that if there is overflow the scrollbar appears only for the Horizontal navigation and not the vertical one.
There are basically 4 slots for the tiles and if I add a 5th one, only the scroll bar for vertical navigation is shown.
In other words I want that the overflow is inline
I already tried these possibilities, but no one works.
setOverflow(Overflow.AUTO)
setOverflow(Overflow.CLIP_V)
setOverflow(Overflow.CLIP_H)
setOverflow(Overflow.SCROLL)
I also tried with the CSS code
overflow-x: auto;
Any ideas?
Try to set the orientation for the TileGrid to vertical by
setOrientation(Orientation.VERTICAL);
With this, you will get all tiles in one line. Sometimes a small vertical scrollbar still appears because the horizontal scrollbar. In this case you should also play with the settings and sizes to see only a horizontal scrollbar.
I was facing the same problem here. The only solution I've found for now was:
1) Set the tilesPerLine property of TileGrid to a big value.
2) Set the orientation property of TileGrid to "horizontal".
Related
I'm using Angular UI Grid in a project. The grid sizes itself so that all the columns fit horizontally in a div.
This works great, until there are more rows than fit on one screen. Then, a vertical scroll bar comes up (good), which covers part of the last column (bad). Horizontal scroll bars can be enabled to reach those last 20 or so px, but when you scroll horizontally, the header cells don't scroll. This throws everything out of alignment.
Since the grid was perfectly sized before the scroll bar, there should not be a need for the horizontal scroll bar. But the way the scroll bar covers the content means that without it, you can't see anything that might be in the right 20 or so px.
I need to fix this. Here are some solutions I have looked into implementing, unsuccessfully:
Find some way to know if there is a vertical scroll bar and add padding or margin somewhere to push in the content of both the header cell and the data cell, to keep things in alignment. I haven't found an easy way to grab the container who may or may not have a scroll bar and then I think the logic to ask it if it has a scroll bar would be brittle. Plus, just playing around with adding padding where I think it should go did not effectively push over the content.
Find a way to let the container with the scroll bar push outside of the grid when it has a scroll bar. This has basically the same issue as #1 in that that guy is pretty slippery.
Find a way to replace the scroll bar with my own. It seems that there is someone who did a branch that lets you do this with a specific library, but we are tied to a specific commit of UI Grid and adding libraries takes an act of congress.
Thoughts?
How you can know if there is a vertical scrollbar :
If you haven't customized the rows with a rowTemplate, then you might be having a rowHeight of 30px (if not please inspect).
var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;
if (dataRowHeight > gridElementHeight) {
// you have a verticalscrollbar
}
Safe side : specify width for all columns by % and leave 1% behind for the scrollbar.
Ugly side : Get the width of the 'viewport', loop through and calculate the actual pixels from your provided percentage for all columns, if you detect a vertical scrollbar using the technique above, leave 15px behind.
I am trying to do something that should be simple but is apparently not so. I just want to make a simple single line navigation bar using a list tag. Thats fine, I can do it. The problem is making it wrap gracefully and still keep the same layout when it needs to appear over multiple rows due to not enough horizontal browser space.
As I say, I'm using a list tag and I have the ride side border of each LI item with a visible vertical line to make the divider appear. The final item I am not shwoing that with a last-child pseudo class. Its important that the far left and right buttons DON'T have vertical borders. This is clear in the top image.
The UL tag itself also has a top/bottom border line visible and in the first demo in the image you can see this clearly.
So now what happens when the menu bar wraps... well there there are 2 key problems...
1) The main issue is that when the menu wraps I can't think of a way to make the new MIDDLE horizontal line appear [shown in red in the 2nd image]
2) Multiple list items now don't need a right side border value. In the example 2 list items don't need a right side border. This could grow to 3 though for some screen displays.
Does anyone have any ideas for resolving this?
Note that I am trying to make the menu wrap naturally, not at fixed pixel break points as its so unreliable for something like this with different pixel density screens and font zooms in certain browsers.
I am using an advanceddatagrid in a Flex4.6 solution. I have two advanceddatagrids that are placed on top of each other. At the moment I've got it to work so that moving the bottom horizontal scrollbar moves the top grids scrollbar accordingly but the problem is that it doesnt move it the same distance since one scrollbar is larger than the other. Does anyone know how to set the horizontalscrollbar width so that I can make them the same length?
You'll need to do some math:
grid2.horizontalScrollPosition = grid1.horizontalScrollPosition * grid2.maxHorizontalScrollPosition/grid1.maxHorizontalScrollPosition;
I seem to be missing a horizontal scroll bar on this page, http://www.animefushigi.com/
If you make your browser window skinner, half the page will be cut off but there will be no scroll bar.
I believe the main content width should be 1024 px before the need of a scrollbar
because the wrapper div does not have a stable min-width(and for browser which not support min-width, such as ie6, there is a child div .wrapper has a stable width in this case, so it will be ok,too ),which should be setted.
e.g.
//add css
#master_wrapper{min-width:1000px;}
It looks like overflow:hidden is used to clear floats in a couple of places. If you get rid of it on #master_wrapper then the horizontal scrollbar will return. However this will cause that element to collapse to a height of 0 and making this image disappear from your page. You can however rearrange your background images using the html for one of them to sort that issue out.
I have a GWT application that has a left-hand scrollable navigation panel with a directory tree. I would like to be able to keep the panel narrow with a scroll bar at the bottom (which I have) but show the entire file name on hover, overflowing over the vertical scrollbar and into the next panel. I could do it by overlaying a small div with the full name when hovering, but that seems klugey and prone to subtle visual errors. I've tried fiddling with visibility, wrap and z-index with no effect. Can I do this by just adjusting the CSS parameters of the item in question, or on some other not-so-klugey way?
IntelliJ does this in the right way, but they're not in a browser:
Thanks,
-Lars
I think you'll have to go with an overlay. If the labels are inside a div then that div will control the overflow, and there's no way to specify different overflow values for different children.
You could copy all of the styles from your label onto your new overlay div at runtime to avoid having to duplicate all your styling. I'd probably give up on having the outline box only around the overflow (around "esponse" in your example picture). That seems hard.
Unfortunately, It can't be done in HTML. according to the spec..
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.