HorizontalLayout border

Hi guys !

A small css problem I encountered when styling our application with a custom theme:

I’m trying to draw a thin border around a HorizontalLayout, but cat’t get all sides processed.

If you look at http://files.alee.ru/vtb24 , you’ll see that right and bottom sides are not affected by a blue border, while top and left are fine.

This is a HorizintalLayout, which contains fixed width panel (with the tree) and VerticalLayout ( with expand ration 1.0f) with the main content. This horizontal layout has a custom style name set to “center_area”.

Now Im trying to define the following in the theme css:

.center_area {
    border: #cedcf2 solid 1px;
    margin: 0 15px 0 10px;

Am I missing something in the css file ?


Hi dll,

I checked the application using firebug and it seems that there is something wrong with the VerticalLayout that is surrounding the HorizontalLayouts. The space reserved for the child components is couple of pixels (adding 3px seemed to fix it) too narrow and this makes the bottom border to disappear.

I’m not familiar how the layout calculations work in 5.3, but quickly this seems to be an issue in how the child component size is determined in the VerticalLayout.

I know this is not going to help you much, but maybe someone else knows a workaround based on this.

Sigh… Sorry to say this to you Dimitri, but you can’t use that sort of CSS with our layouts.

The dimension calculations that the client side engine performs doesn’t take borders or margins into account when calculating the reserved space.

I see your “center_area” layout has 100% size. The calculated size is directly assigned to the root element of the layout, in the style attribute. So in your case, the border adds up to this size, making it 2 pixels too wide and high.

And add the margins to that, and your layout is actually 1px too low and 11px too far to the left, making the parent layout clip it 26px from the right and 2px from the bottom (including the left and right margins and borders).

The margin issue is easy to fix. Just use the built in margin support and write you CSS like this:

.center_area .i-horizontallayout-margin { padding-top: 0; padding-right: 15px; padding-bottom: 0; padding-left: 10px; } This doesn’t actually push the layout edges, it just reserves the needed margin space visually, by actually using paddings (easier to calculate since they’ll add up to offsetWidth/Height in the DOM). A picture would be worth a thousand words, but alas, I’m lazy.

For the border, there is currently no easy fix. I think we really need user input on this to know if this sort of thing needs to be supported. The fix is trivial to make into our code, but it could slow down the rendering a bit.

We’re currently updating our manual thoroughly, covering layout aspects as well. I’m hoping after this week people don’t need to resort to the forums so much when there is a problem.

A lengthy reply, again, but hopefully explains some of the issues you encountered.

Edit: the above CSS was a bit erraneous. Now corrected.

Jouni, Anonymous, thanks for clarifications. I do see now. BTW, I made a workaround by reducing area width from 100% to 99% and now all border lines are visible :slight_smile:

BTW, found another interesting thing - if you open the application using Mac/Safari, the last tree element caption is only visible for a half of the height. But when you try to open any tree node, everything becomes normal.

same happens in Chrome, just FYI. It doesn’t seem to like tree entries that take up more than one row of space.

I’m just guessing here but looking at the code you seem to have the tree in a panel. Chrome inspector says that the tree has the space it needs, but the container for the tree doesn’t give enough room for the whole tree. Try to give this to the panel:


Really, panel.getLayout.setHeight(“100%”) solved the issue ! :slight_smile: It was initially set to .setSizeUndefined() according to one of the samples, so it looks this does not work well in multi-row tree captions.

Thanks for suggestion!