I've got the following input boxes in my website but I don't know how to change their width and height. Ben searching but can't find anything, seems strange though if you can't.
Any other styling code or a link to akk the properties are greatly appreciated!
HTML
<input type="text" id="FontTextBox">
<input type="number" id="FontSizeBox">
<select id="FontStyle">
<option value="1">Arial</option>
<option value="2">Comic Sans MS</option>
<option value="3">Courier New</option>
<option value="4">Georgia</option>
<option value="5">Impact</option>
</select>
Simply use CSS style - width and height:
<input type="text" id="FontTextBox" style="width: 100px; height: 100px;">
<input type="number" id="FontSizeBox" style="width: 100px; height: 100px;">
<select id="FontStyle" style="width: 100px; height: 100px;">
<option value="1">Arial</option>
<option value="2">Comic Sans MS</option>
<option value="3">Courier New</option>
<option value="4">Georgia</option>
<option value="5">Impact</option>
</select>
Related
i have this datalist and i am assuming that data in options has morethan 100, and I want to have a max height so that the design looks neat. please help me to guys. thank you.
<input type="text" list="suggestions" class="form-control" style="width: 100%;" >
<datalist id="suggestions" >
<option value="Blue">
<option value="White">
<option value="Black">
<option value="Red">
<option value="Green">
<option value="Blue">
<option value="White">
<option value="Black">
<option value="Red">
</datalist>
Do you want a scrollable div to show all the options?
If yes, you can set the height of the parent 'div' to a set height and set the "overflow-y:auto" .
How can i add a border to a form i tried <border:2px;> but that does not work, I also tried adding a background image to the form but with no success i tried
.form-all {
background: url(url.jpg) no-repeat top left;
}
Here is my form
form {
border: 2px;
}
<form name="myform" id="EmailForm" action="" method="post">
<label> Number hours: </label>
<Select class="form-control input-sm error" min="3" name="Hours" id="Hours" onChange="calculatePrice()" placeholder="<?php echo $RoomErr;?>">
<OPTION value="0">Select Number of Hours</OPTION>
<OPTION value="45">3 Hours</OPTION>
<OPTION value="60">4 Hours</OPTION>
<OPTION value="75">5 hours</OPTION>
<OPTION value="90">5 hours +</OPTION>
</select>
<br>
<br>
<label>Would You Like Ironing? </label>
<Select NAME="ironing" id="ironing" onChange="calculatePrice()" class="form-control input-sm error" placeholder="<?php echo $ironingErr;?>">
<OPTION value="0">Would you Like Ironing?</OPTION>
<OPTION value="8">Yes</OPTION>
<OPTION value="0">No</OPTION>
</select>
<br><br> Your Estimated Quate: £<input class="transparent-input" type="text" id="PicExtPrice">
border:2px solid #000;
Or, you can replace #000 with any colour you like.
I have the following html snippet:
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: inline; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>
I am trying to have the div show inline, and set a minimum width (to force it to show on screen).
The HTML above is not achieving that goal. How do I correct it so that the div appears alongside the select option control?
[[Additional Info]]
I have tried this on the latest versions of FF and Chrome - both fail to display correctly.
You need to give the element a display: inline-block, you can't set width or height of an inline element because it behaves just like a <span> or a <strong> would, taking only the space it needs.
Take a look at this updated snippet with display: inline-block
change from display: inline; to display: block;.
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: block; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>
I have a multiple select input with a min-width set on the select element. The options are not taking up the full width of the available select box in Internet Explorer 9.
The items take up the full width on Chrome and Firefox. How do I make the option elements take the full width of the select input?
Notice the Saab item here in Internet Explorer:
This Fiddle demonstrates the issue
<select style="min-width: 150px; width: auto;" name="cars" multiple>
<option value="volvo" style="width: 100%;">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
It works correctly in Chrome:
To my knowledge, you can't give OPTION a block layout in IE. It will expand only to the width of its content, I don't believe you can fiddle with its width. You can, as you've demonstrated, adjust the width of the SELECT element without issue.
I tested it out in some odd way it dont understand your auto width on the select - but if you just set it to a pixel size you will get a full width marker on it:
See it here FIDDLE
The code:
<form action="form_action.asp">
<select style="min-width: 150px; width: 1px;" name="cars" multiple>
<option value="volvo" style="width: 100%;">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
I ended up setting the css width attribute to 100% for both the select and option, and then the select items filled up the full width:
Demo Fiddle
<body>
<form action="form_action.asp">
<select style="min-width: 150px; width: 100%;" name="cars" multiple>
<option value="volvo" style="width: 100%;">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
<select multiple="multiple" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
If there is no option available, it shrinks and looks bad. Is there any attribute where I can specify the default length?
You can give it a width via CSS, for example:
<select multiple="multiple" size="2" style="width: 200px;">
You can test it out here.
you can use CSS to specify a width and height, so that no matter what options are available, the size of the select element stays the same:
select { width: 12em; height: 6em }
sample:
http://jsfiddle.net/3PQ92/
http://jsfiddle.net/3PQ92/1/
http://jsfiddle.net/3PQ92/2/