I have a case which want to get vaadin-grid the maximum height possible in screen.
So, this is easy.
the problem is that despite the vaadin-grid size is ok, the tbody might be shorter than vaadin-grid.
So, whenever there is not enough rows we get empty space.
it would be ok in case had no border. But, because we do use border on the grid, empty space comes up.
Sure can shift the border to thead and tbody and get it looks good, but than the opposite happen cause bottom border will get lost when tbody in longer than vaadin-grid.
Is there a clean way, non dirty js, to distinguish cases? something else?
Thanks
I think you should be able to get at least very close by using the :host([overflow~="bottom"]) state attribute selector. Add/remove the borders based on that. The overflow attribute value changes based on if rows are overflowing the from the bottom of the grid viewport.
The only issue I see is that the border will disappear when the user scrolls to the bottom of the grid.
Related
I need a vertical slider similar the standard slider. Is there a way to modify the existing one or do I need to make a new one?
The standard slider would work for me. I just need it to work vertically.
Perhaps I should better clarify my issue with the standard slider.
Yes, I can drag the size of the slider and it will be vertical. The problem is that when you select the value of the slider to show the text gets buried in the low side of the slider when you slide it down all the way. It essentially gets cut off and only shows the top half of the slider value character. I find no way to correct this by moving the shown text up a little so it all shows. I see no way to change text vertical or offset position in the properties setting.
The text settings only allow you to change the text format to right, center and left justify. There is no setting that can move the text up to prevent it from being cut off when the slider is all the way to the lower or down position.
The value text shows ok on the top of the slider. The problem is on the bottom side when you set the slider to be vertical.
It looks like the the show value setting does not place the value on the top layer of the slider and it gets hidden behind something else in the slider object.
LC9, Windows 10
I think I'm understanding your question. If you just resize the horizontal slider control so that the width is narrower than the height, the orientation of the slider control will automatically change to vertical.
Apparently it is a bug in this version of LC. At least in Win which is where I am testing.
Putting the scrollbar vertically cuts the value when it reaches the bottom.
But I found a solution so that it does not cut. Play around with the properties of the font. Such as size and family. In my case it worked fine by lowering the font size by one pixel.
Default: Segoe UI font, size 12
I just set the size to 11 and it doesn't cut anymore.
For what it is worth, I do not see this issue on a Mac. A vertical slider works as advertised. Font size makes no difference.
Are you saying that in the horizontal mode, you do not see this, but when changed to vertical, you do?
Try creating a scrollbar and a text field.
Set the scrollbar's showValue property to false and copy the following script to your scrollbar. Note that your field must be called "scroll value".
on scrollbarDrag pNewPosition
local tLoc
lock screen
# The Current Loc of Field
put the loc of field "scroll value" into tLoc
# New Position of scrollbar
put pNewPosition into field "scroll value"
# New Loc of Field
put the mouseV into the item 2 of tLoc
set the loc of field "scroll value" to tLoc
set the left of field "scroll value" to the right of me
unlock screen
end scrollbarDrag
My program uses TableWrapLayout with numColumns set to 2. I then have the following code: (background colors are set to show you that the widgets aren't using the blank space).
Label label = toolkit.createLabel(container, "Resource Type":);
label.setLayoutData(new TableWrapData(TableWrapData.LEFT,TableWrapData.MIDDLE));
label.setBackground(DiagramSettings.NODE_BACKGROUND_COLOR);
resourceComboMenu = new Combo(container, SWT.READ_ONLY);
resourceComboMenu.setBackground(DiagramSettings.NODE_BACKGROUND_COLOR);
resourceComboMenu.setLayoutData(new TableWrapData(TableWrapData.LEFT,TableWrapData.MIDDLE));
However as you can see in the picture the combo box refuses to left align properly. But that I mean I want it to start right after the label, not have a bunch of blank space.
One workaround would be to put the row inside it's own Composite just like I do Resource Icon and Geolocation. But I feel like I shouldn't need to since the widgets on this row equals the number of columns set by the layout. I've created this workaround for now but would like to understand this TableWrapData behavior for the future.
Any insight would be helpful, thanks.
I pretty much answered my question in the question. The composite that contains everything in the picture had TableWrapData with columns set to 2. TableWrapData essentially draws a straight, vertical line between each column then makes sure widgets from one column don't cross it.
So to fix this (like I mentioned in my question) you simply make another composite with nested widgets (which in the case would be the resource type label and resourceComboMenu). I just didn't realize that is what you're supposed to do.
I have a grid in ExtJS and a div that I place or toggle to the left of it. This div is not managed by ExtJS.
When I show this div, the grid slips to the right and this div shows up on its left.
The problem I have is that when I hide the div, the grid squeezes and looses the full width it had based on the "fit" layout meaning there is some empty space left on the right of it now.
Now, as soon as I resize the window, it catches the event and resizes itself but not before it.
Anyone with any suggestions I could try in order to maintain the grid's stretch, your help is much appreciated.
Try explicitly calling doLayout() on the grid or the grid's parent, when the div is hidden.
I've been playing around with MT.D a bit and love the simplicity of it all.
I have now been working on a completely owner drawn cell using a UIView to do all the drawing and an Element that allows me to use it with MT.D.
Now the only thing I seem to be missing is the ability to control how borders are drawn (or not drawn). If I set the mode to Grouped then I get the indented and rounded borders and Plain I get the simple horizontal border.
But lets say I want to use an image or thicker border for my borders, how do I go about customising this?
I require the following layout, with three columns, left, content & right.
The left and right content simply will have an image within them, and the left col. Image needs to stay to the left of the browser, and the right col. Image to the right side of the browser, so when the browser width is resized both the columns stay to their edge.
Where as the content/centre column needs to be a fixed with of 960px and also remain in the middle of the screen.
So on resize the browser width the content stays in the middle, but then when the browser is width is reduced both left and right columns do not go over the main content but stay either side.
I have tried multiple times but am having much success at present, any help would be appreciated.
thanks si
UPDATE:
As requested I have added a jsfiddle of what I have tried:
http://jsfiddle.net/UcmBj/
I get to 99% of what I want but the content remains centred and the right stays to the right but ideally I would like it so the content and the panels remain centered.
At the moment if scaled down the left column and part of the content is viewable but I would like the content to be viewed in the window/centred so the left column is displaced to the left off the screen. thanks hope the link helps.
Bit of details: side columns should be min width of 280 and the content section width of 960 set, thus the outer container min 1520.
Does this help you at all?
http://www.manisheriar.com/holygrail/index.htm
http://jsfiddle.net/andresilich/6vPqA/3/show/
Well having looked around, looks as if Its not possible just yet for how I wanted to do it, so what I did was have my left and right columns positioned using css to the left and right, then using css media queries added a negative margin to each so that they would move so not interrupting the main content.