By drupalfriend123 on

Hi,

I have two fieldsets in webform. First fieldset all are text fields and the 2nd fields sets have mixed field types.

I like to place all the labels to left and the fields to right.

Below code works just fine for first fieldset:

     #block-webform-client-block-72 .M-CustomInfo .form-item {
  padding: 5px 0 5px 100px;
  position: relative;
}
 #block-webform-client-block-72 .M-CustomInfo  .form-item label {
  left: 0;
  position: absolute;
}

Below code does not work for 2nd fieldset. I guess it is because of mixed field types. 

     #block-webform-client-block-72 .M-EventInformation .form-item {
  padding: 5px 0 5px 100px;
  position: relative;
}
 #block-webform-client-block-72 .M-EventInformation  .form-item label {
  left: 0;
  position: absolute;
}

http://godrupal.info/

Can you please help placing labels to left and fields to right for the 2nd fieldset? Note this is for mobile app. So please make the screen 500px to see the form.

Thanks.

⋅ Categories: Drupal 7.x

Comments

VM’s picture

VM commented

Tamilselvancst’s picture

Tamilselvancst commented

First find the correct class for your css, then write the code.

You have added display none in the below property. This means when you try to hide something you have hide the wrapper not inner content.
You have did like this.

#edit-submitted-eventinformation-when-year--2 {
  display:none;
}

But you have to do like the below.

.form-item.form-item-submitted-eventinformation-when-month.form-type-select.form-group {
  display:none;
}

You have added an radio button. And you have added style for all labels including radio label.
So do like this.

#block-webform-client-block-72 .M-EventInformation .webform-component > label {
  width:20%;
}

The following line is for adding padding for fields.

#block-webform-client-block-72 .M-EventInformation .form-item {
    padding: 5px 0 5px 120px;
    position: relative;
}

Hope this will help you.

drupalfriend123’s picture

drupalfriend123 commented

Thank you so much.

All worked except the radio field (Event Type). This field needed to be push right little. I did this for now and it worked unless you have better answer?:

#edit-submitted-eventinformation-event-type--2-1 {margin-right:3px;margin-left:4px;}
#edit-submitted-eventinformation-event-type--2-2 {margin-right:3px;margin-left:4px;}

Another question. How can I make all the fields size in EventInformation fieldset equal like the fields in CustomInfo fieldset?

Tamilselvancst’s picture

Tamilselvancst commented

Hi,

First lets see select box
Remove this line. because right side margin was 5px. so change this to 0. As following

.Start_R {
 margin-right:0;
}

Then, add this line

.form-select {
width: 100%;
display: block;
background: transparent;
border: 1px solid #ccc;
padding: 6px 12px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

then, your webform calender add this few line.

If you can just add this class form-control you solve the problem.

Remove display:inline and add this

html.js input.webform-calendar {
display: block;
width: 100%;
}

Finally, Number field remove following line.

.NumberOfPeople_C {
  width:70px;
}