Aligning fields with CSS

asked on August 9, 2017

Good morning,

I've been trying to align a set of 8 fields into 2 rows of 4, side by side. In following the Laserfiche help file here: https://www.laserfiche.com/support/webhelp/LaserficheForms/9.1/en-us/Forms/Default.htm#FormsCSS.htm#CommonselectorsinForms I found out that I could do something like

#q1, #q2, #q3, #q4 {display: inline-block; width: 25%; vertical-align:top;}

#q5, #q6, #q7, #q8 {display: inline-block; width: 25%; vertical-align:top;}

However, #q4 is hidden using Field Rules, and it only shows until #q3 is clicked (#q3 is a radio button). This causes my layout to display as:

FIRST ROW: #q1, #q2, #q3, #q5

SECOND ROW: #q6, #q7, #q8

Then when I click on #q3 all aligns as:

FIRST ROW: #q1, #q2, #q3, #q4

SECOND ROW: #q5, #q6, #q7, #q8

What I'm looking for is that at the beginning it should look like:

FIRST ROW: #q1, #q2, #q3

SECOND ROW: #q5, #q6, #q7, #q8

And when #q3 is clicked, it display as:

FIRST ROW: #q1, #q2, #q3, #q4

SECOND ROW: #q5, #q6, #q7, #q8

Any suggestions/additional information?

Thank you,

Raul Gonzalez

0 0

replied on August 9, 2017 • Show version history

I had to take a different approach, which worked for me.

First I removed the Field Rule so that #q4 will show, and I hide it via CSS as

#q4 {
 visibility: hidden; 
}

Then I just added some JavaScript to show it again.

  $(document).on('click', '.q3radio input', myFunction);
  
  function myFunction(){
  
  var q3radio = $('.q3radio input:checked').val();

    if (q3radio == 'somevalue') {
    
    $('#q4').css('visibility', 'visible');
    $('.q4 input').attr('required', 'true');
}
  else
  {
    $('#q4').css('visibility', 'hidden');
    $('.q4 input').removeClass('required').removeAttr('required');
  }
 
}

Let me know please if there is a pure CSS way.

Thank you,

Raul Gonzalez

0 0

replied on August 9, 2017

Here is what I did.

I had several fields that I wanted in one row and it took awhile to figure it out. If the fields were not alike in size, I broke them out. Since I included them all on the same "display: inline-block" at the bottom, those extending beyond the form width wrapped to the next line.

You could take one set of four and set them up as shown then add your Inline block, then below that add your second set of four with its own inline block to get your second row.

I separated out the .cf-field and the .cf-label and then added a separate vertical-align:top along with width and margin. The width in section set the spacing between field and it worked better with a margin setting. In some cases I had to address just one #q field to get what I wanted.

Hope this helps.

#q28 .cf-field {
width: 275px;
}
#q29 .cf-field {
width: 275px;
}
#q28 .cf-label {
width: 100%;
}
#q29 .cf-label {
width: 100%;
}
#q28, #q29 {
   vertical-align:top;
   width: 220px;
   margin: 0px;
   padding-right:5px;
   padding-top: 0px;
   padding-bottom: 0px;
}
#q30 .cf-field {
width: 325px;
}
#q30 .cf-label {
width: 100%;
}
#q30 {
   vertical-align:top;
   width: 250px;
   margin: 0px;
   padding-right:5px;
   padding-top: 0px;
   padding-bottom: 0px;
}
#q31 .cf-field {
width: 200px;
}
#q31 .cf-label {
width: 100%;
}
#q31 {
   vertical-align:top;
   width:165px;
   margin:0px;
   padding-right:5px;
   padding-top:0px;
   padding-bottom:0px;
}
#q46 .cf-field {
width: 75px;
}
#q46 .cf-label {
width: 100%;
}
#q46 {
   vertical-align:top;
   width:115px;
   margin:0px;
   padding-right:5px;
   padding-top:0px;
   padding-bottom:0px;
}
#q47 .cf-field {
width: 50px;
}
#q47 .cf-label {
width: 100%;
}
#q47 {
   vertical-align:top;
   width:150px;
   margin:0px;
   padding-right:5px;
   padding-top:0px;
   padding-bottom:0px;
}
#q45 .cf-field {
width: 50px;
}
#q45 .cf-label {
width: 100%;
}
#q45 {
   vertical-align:top;
   width:110px;
   margin:0px;
   padding-right:5px;
   padding-top:0px;
   padding-bottom:0px;
}
#q33 .cf-field {
width: 50px;
}
#q33 .cf-label {
width: 100%;
}
#q33 {
   vertical-align:top;
   width:110px;
   margin:0px;
   padding-right:5px;
   padding-top:0px;
   padding-bottom:0px;
}
#q36, #q43, #q44 .cf-field {
width: 325px;
}
#q36, #q43, #q44 .cf-label {
width: 100%;
}
#q36, #q43, #q44 {
   vertical-align:top;
   width: 250px;
   margin: 0px;
   padding-right:5px;
   padding-top: 0px;
   padding-bottom: 0px;
}
#q28, #q29, #q30, #q31, #q46, #q47, #q45, #q33, #q36, #q43, #q44 {
   display: inline-block;
}

1 0

Question

Question

Replies

Sign in to reply to this post.