Question

CSS twoperline

Forms Version 10 How To

Updated January 13, 2019

asked on January 10, 2019

I have two items on one line. The first is a simple drop-down field and the second one is a date field. I am not able to make the date field show the calendar button on the same line. It will show below the date field every time. Does anyone have a CSS solution for this? Already using .TwoPerLine and tried some width adjustments to see if that would work, no such luck. Any help is appreciated.

LF-Forms Date Question.PNG (3.13 KB)

| Download

0 0

Replies

replied on January 10, 2019

What CSS are you currently using?

The following will put them side-by-side if you add TwoPerLine as a custom class to all four fields.

.TwoPerLine { 
  display: inline-block;
  width: 50%;
}

Then you just need to adjust the label and field widths, for example

/* Increase your field widths */
.TwoPerLine input,
.TwoPerLine select {
  width:90%;
  /* do not exceed 90 because you need room for the date picker icon */
}

/* Fit your label */
.TwoPerLine .cf-label {
    width: 25% !important;
}

/* May or may not be needed */
.TwoPerLine .cf-field {
    width: 70% !important;
}

And you get

3 0

replied on January 13, 2019

You can also hide the datepicker trigger (the calendar icon next to the date field) if you want to make it a bit cleaner again. Just change q10 to your date field number.

Add this to your Javascript...

$(document).ready(function () {
    $('#q10 img.ui-datepicker-trigger').hide();
    $('#q10 ').on('click', picker);
    function picker() {
      $('#q10 img.ui-datepicker-trigger').hide();
    }
      
});

2 0

You are not allowed to follow up in this post.

Question

Question

CSS twoperline

Replies

Sign in to reply to this post.