Application Developmentpublic

Visual Builder

Get Involved. Join the Conversation.

This is a public Forum  public

Topic

    Hugo Zandt
    Scaling 'select one' GUI componentsAnswered
    Topic posted August 14, 2019 by Hugo ZandtGreen Ribbon: 100+ Points, tagged Layout 
    73 Views, 11 Comments
    Title:
    Scaling 'select one' GUI components
    Summary:
    how to make 'select one' components line out with other gui components
    Content:
    Hello vbcs community,
     
    We are currenly trying to perfect the look and feel of our web application. 
    When a page contains both input text fields and select one fields, we notice that these fields don't line out when they scale to fit the browser window. See the attached illustrative image.
     
    How can we get these 'select one' components to line out with the other components, regardless of the size of the browser window?
     
    We are currently using the gridrow layout. And all GUI elements in the screenshots have an equal width of 4 columns.
     
    We have already tried to define the max-width in a custom css class and applying this class, but that didn't allow us to resize these. 
     
    Thanks.
    Version:
    19.1.3.
    Image:

    Best Comment

    Duncan Mills

    I'd use oj-form-layout to manage this (using the label-hint attributes to provide the labels)  then you should get much better responsive management

    Comment

     

    • Duncan Mills

      I'd use oj-form-layout to manage this (using the label-hint attributes to provide the labels)  then you should get much better responsive management

      • Hugo Zandt

        Hallo Duncan,

        How could we ensure that a filepicker has the same width as input fields on a page? We’ve tried controling width with:

        • Gridrow columns.
        • Using a form layout.
        • Using CSS classes on the filepicker (width 33%) outside a form layout.
        • Using CSS classes on the filepciker (width 33%) inside the form layout.

        None of the methods provide a solution. Any advice or suggestions would be highly appreciated.

        Thanks,

        Hugo

        • Duncan Mills

          When sizing the file picker you need to use max-width as is documented in the cookbook sample for the same:

          https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=filePicker&demo=width

          • Hugo Zandt

            Thank you for pointing out that the filepicker width can be set using max-width. I've applied this but I can only get the max-width to take effect when I add "!important". Also effective I would like to apply a more elegant solution that does not use "!important".

            I’ve tried several variations without using “important” for the max-width where I’ve put the filepicker in a grid row and flex row (see image), but without success. Do you have any further suggestions?

            Thanks,

            Hugo

    • Hugo Zandt

      Hello Duncan,

      Using the oj-form-layout we solved the issue of differently scaling components but vertical alignment is still not optimal. When we place two oj-forms in different flex rows and choose justify centre on both rows they are slightly out of line vertically. Is there a way to set vertical alignment when using multiple oj-form-layout sections on the same page?

      We also tried to use the label-hints but we don’t see what it does, could you clarify?

      Thanks.

    • Duncan Mills

      When you use a oj-form-layout you don't need to specify separate oj-label components.  If you set a label-hint property on the input component the oj-form-layout will create and locate the label for you in the correct place and set up the accessibility relationship between the generated label and the input. 

      Do you have a screenshot of the misalignment? 

    • Hugo Zandt

      When recreating the issue in an example we discovered the cause. When one of the labels is larger, it causes the other components in the oj-form-layout to be displaced. Are there other solutions than reducing the length of the labels?

      The use of the label-hint property is clear now, but it does not solve this issue either.

       

       

       

       

    • Duncan Mills

      You can configure the form-layout to give a particular amount of space to the labels

      Check out the doc.  https://docs.oracle.com/en/middleware/developer-tools/jet/7.1/reference-api/oj.ojFormLayout.html

      By setting these consistently for all the forms and having  the same overall size for the form then the layouts should all align

    • Hugo Zandt

      Thanks for the tip. I've managed to solve the vertical alignment issue by applying a css class to the form layout elements themselves which sets the width to 20%.

    • Duha S

      Hi,

      I have the same problem and I could manage using the form layout. My problem is basically, as shown in the screenshot, is that the size of the input text is wider than the combo box. The other problem is that the vertical spaces between the fields is not maintained.

       

      Regards,

      DSO

     

    community forum