How to add a "no size" component?

Support
#1

I’m trying to add some custom javascript to a screen to improve the usability and visual appearance, but I’m stuck on one (probably) minor issue: The javascript component takes up halve of the screen size, although it hasn’t any visual representation. :wink:

        MyJsComponent jsComponent = new MyJsComponent();
        jsComponent.setHeight("0");
        getWindow().unwrap(Layout.class).addComponent(jsComponent);

MyJsComponent is a com.vaadin.ui.AbstractJavaScriptComponent. Everything else works as expected, but I can’t somehow “hide” the component from the view.

If I do a jsComponent.setVisible(false); then the component won’t load at all.

Please help. :slight_smile:

jsComponent only loads when it's visible
#3

Hi,

By default, containers without the expand attribute provide equal space for all nested components, that why your component takes half of the screen size. For more details, take a look at the Layout Rules section in the docs.

Could you please describe in more details what is your component purpose, so I can suggest how to add it to a screen without taking a place on a screen layout?

Regards,
Gleb

#5

@gorelov Hi Gleb, thanks for you reply. I want to add some custom JavaScript to a page (it’s called classic UI I think - vaadin…) so I can fix some layout and usability problems with the forms. I use the responsive addon, but it has some issues. To fix those, I set the width of some components manually with JS. I found no other way to add custom JS, than to implement the com.vaadin.ui.AbstractJavaScriptComponent and add it to the layout, but when I do this, it takes up halve the space of the screen, although it doesn’t have any visual representation.

I hope I could make a bit clearer and thanks for the effort.

#7

Hi,

Could you please provide en example of such JavaScript code? It’s still unclear for me its purpose, hence I can’t propose a better solution.

Regards,
Gleb

#9

Hi @gorelov,

here it is: discuss12784.zip (341.1 KB)

There you see two problems:
(1) the one I mentioned in this thread, under Application->Test Entities->Create. I added many “lorem ipsum” labels, so you can easily see, that there is an “empty” component underneath the form.
(2) If you set the width of the textField components to 100%, they actually get a surrounding element, that has 0px set to width.
image

#10

Thank you for the demo project. As I mentioned above, you don’t need a UI component in order to execute some JavaScript code. In your case, you can replace your component with the following:

@Subscribe
public void onInit(InitEvent event) {
    ScreenDependencyUtils.addScreenDependency(this, 
            "webjar://jquery:jquery.min.js", Dependency.Type.JAVASCRIPT);
}

@Subscribe
public void onAfterShow(AfterShowEvent event) {
    JavaScript js = Page.getCurrent().getJavaScript();
    js.execute("setTimeout(function () {" +
                    "var basisdatenOuterHeight = $('.sel-basisdaten').outerHeight();" +
                    "$('.sel-belege').css({minHeight: basisdatenOuterHeight});" +
                "}, 700);");
}
}

Alternatively, you can get rid of JS code and set height="100%" to baseValues2 vbox and wrap its content with another box that can be expanded:

<vbox stylename="card sel-belege" spacing="true" margin="true" id="baseValues2" width="100%"
      height="100%" expand="baseValues2Content">
    <hbox stylename="v-panel-caption" width="100%">
        <label value="Form Fields2"/>
    </hbox>
    <vbox id="baseValues2Content" spacing="true">
        <label value="Some other smaller content ...."/>
    </vbox>
</vbox>

This will produce the same result but without delay.

Regarding the second problem, it’s known issue, see Form fields are squashed inside of Responsive layout · Issue #1 · cuba-platform/sw-responsive · GitHub.

Regards,
Gleb

1 Like
#11

@gorelov Thanks, that’s awesome - I didn’t know I can insert JavaScript that way. Is that somewhere in the documentation also, so I can maybe get more information on that?

Thanks a lot for your hint with the layout, that’s way better and cleaner of course. :slight_smile:

I see the issue you linked is open for over a year now, is this addon maintained or is its use not recommended?

#12

This functionality comes to CUBA from Vaadin, so you can take a look at their docs.

The add-on is maintained. you can vote for the issue, the team will know that it’s important for the community to have the fix.

Regards,
Gleb

1 Like
#13

@gorelov Good to hear it’s maintained. Thanks for the hint with the Vaadin documentation. Where can I vote, I can’t find the issue on YouTrack and on GitHub I can only subscribe to the issue, what I already did.

#14

Just leave a comment. Alternatively, you can add a reaction:

Screenshot 2020-06-30 at 14.57.58