Forum Stats

  • 3,838,565 Users
  • 2,262,383 Discussions
  • 7,900,687 Comments

Discussions

How to stop a panel box growing in size

DrHoneybear
DrHoneybear Member Posts: 41 Green Ribbon
edited Jun 30, 2022 10:51AM in JDeveloper and ADF

Apache Trinidad 2.0

JDK 8

JDeveloper 12.2.1.3


The code has a Panelbox component, in which is an Effectivity line that produces a list of comma separated 'effective idents' from a binding. All works well unless there are quite a few effective idents in the list. In this case the list of idents goes across the page on a single line for as long is as needed and thus the scrollbar is activated and user has to scroll to the right to see all the numbers - and the panelbox grows in size (width) accordingly.

We'd like the Panelbox not to grow and be fixed, and if the effective idents list reaches the edge of the panel box then the next ident should go onto another line, e.g.

From: (the panelbox width extends as much as needed)

Effectivity: AB1, C1, D1, EDF1, FDDF4, FFH, FJF7, DSHSHE7, D8, FJHE4, EPYO7, PPQ0,...

To: (I want to set panelbox width and now allow it to grow so idents have to go into multiple lines)

Effectivity: AB1, C1, D1, EDF1, FDDF4, FFH,

FJF7, DSHSHE7, D8, FJHE4,

EPYO7, PPQ0,...


Can it be done?


        <tr:panelBox text="Loom" inlineStyle="border-color: red;">
         <tr:panelFormLayout labelWidth="40%">
          <tr:panelLabelAndMessage label="#{bindings['Effectivity'].label}" inlineStyle="width:20px">
           <tr:panelHorizontalLayout>
            <tr:iterator value="#{bindings['Effectivity'].inputValue.effectivityRanges}" var="range"
                   varStatus="status" rows="0">
             <tr:outputText value=", " rendered="#{status.index > 0}"/>
             <tr:outputText value="#{range}" />
            </tr:iterator>
            <tr:outputText value="None"
                    rendered="#{empty bindings['Effectivity'].inputValue.effectivityRanges}"/>
           </tr:panelHorizontalLayout>
          </tr:panelLabelAndMessage>
         </tr:panelFormLayout>
        </tr:panelBox>

the 'width:20px' was a test to see if it made any difference, it does not!

Best Answer

