Question about layout - expanding panels somewhere in the middle on the page

Question

Hi all,

I have a question about the form below. It consists of three main parts - control (orange), grid (green) and details (light green):

   <panel>
      <tableLayout>
        <row height="30">
          <cell width="5" rowSpan="5"/>
          <cell hAlign="Left" vAlign="Top" childWidth="800">
            <textLabel font-style="Bold" font-size="14" label="Openstaande termijnen (DM210)"/>
          </cell>
        </row>
        <row height="165" heightPolicy="Static">
          <cell hAlign="Full" vAlign="Full">
            <include panelName="invoicingControl"/>
          </cell>
        </row>
        <row height="215" heightPolicy="Static">
          <cell hAlign="Full" vAlign="Full">
            <include panelName="fsCptInvoicingGrid"/>
          </cell>
        </row>
        <row height="335">
          <cell hAlign="Full" vAlign="Full">
            <include panelName="fsCptInvoicingDetails"/>
          </cell>
        </row>
      </tableLayout>
    </panel>

The details are in fact 6 panels included into one. They act like "overflow area below".

I wish that users with large screens, could enlarge the grid vertically so they can see more rows at the time. I have tried that with setting heightpolicy to dynamic, but then i can not enter a height anymore. I also looked for a vertically split panel (so i could put the grid in the upper half and details in the lower half), but can not find it. I tried it with putting the grid in a bordered panel, but that does not fix this either.

Is this possible? How?

Kind regards, Jan Willem Vermeer alt text

Answer 1

0

Hi Jan Willem,

You can create a horizontal split panel in Formspider using the following syntax:

<splitPanel>
  <top panelName="panel1"></top>
  <bottom panelName="panel2"></bottom> 
</splitPanel>

Does this solve you issue?

Kind Regards,
Yalim

link

answered 08 Oct '15, 10:49

Yalim Gerger ♦♦
1.8k●5
accept rate: 15%

Answer 2

Thanks Yalim,

I have tried this:

<splitPanel dividerLocation="245">
  <top panelName="fsCptPaymentCashGrid"></top>
  <bottom panelName="fsCptPaymentCashDetails"></bottom>
</splitPanel>

And the full form XML is this:

<panel>
  <tableLayout>
    <row height="30">
      <cell width="5" rowSpan="5"/>
      <cell hAlign="Left" vAlign="Top" childWidth="800">
        <textLabel font-style="Bold" font-size="14" label="Kontante betalingen inboeken (DM140)"/>
      </cell>
    </row>
    <row height="185" heightPolicy="Static">
      <cell hAlign="Full" vAlign="Full">
        <include panelName="paymentCashControl"/>
      </cell>
    </row>
    <row height="520" >
      <cell hAlign="Full" vAlign="Full" >
        <include panelName="paymentCashRows"/>
      </cell>
    </row>
    <row height="30">
      <cell hAlign="Full" childWidth="800">
        <textLabel font-color="#008000" name="bookingLoggingText"/>
      </cell>
    </row>
  </tableLayout>
</panel>

With this i can indeed enlarge the panel with the rows, however, it takes the place of the details. So, there are more rows, but i can not see the details anymore. The entire panel should be modifiable.

I tried to set the row with height 520 to heightPolicy dynamic, but then i do not see the panel at all.

Is there a solution for this?

Kind regards, Jan Willem

Answer 3

Hi Jan Willem,

In your case, you can use preferredHeight attribute for the details panel. For example, when you set its value to 520, a vertical scrollbar appears whenever the are left in the container layout for the details panel is lesser than 520 px.

invoicingControl panel

<panel backgroundColor="Orange"/>

fsCptPaymentCashGrid panel

<panel backgroundColor="Green"/>

fsCptPaymentCashDetails panel

<panel backgroundColor="LightGreen" preferredHeight="520"/>

split panel

<splitPanel dividerLocation="245">
  <top panelName="fsCptPaymentCashGrid"></top>
  <bottom panelName="fsCptPaymentCashDetails"></bottom>
</splitPanel>

mainPanel

<panel>
  <tableLayout>
    <row height="30">
      <cell width="5" rowSpan="5"/>
      <cell hAlign="Left" vAlign="Top" childWidth="800">
        <textLabel font-style="Bold" font-size="14" label="Openstaande termijnen (DM210)"/>
      </cell>
    </row>
    <row height="165" heightPolicy="Static">
      <cell hAlign="Full" vAlign="Full">
        <include panelName="invoicingControl"/>
      </cell>
    </row>
    <row>
      <cell hAlign="Full" vAlign="Full">
        <include panelName="splitpanel"/>
      </cell>
    </row>
  </tableLayout>
</panel>

Hope this helps,
Ibrahim

Answer 4

0

Hi Ibrahim,

It is incredible but it works !

I do not understand exactly why you make fsCptPaymentCashDetails preferredHeight=520. I have set it to the height needed (only 255) and that works too. I can enlarge the grid area and when the details do not fix anymore, a scrollbar appears. See image below.

This is really cool because with this users can completely fit the form to their screen sizes.

Kind regards,

Jan Willem

alt text

link

answered 09 Oct '15, 10:59

Jan Willem V...
123●1●3●31
accept rate: 0%

Hi Jan Willem,

I'm glad that it helped. I thought that the needed height was 520, that's why I used this value in my example, it's just my misunderstanding, if the needed height is 255, it's correct to set preferredHeight=255 as you did.

Regards,
Ibrahim

(09 Oct '15, 11:27) Ibrahim Sand... ♦♦

Ok Ibrahim. We are totally out of our heads about this feature :)

It also leads to new questions, for example would it be possible to save settings for users when they change the layout. But that's for the future. For now we are making sure that everything works.

Kind regards, Jan Willem

(09 Oct '15, 12:37) Jan Willem V...

Question about layout - expanding panels somewhere in the middle on the page

Follow this question

Related questions