Forums

CSS testbox size

clive.morley 04 Mar, 2009
Hello,

Great component, very useful

I have setup a form that use Chronoforms CSS, but the css seems to overwrite the size of the text box, how can i change this, form code below

<div class="form_item">
<div class="form_element cf_heading">
<h1 id="" class="cf_text">General Lock Order Form</h1>
</div>
<div class="clear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_text">
<span class="cf_text">Royal mail special delivery postage charges will apply</span>
</div>
<div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Access Acount Number</label><input class="cf_inputbox required" maxlength="150" size="30" id="access_account_number" name="access_account_number" type="text" value="{cb_accessaccountnumber}">
<a onclick="return false;" class="tooltiplink">
<img  src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div  class="tooltipdiv">Access Acount Number :: Access Account Number</div></div><div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Dealer Name</label>
<input class="cf_inputbox required" maxlength="150" size="30" id="dealer_name" name="dealer_name" type="text" value="{cb_dealername}">
<a onclick="return false;" class="tooltiplink">
<img  src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div  class="tooltipdiv">Dealer Name :: Dealer Name</div>
</div>
<div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Purchase Order Number</label><input class="cf_inputbox required" maxlength="150" size="15" id="purchase_order_number" name="purchase_order_number" type="text"></div>
<div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox"><label class="cf_label">Contact Name</label>
<input class="cf_inputbox required" maxlength="150" size="30" id="contact_name" name="contact_name" type="text">
</div>
<div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Contact Telephone Number</label>
<input class="cf_inputbox required validate-phone" maxlength="150" size="30" id="contact_telephone_number" name="contact_telephone_number" type="text">
</div>
<div class="clear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Delivery Address</label><input class="cf_inputbox required" maxlength="150" size="90" id="delivery_address" name="delivery_address" type="text" value="{cb_deliveryaddress}">
<a onclick="return false;" class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16">
</a>
<div class="tooltipdiv">Delivery Address :: Delivery Address</div>
</div>
<div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Lock Part Number</label>
<input class="cf_inputbox required" maxlength="150" size="30" id="lock_part_number" name="lock_part_number" type="text">
<a onclick="return false;" class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16">
</a>
<div class="tooltipdiv">Lock Part Number :: Please enter the lock part number</div>
</div>
<div class="clear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label">Type of Lock</label>
<select class="cf_inputbox validate-selection" id="select_7" size="1" name="select_7">
<option value=" "></option>
<option value=" Door">Door</option>
<option value=" Ignition"> Ignition</option>
<option value=" Boot"> Boot</option>
<option value=" Petrol Cap"> Petrol Cap</option>
<option value=" Glove Box"> Glove Box</option>
</select>
</div>
<div class="clear"> </div>
</div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Make of Vehicle</label>
<input class="cf_inputbox required" maxlength="150" size="30" id="make_of_vehicle" name="make_of_vehicle" type="text">
<a onclick="return false;" class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16">
</a>
<div class="tooltipdiv">Make of Vehicle :: Please enter the make of the vehicle</div>
</div>
<div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Model of Vehicle</label>
<input class="cf_inputbox" maxlength="150" size="30" id="model_of_vehicle" name="model_of_vehicle" type="text">
<a onclick="return false;" class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16">
</a>
<div class="tooltipdiv">Model of Vehicle :: Please enter the model of the vehicle</div>
</div>
<div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Year of Vehicle</label>
<input class="cf_inputbox validate-number" maxlength="4" size="4" id="Year_of_vehicle" name="Year_of_vehicle" type="text">
<a onclick="return false;" class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16">
</a>
<div class="tooltipdiv">Year of Vehicle :: Please enter the year of the vehicle</div>
</div>
<div class="clear"> </div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Key Number</label>
<input class="cf_inputbox" maxlength="4" size="4" id="key_number" name="key_number" type="text">
<a onclick="return false;" class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16">
</a>
<div class="tooltipdiv">Key Number :: Please enter the number of the key required</div>
</div>
<div class="clear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label">Type of Key Required</label><select class="cf_inputbox" id="select_1" size="1" name="select_1">
<option value=" "></option>
<option value=" No Key Required">No Key Required</option>
<option value=" Genuine">Genuine</option>
<option value=" Non Genuine"> Non Genuine</option>
<option value=" Laser"> Laser</option>
<option value=" Transponder - Master"> Transponder - Master</option>
<option value=" Transponder - Sub"> Transponder - Sub</option>
<option value=" Transmiter - Master"> Transmiter - Master</option>
<option value=" Transmiter - Sub"> Transmiter - Sub</option>
<option value=" Standard"> Standard</option>
<option value=" Crusiform"> Crusiform</option>
</select></div>
<div class="clear"> </div>
</div>
</div>
<div  class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Keyblank Part Number</label>
<input class="cf_inputbox " maxlength="4" size="4" id="keyblank_part_number" name="keyblank_part_number" type="text">
<a onclick="return false;" class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16">
</a>
<div class="tooltipdiv">Keyblank Part Number :: Please enter the part number of the keyblank required</div>
</div>
<div class="clear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit" name="undefined" type="submit">
</div>
<div class="clear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Reset Form" type="reset">
</div>
<div class="clear"> </div>
</div>
GreyHead 04 Mar, 2009
Hi Clive,

You can edit the css, or add new styles directly to the inputs or the form html.

Bob
clive.morley 04 Mar, 2009
Can the css file be ammended so that it does not overwrite the size of a textbox, if so how?
Max_admin 04 Mar, 2009
as long as the CSS has a fixed width for it then you can't change this except by a new CSS for this field you want to change through a style tag!

Cheers,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
This topic is locked and no more replies can be posted.