Question

Arranging Fields

Forms

Updated April 24, 2020

asked on April 22, 2020

I have 2 currency fields, single and monthly transaction limit. When I apply below CSS to show side by side, the dollar sign appears separately. How do I get dollar sign to be in same line as text box? See screen shot attached.

li.monthlytranslimit {
float: left;
width: 30% !important;
}

li.monthlytranslimit div.cf-page{
float: left;
width: 100% !important;
}

li.monthlytranslimit label.cf-page{
float: left;
width: 100% !important;
}

li.monthlytranslimit input{
float: left;
width: 100% !important;
}

li.singletranslimit {
float: left;
width: 30% !important;
}

li.singletranslimit div.cf-page{
float: left;
width: 100% !important;
}

li.singletranslimit label.cf-page{
float: left;
width: 100% !important;
}

li.singletranslimit input{
float: left;
width: 100% !important;
}

Thanks

Priya

Trans Limits.PNG (2.91 KB)

| Download

0 0

Replies

replied on April 23, 2020 • Show version history

Hi Priya,

You don't need all the additional CSS that you are using to get the fields side by side. This is the easiest way:

Apply your custom class to the fields (I'll use "FieldWidth30" for this example, since you're using 30% width), then use the following CSS:

.FieldWidth30 {
  display: inline-block;
  width: 30%;
}

You can apply the same for any other width sizes and every field type. Just add a new class and change the width to the new value:

.FieldWidth30 {
  display: inline-block;
  width: 30%;
}
.FieldWidth50 {
  display: inline-block;
  width: 50%;
}

0 0

replied on April 24, 2020

Thanks

0 0

You are not allowed to follow up in this post.

Question

Question

Arranging Fields

Replies

Sign in to reply to this post.