Hi, It's my first post.I need support for my problem. I am using webform module(5.x) into my site. I created two text filed into webform. I want arrange that field as follows:
(at left corner)text field1 (at right corner)text field 2
(at right corner)submit button How to change html view for my webform componet? How to make align component as per my need (i.e right not down to each other)?
Hi, It's my first post.I need support for my problem. I am using webform module(5.x) into my site. I created two text filed into webform. I want arrange that field as follows:
(at left corner)text field1 (at right corner)text field 2
(at right corner)submit button How to change html view for my webform componet? How to make align component as per my need (i.e right not down to each other)? How make advanced setting(validation) for textfield?
Thanks in advanced for your help.
Hi Kalyani,
The default formatting for webforms is pretty retarded. However most of it can be wrangled into shape with css. I just finished a project that had about 12 complicated webforms on it and I got them looking pretty much how i wanted. Here are a few examples to get you started:
/** WEBFORMS */ /** first set labels and items to appear next to each other */ .webform-component-textfield label, .webform-component-select label, .webform-component-select .form-item .form-checkboxes, .webform-component-select .form-item .form-radios{ display:inline; } .webform-component-select .form-item .form-checkboxes .form-item, .webform-component-select .form-item .form-radios .form-item, fieldset .webform-component-select .form-item .form-checkboxes .form-item, fieldset .webform-component-select .form-item .form-radios .form-item { display:inline; white-space: nowrap; padding-right:10px; } /** ELEMENTS TO APPEAR NEXT TO EACH OTHER */ .webform-component-fieldset div.form-item{ display:inline; padding-right:10px; float:left; } .webform-component-fieldset div.form-item .form-item{ float:none; }
you can get more granular with float and clear properties put in the right places on specific elements.
Hope this helps. .s
Kalyani Waychal wrote:
Hi, It's my first post.I need support for my problem. I am using webform module(5.x) into my site. I created two text filed into webform. I want arrange that field as follows:
(at left corner)text field1 (at right corner)text field 2
(at right corner)submit button How to change html view for my webform componet? How to make align component as per my need (i.e right not down to each other)? How make advanced setting(validation) for textfield?
Thanks in advanced for your help.
Hi sander-martijn,
Thanks for your reply. It's really very helpful to me.
Hi sander-martijn,
Firstly thanks for your reply. I have another problem into submit button. I want to change loction of submit button from left to right. What css class I can use for the submit button? Or any other option for this.
regards kalyani Waychal
Hi kalyani,
In order to move beyond the basic suggestions I gave you will need to view the source to find the css names. In your case if I view the source on one of my forms and search for the submit button I see that it has an id of edit-submitbutton so the first thing I would try is
#edit-submitbutton{ float:right; }
if I want to make sure nothing appears on the same line as the button I would change it to: #edit-submitbutton{ float:right; clear:both; }
if that doesn't work I would try using #edit-submitbutton, input[type=submit]{ float:right; clear:both; }
etc. It's really a combination of viewing source and some trial/error work to see what calls the browser will respond to - this is because the html in drupal is so extremely nested that sometimes it can be difficult to figure out where to place the calls. The reason for it makes sense - everyone needs a different level of granularity and it would be more frustrating if drupal made assumptions of your requirements.
Unfortunately I'm not certain that the above code will work at all and can't really test it right now. float and clear operate on block elements which the submit button is not. However contrary to what I just said about the nesting, the submit button in my form is the only element that isn't wrapped in its own div. If this code doesn't work then it's time to hack the module (or if you're lucky override a theming function) to wrap the submit button in a div with an id that you can then apply the above code suggestions to. That should work but as always you should try to (in order) modify css, override functions, modify code (last resort).
.sander
Kalyani Waychal wrote:
Hi sander-martijn,
Firstly thanks for your reply. I have another problem into submit button. I want to change loction of submit button from left to right. What css class I can use for the submit button? Or any other option for this.
regards kalyani Waychal
Hi sander-martijn,
Thanks for your reply. Sorry for late reply. Your suggestion is really very helpful for my webform customisation problem. Thank again your help.
regards kalyani Waychal
-
Kalyani Waychal -
sander-martijn