Demos using inline forms need to be reworked

[stephanrauh]

• horizontalForms.jsf
• navigationAndAJAX.jsf (second demo - flyout menu is not visible on small screens)

[stephanrauh]

@ggam @NicolaIsotta I need your help. I simply don't get how to do things right. Please have a look at the inline forms demo at https://showcase.bootsfaces.net/forms/horizontalForms.jsf. It's the top-most demo, and you need to click the "preview" tab to see it.

Due to a bug fix (#682 and others) the demo is broken, as you can see here: http://www3.bootsfaces.net/Showcase/forms/horizontalForms.jsf.

The difference is that there's no padding between the rows. That, in turn, is caused by not generating the column divs. We've decided in #682 that it was wrong to generate those divs. But how to do it right? Or is it just that I tried to do something that's not supported by Bootstrap?

[ggam]

I'll test is later today, but the first example is not precisely an horizontal form? Trying to use the inline form's CSS, but for BootStrap, I think that's an horizontal form.

Let me check it later and tell you.

[NicolaIsotta]

I think @ggam has it right. A simpler example, like those shown on the official site IMHO would be less confusing to the user.

Also, the horizontal form example doesn't need the b:row and b:columns.

[ggam]

I think this is the nearest we can get, but as I said, using horizontal an form:

<b:form horizontal="true">
   <b:inputText tiny-screen="12" small-screen="7" medium-screen="5" large-screen="4"
      label-tiny-screen="12" label-small-screen="5" label-medium-screen="7" label-large-screen="2"
      label="b:inputText" render-label="true"
      value="#{formBean.inputText}" onmouseover="ajax:formBean.updateInputText()" update="@this"
      tooltip="tooltip of the inputtext"/>
   <b:inputTextarea tiny-screen="12" small-screen="7" medium-screen="5" large-screen="4"
      label-tiny-screen="12" label-small-screen="5" label-medium-screen="7" label-large-screen="2"
      label="b:inputTextarea" render-label="true"
      value="#{formBean.inputTextarea}" onmouseover="ajax:formBean.updateInputTextarea()" update="@this"
      tooltip="tooltip of the inputtextarea"/>
   <b:colorPicker tiny-screen="5" small-screen="7" medium-screen="5" large-screen="4"
      label-tiny-screen="7" label-small-screen="5" label-medium-screen="7" label-large-screen="2"
      label="b:colorPicker" render-label="true"
      value="#{formBean.color}" onmouseover="ajax:formBean.updateColor()" update="@this"
      tooltip="tooltip of the colorpicker"/>
   <b:selectOneMenu tiny-screen="12" small-screen="7" medium-screen="5" large-screen="4"
      label-tiny-screen="12" label-small-screen="5" label-medium-screen="7" label-large-screen="2"
      label="b:selectOneMenu" render-label="true"
      value="#{formBean.combobox}" onmouseover="ajax:formBean.updateCombobox()" update="@this"
      tooltip="tooltip of the selectonemenu">
      <f:selectItem itemValue="0" itemLabel="red"></f:selectItem>
      <f:selectItem itemValue="1" itemLabel="yellow"></f:selectItem>
      <f:selectItem itemValue="2" itemLabel="green"></f:selectItem>
   </b:selectOneMenu>
   <b:formGroup>
      <b:selectMultiMenu tiny-screen="5" small-screen="7" medium-screen="5" large-screen="2"
         label-tiny-screen="7" label-small-screen="5" label-medium-screen="7" label-large-screen="2"
         button-width="170" label="b:selectMultiMenu" render-label="true"
         value="#{formBean.combobox}" onclick="ajax:formBean.updateCombobox()" update="@this">
         <f:selectItem itemValue="0" itemLabel="red"></f:selectItem>
         <f:selectItem itemValue="1" itemLabel="yellow"></f:selectItem>
         <f:selectItem itemValue="2" itemLabel="green"></f:selectItem>
      </b:selectMultiMenu>
      <b:commandButton tiny-screen="5" small-screen="3" large-screen="2" value="AJAX (combobox)" onclick="ajax:formBean.updateCombobox()" update="@previous" process="@previous @this" />
   </b:formGroup>
   <b:formGroup>
      <b:datepicker tiny-screen="5" small-screen="7" medium-screen="5" large-screen="2"
         label-tiny-screen="7" label-small-screen="5" label-medium-screen="7" label-large-screen="2"
         label="b:datepicker" render-label="true"
         value="#{formBean.date}" onmouseover="ajax:formBean.updateDate()" update="@this"
         tooltip="tooltip of the datepicker"/>
      <b:commandButton tiny-screen="5" small-screen="3" large-screen="2" value="AJAX (datepicker)" onclick="ajax:formBean.updateDate()" update="@previous" process="@previous @this" />
   </b:formGroup>
   <b:dateTimePicker tiny-screen="5" small-screen="7" medium-screen="5" large-screen="4"
      label-tiny-screen="7" label-small-screen="5" label-medium-screen="7" label-large-screen="2"
      label="b:dateTimePicker" render-label="true"
      value="#{formBean.date}" onmouseover="ajax:formBean.updateDate()" update="@this"
      tooltip="tooltip of the datetimepicker"/>
</b:form>

I've only changed the lg attributes, to test it on my machine.

[stephanrauh]

If I understand you right, there's no such thing as a multi-line inline form?

[ggam]

I think so. Also, mixing responsive classes with fixed widths as in the example doesn't make sense to me.

[TheCoder4eu]

Meanwhile I reintroduced this rule in bsf.css :
.row .form-group { margin-bottom: 10px; }

It is needed to keep the right vertical spacing!
(see how http://www3.bootsfaces.net/Showcase/forms/horizontalForms.jsf improved )

[NicolaIsotta]

IMHO that rule is just a workaround for a wrong markup, inline forms simply don't work that way, look at the bootstrap documentation.

[stephanrauh]

@ggam @NicolaIsotta @TheCoder4eu I've simplified the demos. Please have a look if I've got it right this time :).

[TheCoder4eu]

Hi , I see you made the first example on one row only, ok, looks good.
Taking a close look to markup to see why we were missing horizontal spacing between the components I noticed that Bootstrap uses , well... just a space character between tags , while I was expecting a CSS rule.
I added spaces between components(form group) in the demo.
@stephanrauh , this implies we should add the rendering of a space between label and field.what do you think?

[NicolaIsotta]

@stephanrauh Some things I've noticed:

• the .row .form-group css rule isn't needed anymore
• the stacked form demo doesn't need b:row and b:columns
• inline form: something's wrong with the datetimepicker
  
• stacked form: b:multiSelectMenu has some layout issues when viewport is less than 768px
  

For the last 2 points, I still have to figure out if it's a plugin issue or an implementation issue.

[stephanrauh]

I noticed that Bootstrap uses, well... just a space character between tags...

Oh. A cute little space. So that's why I couldn't spot the CSS rule, no matter how hard I tried!

[stephanrauh]

@NicolaIsotta You keep confusing me. Is there any definition when rows and columns are needed, and when not? Originally, I thought rows and columns are always needed.

[stephanrauh]

As for the date picker: it's broken on the showcase, but works on my local machine.

[stephanrauh]

A StackOverflow user recommends using a CSS rule. I don't know if it's better to add it to the bsf.css file or to simply mention it in the documentation. What do you think?

.form-inline * {       
   margin-right: 10px; 
}                      
.form-inline div {     
   margin-right: 0px;  
}                      

[TheCoder4eu]

@stephanrauh I am for adding the CSS rule a bsf.css is the best place to do it.

[TheCoder4eu]

@NicolaIsotta, @stephanrauh : I added the rule and commented the .row .form-group css rule .

The datetimepicker looks fine in the showcase (www3) by me , even if I use a small viewport.

Is there any definition when rows and columns are needed, and when not

From what I can see in http://getbootstrap.com/css/#forms-horizontal , it is the only notable exception for not using rows :

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

[stephanrauh]

I think we can close the ticket. I didn't manage to reproduce the datetimepicker either. I remember to have seen it earlier, so chances are we've fixed the bug in the meantime.