MachForm Community Forums » MachForm 3

1. symison
   Member

   I am trying to change the size of lets say example for the address field. I do not like how the address field itself stretches across the form. i just want to input the physical address not a turn by turn directions on that long line. Why aren't the fields marked so that they are easy to find. Like a dive for just Name. A Div for Just Middle name A Dive for just Last name etc....etc.. There are so many fields I would love to have total control over but just don't know what is what. Like I want to change the link of email field and not just by clicking small medium large. How do I do this do you have documentation to show me how to do this. Please help thank you for your time.

   Posted 12 years ago #
2. 

   yuniar

   Each fields generated by MachForm has its own "id" attribute. This id is unique for each field and you can use CSS code to target certain/specific field.

   For example, a "Name" field is having this HTML code:

   <li id="li_2" >
   		<label class="description">Name </label>
   		<span>
   			<input id="element_2_1" name="element_2_1" type="text" class="element text" maxlength="255" size="8" value="" />
   			<label>First</label>
   		</span>
   		<span>
   			<input id="element_2_2" name="element_2_2" type="text" class="element text" maxlength="255" size="14" value="" />
   			<label>Last</label>
   		</span>
   </li>

   Now if you would like to set the width of the "First Name" field, you can use CSS code like this:

   #element_2_1{
     width: 200px;
   }

   that would set the width of the "First Name" field to 200px.

   I suggest to use Firebug, a Firefox plugin, to easily inspect each of your form field. Using Firebug you will be able to easily find the id of each field and thus customize it further.

   http://getfirebug.com/

   ---

   MachForm Founder

   Posted 12 years ago #

3. norm
   Member

   Width, height and text-indent seem to work, but when I try to change margin, padding, background colors or images for a Text Field it just isn't working, is there any reason for this? Seems to be targeted correctly because of the size CSS affecting it.

   Posted 12 years ago #

4. norm
   Member

   Think I've sorted it, If I target it like this below then I can change all of the styling for for Text field - this is exactly the same selector as in the view.css file so it's directly replacing the default.

   #main_body input.text
   {
   background:#fff url(http://www.wbmcommunications.co.uk/responseforms/images_london2012/input_bg.gif) repeat-x top;
   border-bottom:3px solid #ddd;
   border-left:3px solid #c3c3c3;
   border-right:3px solid #c3c3c3;
   border-top:3px solid #7c7c7c;
   color:#333;
   font-size:100%;
   margin:5px;
   padding:9px 9px;
   }

   Posted 12 years ago #

RSS feed for this topic

Reply

You must log in to post.