You are viewing limited content. For full access, please sign in.

Question

Question

Arranging Fields

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
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.

Sign in to reply to this post.