Percentage based form fields

[StuartF]

This probably a very silly question to all you ebase gurus but how can we go about setting up a form where any text fields are % (elastic) within the parent container i.e. they adapt to the browser width.

We have a requirement to use a Jello Mould type of layout for our forms and up to now all attempts have failed ,including setting up custom CSS styles which work on everything apart from the width?.

[AJDulk]

This is not a silly question at all. I am not sure this can be done easily in Ebase, it may take hand-made JavaScript to strip Ebase generated field widths from the form at runtime - which is only really handy when the user has it switched on (which is most). I am interested to see Ebase's response to this.

[Wai]

You can get it to work by applying the width in CSS on the field.

First you need to understand the HTML generated by Ebase for a Field control.

Code: Select all

<div>
  <div>
  <label>Email</label>
  </div>
  <div>
  <input>
  </div>
</div>

You can see there is a <div> around the <label> and a <div> around the <input>.
There is also a parent <div> for the whole field control.

You need to place your width (% or em) on the parent <div> as well as the <div> around the <input> and also on the <input> itself.

For example:
Parent <div> could be 100%
Input <div> could be 80% (leave some width for the label)
<input> could be 100%

How to do this in Ebase

1. Open Control Style for the field
2. On the Field tab, click Advanced Properties
3. Open the Style popup
4. Enable local setting
5. On the Code tab, add width property style

This will add the width to the parent <div>
Repeat 2 - 5. for the Editor Cell tab
On the Editor Cell you have to apply a width to both the Style (div) and Input Style (input)

You can apply a class which sets the width instead of step 4. Enable local setting, and also save as a property set to reuse.

Hope that helps.

[StuartF]

Cheers we managed to get this working