how to tweak css of default form for consistent height across pages in pop up module?

[rw1]

hello,

a while back i suggested a very hacky css hack to make form pages a consistent height across pages of a form ie when navigating between pages the buttons would stay in the same location as the height of each page stayed the same.

the default behaviour, without any hacks, is that the form height will change depending on the amount or total height of elements in the form.

for my implementation i am opening the form module in a pop up window and so having a fluctuating form height doesn't look that great.

the hack was working ok but after being away from fabrik for a while, i am getting different results in browsers and overall the css seems 'broken'.

so my goal is to now create a form that somehow has standardised heights across pages in a less hacky way.

i think the general tech spec for this is creating a css container that consists of:

- form title
- form elements
- form buttons

where:

- the form title area is 'pinned' to the top of the form container,
- the form buttons area is 'pinned' to the bottom
- and the container has a fixed height.

i am not a css guru so i am just writing this post in case any css wizards could knock something up quickly.

but i also wrote this post so i could clarify for myself what the issue and solution was so will get to work on this now and post back if i come up with a solution.

edit: i'm going to try and modify the 'default_rounded' form.

 

[troester]

Hi,
I didn't test in a popup but this should do:
copy default_rounded
insert

?>
    <div style="height:500px;overflow:scroll">
    <?php

before the "foreach ($this->groups as $group)" (around line 133)
and

    ?>
</div>
    <?php

after the loop (line 221)

 

[rw1]

thank you very much for this, in the default rounded form template file 'default.php', i can see "foreach ($this->groups as $group)" at line 199 and have pasted the suggested code before that, can you please tell me what exact code i should be looking for that ends the loop ie where i can paste the second part of the code? thank you!

 

[troester]

Is this your "privat" default_rounded? (don't override with an update)

The closing div should be directly before
echo $this->hiddenFields;
(in my default_rounded/default.php)

 

[rw1]

thank you! brilliance!

my implementation of your solution, in the default_rounded form template's 'default.php' file, find:

foreach ($this->groups as $group)

around line 67 and add this directly before:

//troesters consistent form height hack part one of two
?>
    <div style="height:425px;overflow:none">
    <?php
//end troesters consistent form height hack part one of two

in default.php, find:

echo $this->hiddenFields;

around line 109 and add this directly before:

//troesters consistent form height hack part two of two
    ?>
</div>
    <?php
//end troesters consistent form height hack part two of two

and to get rid of the 'space' above the elements in the forms, in template_css.php find:

/*Note that the order of pixel specifications here follows this rule - top, right, bottom, left*/
#{$view}_$c fieldset > ul{
	padding:40px 10px 20px 10px;
}

and replace with:

/*Note that the order of pixel specifications here follows this rule - top, right, bottom, left*/
#{$view}_$c fieldset > ul{
	padding:0px 10px 20px 10px;
}

thanks very much - i'm going to try some further template tweaking now and also see how it behaves in mobile (ah!).

 

[troester]

It was a "quick and dirty" test, better use a CSS class e.g.
<div class="fixFormHeight">
and define it in custom_css.php

I hope the additional div won't break anything else.