Setting the size of the new CEF BrowserComponent programmatically

32 views
Skip to first unread message

P5music

unread,
Aug 10, 2020, 5:12:03 AM8/10/20
to CodenameOne Discussions
I am using the new CEF BrowserComponent.
I put it inside a BorderLayout, at the center, so it takes the space according to the content (the surrounding form/container have been set correctly to allow this layout to happen).
I need to set the height to a certain size, like 200px, or 4 lines of text, for example.
If I set the page to an HTML string with text inside, I see the text and no scrollbars (that instead appear in other cases), so it seems that the size is not as tall as the remaining space. It is good for my layout but I need to set the height exactly before there is text inside, and It has not to resize automatically.
The setHeight method does not work, not even after the onload event.
Thanks in advance


Shai Almog

unread,
Aug 10, 2020, 9:55:50 PM8/10/20
to CodenameOne Discussions
If it's in the center it takes up the whole set of available space. You can see this using the component inspector tool.
I explained to you in your previous post how you can use TableLayout with BrowserComponent. You just need to disable form scrolling and make sure to define a height/width constraint to the cell.

P5music

unread,
Aug 11, 2020, 4:36:32 AM8/11/20
to CodenameOne Discussions
My layout is more complex than a BC in a Table layout. The "detail" part on the right features that BC but it is not the only control, some space  are used NORTH for other controls, and some space has to remain empty SOUTH, even if I had to put the BC in the center of a BorderLayout. I accomplished your suggestions, but the point was the BC was tiny. I used the Containers as you said but in a more complex way, combinating them one inside the other.
Now I need that the BC has a certain height, it was my original goal. I cannot set the TL cell height because the BC is not the entire cell, maybe I did not understand what you mean.
Thanks in advance

Shai Almog

unread,
Aug 11, 2020, 9:59:52 PM8/11/20
to CodenameOne Discussions
The size of the browser component must be deterministic. That means If you place the hierarchy or the browser component in NORTH it will size it based on preferred size which is 0 and that won't end up well.

If your layout is more complex than those two options you'd either need to explicitly invoke setPreferredSize() (no the browser component) or simplify the layout.

P5music

unread,
Aug 12, 2020, 6:41:00 AM8/12/20
to CodenameOne Discussions
I have to recall that those setting methods have no effect when the BC is in the BoxLayout.y(), so by your suggestion I introduced the BorderLayout in the layout.
My layout is very simple. 
A table layout is on the screen (main form) and on the right there is the detail cell with the right size percentage.
In the detail part there is a vertical container, with some areas, and the BC has just to be the last component, but its size is not set correctly.
The only possibility is to use BorderLayout and put it in the center, so it expands.
Said that, I need to set vertical size, because some empty space should preferably remain.
Is this possible, being that the setting methods have no effect? 
It is a design preference, I could also drop.

Shai Almog

unread,
Aug 12, 2020, 10:22:38 PM8/12/20
to CodenameOne Discussions
I don't understand why you need more that a border layout for this.
Just create a border layout to the form. Place the browser component in the center and then place what you want in the east/west and south. You can easily add anything you want there and it will take just the right amount necessary. 

P5music

unread,
Aug 13, 2020, 5:09:46 AM8/13/20
to CodenameOne Discussions
I can add something SOUTH, I agree, and it works, for example, with an image.
I tried putting an empty Label and setting its size but it does not act like the Spacer() in SwiftUI.
In general I think that the setHeight() method should work in cases that are not ambiguous.
However this is not critical, I can adapt the layout.
I hope the layout is the same on the real devices or iOS simulator when it will get to test the finished app.
Regards

Shai Almog

unread,
Aug 14, 2020, 12:12:13 AM8/14/20
to CodenameOne Discussions
setHeight won't work since it's set by the layout. You can use setPreferredHeight.
You can create a label with a space within it to create a small space. Alternatively if you just want to use the padding of a label to a space you need to do:

label.setShowEvenIfBlank(true);

This disables a special case in label that hides it completely if the label is blank. That's useful for some use cases such as keeping command buttons that don't have an implementation in a static place.
Reply all
Reply to author
Forward
0 new messages