Forms inline block dead space removal

replied on November 21, 2016 • Show version history

This would just need some additional CSS added. I have a similar set-up on one of my forms and when I do side-by-side elements, this is the general CSS set-up I use:

/*Time In & Time Out*/
#q12, #q13 {
  display: inline-block;
  vertical-align: top;
}
#q12 {
  width: 265px;
}
#q13 {
  width: 400px;
}
#q12 label.cf-label {
  width: 90px;
}
#q13 label.cf-label {
  width: 70px;
}
#q12 div.cf-field, #q13 div.cf-field {
  width: 130px;
}
#Field12, #Field13 {
  width: 150px;
}

This is how it looks while on the CSS/JS tab:

and the final look with the CSS looks like (during Preview):

That usually gets me close to what I want and then I just tweak it per how it needs to be. If you have any questions please feel free to ask.

2 0

replied on November 21, 2016

Thanks that got rid of the space! For some reason when doing it this way though it starts my fields way over under the title in the area reserved for field titles only. Looks really messy. Yours did not do this.

Here is my alteration of your CSS

#q14, #q16 {
  display: inline-block;
}
#q14 {
  width: 165px;
}
#q16 {
  width: 200px;
}
#q14 label.cf-label {
  width: 190px;
}
#q14 div.cf-field, #q16 div.cf-field {
  width: 230px;
}
#Field14, #Field16 {
  width: 150px;
}

0 0

replied on November 22, 2016

Also check the form size. If I remember correctly on that form I use a 800px resolution. All those elements just need a bit of adjustment to get them to drop inline.

0 0

Question

Question

Forms inline block dead space removal

Replies

Sign in to reply to this post.