Answers

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 38,585 Red Diamond

    It would be easiear, if you calculate the text in a method in a bean and then just show the one text in an outputText. The you can control the size easily (and tell the outpuText to use multiple lines).


    Timo

  • DrHoneybear
    DrHoneybear Member Posts: 41 Green Ribbon
    edited Jun 30, 2022 1:06PM

    I thought it would be eaiser to add some attributes to the tags ? I cannot see anything in outputText to set length and multiple lines , although there is an inlineStyle attribute - but I do not know what to set to achieve what I want, hence the OP

  • dvohra21
    dvohra21 Member Posts: 14,618 Gold Crown

    Display the multiple text lines by reading from the resource bundle .property file by using the af:outputText component in ADF.

    Options :

    1->Change the Resource Bundle.property FILE

    Make sure you include <br> tab where ever your expecting the new line in you display value

    Example:

    label.employee.key.value = information <br> information value …etc

    2->Surround af:outputText with af:panelGroupLayout allign=”vertical” >

    example:

    <af:panelGroupLayout id=”pgl19″ layout=”vertical” >

    <af:outputText value=”#{viewcontrollerBundle[‘label.employee.key.value’]}” escape=”false”

    </af:panelGroupLayout>

    Make sure you set escape=”false”

  • DrHoneybear
    DrHoneybear Member Posts: 41 Green Ribbon

    That doesn't make sense. I'm using an iterator, see OP code, to display a list of idents separated by comma (,)

    The parent panelBox ( with text="Loom" ) is stretching when the list of idents gets very long. I dont want the box to stretch. I want the list of idents to go over multiple lines instead.

  • DrHoneybear
    DrHoneybear Member Posts: 41 Green Ribbon

    I have got the scroll bar working on the Effectivity line. Great! But, the panelBox is still stretching to the right as though the effectivity list was not truncated (by the scroll bar)


           <!-- THIS PANEL BOX KEEPS STRETCHING .... -->
           <tr:panelBox contentStyle="align:left" text="Loom">
    
            <tr:panelFormLayout labelWidth="40%">
             <tr:panelLabelAndMessage label="#{bindings.Pid.label}">
              <tr:outputText value="#{bindings.Pid.inputValue}"/>
             </tr:panelLabelAndMessage>
             <tr:panelLabelAndMessage label="#{bindings['LatestLoomIss_Issue'].label}">
              <tr:outputText value="#{bindings['LatestLoomIss_Issue'].inputValue}"/>
             </tr:panelLabelAndMessage>
             <tr:panelLabelAndMessage label="#{bindings['LatestLoomIss_IssueDate'].label}">
              <tr:outputText value="#{bindings['LatestLoomIss_IssueDate'].inputValue}"/>
             </tr:panelLabelAndMessage>
             <tr:panelGroupLayout id="pgl19" layout="vertical" inlineStyle="width:40%;overflow:scroll">
              <tr:panelLabelAndMessage label="#{bindings['Effectivity'].label}">
               <!-- ... WHEN THIS ITERATOR PRODUCES A VERY LONG STRING , WIDER THAN THE PANEL BOX -->
                <tr:iterator value="#{bindings['Effectivity'].inputValue.effectivityRanges}" var="range"
                      varStatus="status" rows="0">
                <tr:outputText value=", " rendered="#{status.index > 0}"/>
                <tr:outputText value="#{range}"/>
               </tr:iterator>
               <tr:outputText value="None"/>
              </tr:panelLabelAndMessage>
             </tr:panelGroupLayout>
            </tr:panelFormLayout>
           </tr:panelBox>
    
  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 38,585 Red Diamond
    Answer ✓

    Well, the way you try to archive it is pretty hard to do as you work with multiple outputText. In the end, they will render as one string, but they are multiple outputText components. Now ask yourself: how can I tell where to break the line?

    For this to know you'll need to take different measures into account like font size, size of the viewport where the outputText components are rendered,....

    You see, it's hard to calculate. I'm not familiar with Trinidad tags. However, breaking a long string into multiple lines should be possible. If there is no property available to do this you can use CSS (see https://css-tricks.com/almanac/properties/o/overflow-wrap/).


    Timo

  • DrHoneybear
    DrHoneybear Member Posts: 41 Green Ribbon

    Thank you for the tip ;)

    sadly, overflow-wrap made no difference on the panelLabelAndMessage...

    <tr:panelLabelAndMessage label="#{bindings['Effectivity'].label}" inlineStyle="overflow-wrap:normal">
                 <tr:iterator value="#{bindings['Effectivity'].inputValue.effectivityRanges}" var="range"
                        varStatus="status" rows="0">
                  <tr:outputText value=", " rendered="#{status.index > 0}"/>
                  <tr:outputText value="#{range}"/>
                 </tr:iterator>
                </tr:panelLabelAndMessage>
    
  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 38,585 Red Diamond

    No, that's what I try to tell you. The CSS solution only works for ONE text field, not multiple text fields like you get by using an iterator.

    Create the string in a bean method and use one outputText with CSS.


    Timo

  • dvohra21
    dvohra21 Member Posts: 14,618 Gold Crown
    edited Jul 1, 2022 1:10PM

    We'd like the Panelbox not to grow and be fixed, and if the effective idents list reaches the edge of the panel box then the next ident should go onto another line.

    How is the panelBox expected not to grow with text provided. No size is set. 

    <tr:panelBox text="Loom" inlineStyle="border-color: red;">
        ...
        </tr:panelBox>
    

    The width of the container can be set to either an exact pixel size or a percentage of the element the content container is within. This is done by using the inlineStyle or styleClass attributes.

    <af:panelBox text="Header"
           background="light"
           contentStyle="background:blue;"
           icon="/images/info.png"
           inlineStyle = "width: 25%;"
           id="pb1">
    
  • DrHoneybear
    DrHoneybear Member Posts: 41 Green Ribbon

    Thanks guys, in the end I went with Timo's proposal. I created a backing bean method to construct the string text and rendered that with the necessary inline style wrapping. All good. Thank you