I have this page with 1st row having 2 text boxes and 2nd row having a text box. I want to make their width same, the
below code works fine in chrome, but in firefox and IE (tested in IE9) width are different. How can I make the width same
in all browsers?
JS Bin
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" size="2"/><input type="text" name="cno" style="width:122px;"/><br>
<input type="text" name="cpono"/>
</form>
</body>
</html>
Chrome
Firefox
You can use box-sizing: border-box; to make alignment of input widths easier cross browser (it takes into account the padding, border, and content widths). It also makes calculations of widths in a pre-processor like Sass really simple.
input[type="text"] {
box-sizing: border-box;
}
input[name="cnop"] {
width: 33px;
}
input[name="cno"] {
width: 122px;
}
input[name="cpono"] {
width: 155px;
}
Check the fiddle: https://jsfiddle.net/mshtacea/
You can assign a width to all the 3 input tag, it is sufficient that the sum of the first two is equal to the value of the third. You must also reset the browser's input default styles.
<!doctype html>
<html>
<body>
<form>
<input type="text" name="cnop" style="width:30px;border:0;margin:0;padding:0"/><input type="text" name="cno" style="width:122px;border:0;margin:0;padding:0"/><br>
<input type="text" name="cpono" style="width:152px;border:0;margin:0;padding:0"/>
</form>
</body>
</html>
If you use the box-sizing attribute, set a fixed width on your form and percentage widths on your form inputs, everything should align nicely.
<form style="width: 200px;">
<input type="text" name="cnop" size="2" style="width: 25%;box-sizing: border-box;"><input type="text" name="cno" style="width: 75%;box-sizing: border-box;"><br>
<input type="text" name="cpono" style="width: 100%;box-sizing: border-box;">
</form>
Obviously it's best to put these style attributes into a style tag or your stylesheet but this is a cut and dry example of the solution.
You are better off using CSS to format your controls.
<form>
<div class="container">
<input type="text" name="cnop" class="input1"/>
<input type="text" name="cno" class="input2"/>
</div>
<div class="container">
<input type="text" name="cpono"/>
</div>
</form>
In a style sheet, add these classes
div.container {
display: block;
width: 200px; /* or whatever overall width you need */
}
div.container input {
width: 100%;
}
div.container .input1 {
width: 30px; /* or whatever width or percentage you need */
}
div.container .input2 {
width: 170px; /* or whatever width or percentage you need */
}
Related
In my fiddle i show a form devided into two parts (horizontally). The left part is the problematic one. There are a select element in line with two textfields sharing the available width percentally. What i'd like to have is to give the select and the middle textfield a defined percentual width and have the right textfield to take rest to always span up to the right container border. This layout must remain behaving like this upon scaling the container. Also, the select element must remain readable. At the moment its content is getting partially hidden upon scaling.
I cannot figure the proper formatting to achive this.
Here's my code:
<style>
.unseen {
display: none
}
form {
background: maroon;
margin: 0;
display: flex;
}
[class*="span5"] {
background: olive
}
[class*="span7"] {
background: pink
}
#salutation {
width: 12%;
min-width: 50px
}
#firstname {
width: 30%
}
#lastname {
width: 40%
}
</style>
<div class="container" id="page">
<div class="row-fluid" id="page_content">
<section class="form row-fluid" id="page_content">
<div class="row-fluid">
<form class="form-horizontal form-validate">
<div class="span7">
<fieldset class="well-small">
<legend></legend>
<div class="control-group">
<div class="control-label">
<label id="salutation-lbl" for="salutation">Full Name</label>
<label id="firstname-lbl" for="firstname" class="unseen">First Name</label>
<label id="lastname-lbl" for="lastname" class="unseen">Last Name</label>
</div>
<div class="controls">
<select id="salutation" name="salutation" class="fullname salutation">
<option value="Mr." selected>Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<input type="text" name="firstname" id="firstname" value="Max" placeholder="forename" />
<input type="text" name="lastname" id="lastname" value="Mustermann" placeholder="surname" />
</div>
</div>
</fieldset>
</div>
<div class="span5">
<h2>Other content</h2>
</div>
</form>
</div>
</section>
</div>
</div>
I have tried to solve your question in the best possible way but not exactly as you wanted for the first part of the question as percentage widths won't always work properly since bootstrap is constantly changing the parent container's width. So, I have written a jquery function that will calculate the desired width of these input text boxes and dynamically add them as their respective css widths. This function along with some other minor html/css tweaks will fix your problem.
HTML - Changed the bootstrap form class from form-horizontal to form-inline which better suits the requirements.
<form class="form-inline form-validate">
CSS
Added a fixed width of 65px that keeps the select element readable even with the longest possible option. (mrs.)
Removed percentage widths from #firstname and #lastname selectors as we'll be adding those via jquery.
And finally added a !important to the display property of the unseen class (required when switching to bootstrap form-inline class)
.unseen {
display: none !important;
}
form {
background: maroon;
margin: 0;
display: flex;
}
[class*="span5"] {
background: olive;
}
[class*="span7"] {
background: pink;
}
#salutation {
width: 65px;
}
JQUERY - Here's the jquery function that does all the trick. This function calculates the available width for the textboxes to fit in with default padding
function resizeFormElements() {
/*
Calculating the available width for the two text boxes by subtracting the
=> main control container width
- the width of the selector element
- 4 * default_bootstrap_margin_of_3px between input elements (two input elements so both left and right margins)
- 4 * default_padding_of_6px of input text elements as per bootstrap.min.css line 238 (two input elements so both left and right padding)
- 1 (to not get affected by truncated values)
*/
var avail = parseFloat($(".controls").width()) - parseInt($("#salutation").css("width")) - 4 * 3 - 4 * 6 - 1;
$("#firstname").css("width", avail / 2);
$("#lastname").css("width", avail / 2);
}
$(window).on("resize load", function () {
resizeFormElements();
});
Here's a working fiddle of the above solution.
There are a million issues with sprites and IE8 i've read about online, however, they all seem to deal with the issue of the sprites not showing up at all. Mine is showing up, its just showing the wrong piece of the sprite. It works fine in all other browsers.
Heres the CSS
div.searchForm input[type=text] {
border: 0;
padding: 0 10px;
margin: 0;
background: url(../img/sprite.png) 0 -125px no-repeat;
background-size: 115% 235px;
width: 600px;
height: 30px;
float: left;
font-size: 12px;
color: #fff;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
and the html:
<section id="secondary6">
<h1 class="hidden">Search</h1>
<div class="clearfix">
<div class="grid_4">
<nav class="grid_2 secondary">
<h1 class="hidden">Search Secondary Navigation</h1>
</nav>
<div class="searchForm">
<input type="text" placeholder="search">
<input type="button">
<input type="submit" class="hidden" >
</div>
</div>
</div>
</section>
basically you click the search button, and it displays a search bar that should be hidden otherwise. Like I said it works in other browsers.
IE8 doesn't support background-size (see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility), so that's what you'll have to work around. Depending on your needs, you might try IE7.js (which works with other versions of IE) or a conditional comment to adjust the position of the image for IE8. Or, just make sure your raw image doesn't need to be re-sized.
What happens when You assign class or ID to particular text input field?
for example..
div.searchForm input.classInput {
/* css code here */
}
Also ...
..where is element form tag wrapper, form name, form action ?
The input fields should not reside in a document on a way You presented.. without form tag..
Which software actually generated this code for You?
Is it dreamweaver?
Basic and proper example of valid HTML input form ..
<form id="formID" name="formName" method="post" action="#">
<input type="text" name="textUno" value="" />
<input type="text" name="textDue" value="" />
<button type="submit" name="do_processing"> Go! </button>
</form>
Consider the following HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="border-style: solid; border-width: thin; width:100%">
<input type="button" style="width:20px;float:right;" value="a" />
<div style="padding-right:35px;">
<input type="text" style="width: 100%;" />
</div>
</div>
</body>
</html>
This is the correct layout, and how it looks in IE 9 in normal mode. If you stretch the browser, the button remains on the right of the input box, and the input box stretches accordingly.
This is how it looks in IE 9 in compatibility mode. As you can see, the input box jumps onto the next line:
So, is there a way to fix this, so that it works regardless of whether or not compatibility mode is set?
Obviously I'm looking for a solution with minimal hackiness :)
Thanks!
Try this HTML:
<div class="search"><input name="btn" type="button" value="a" /><span><input type="text" name="search_input" /></span></div>
With this CSS:
.search > span {
display: block;
overflow: hidden;
padding-right: 10px;
}
.search input[type=text] {
width: 100%;
}
.search input[type=button] {
float: right;
}
Here's a jsfiddle to test it out for yourself:
http://jsfiddle.net/KVhUC/
I was able to get it to work with FF, IE9 (with/without compatibility mode)
http://jsfiddle.net/Cytkx/4/
<div style="border-style: solid; border-width: thin;">
<input type="button" style="width:20px;float:right;overflow:hidden;" value="a" />
<div style="overflow:hidden;padding-right:10px;">
<input type="text" style="display:block;width:100%;" />
</div>
</div>
I believe this is close to what you're looking for. Note this may not be backwards compatible.
You can try using <Table> </Table> instead of Div. They are better containers compared with divs.
I have two <fieldset>s inside a single div (nothing else), that are positioned next to eachother (positon: absolute, div is set to relative).
Is there any way to make these fieldsets both the same height without setting a fixed height?
I have some idea that maybe I can make both have a max height of the parent, and a min height of auto?
Also, would it then be possible to make the content of the fieldsets position centred vertically?
I'm not concerned if it works with IE, but needs to work on Firefox and Webkit, and if possible Opera.
Thanks
Edit: You can see the page here: https://dl.dropbox.com/u/2318402/SO/login.html
You can put them in a parent container like a table or div, and have the two children be at height=100%.
The only other two options are the ones you didn't want, at a fixed height like height=59px, or you can do it via javascript.
For the vertical positioning, you can stick them in a parent container like a table or div and then slap on there a vertical-align:center
I'm a bit late but you can always use tables (don't like those either but well.. table works in this situation).
<table>
<tr>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
</tr>
</table>
The following works, without using js/jQuery, but does rely on -in this example- using a css3 psuedo-element :nth-of-type(odd), though this could be replaced by applying a css class to the odd-numbered fieldsets.
It also relies on using height: 100% for the fieldsets, which itself is dependant upon the parent element (in this case the form) having a specified height. If that's a problem then, for the purpose of demonstration, I've used overflow-y: auto; on the fieldsets to restrict their dimensions to that of their parent, but with a scroll behaviour to reveal the overflow.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
form {
width: 50%;
height: 200px;
}
fieldset {
width: 30%;
height: 100%;
margin: 0 1em 0 0;
padding: 0.5em 1em;
overflow-y: auto;
}
fieldset:nth-of-type(odd)
{
float: left;
}
label {
display: inline-block;
width: 30%;
}
input[type=text]
{
display: inline-block;
width: 50%;
}
</style>
</head>
<body>
<div id="wrap">
<form enctype="form/multipart" method="post" action="">
<fieldset>
<label for="one">Label 1</label><input id="one" name="one" type="text" />
<label for="two">Label 2</label><input id="two" name="two" type="text" />
</fieldset>
<fieldset>
<label for="three">Label 3</label><input id="three" name="three" type="text" />
<label for="four">Label 4</label><input id="four" name="four" type="text" />
<label for="five">Label 5</label><input id="five" name="five" type="text" />
<label for="six">Label 6</label><input id="six" name="six" type="text" />
</fieldset>
</form>
</div>
</body>
</html>
Demo online at: http://www.davidrhysthomas.co.uk/so/fieldsets.html.
Obviously, if there's any questions or problems feel free to raise them in the comments and I'll try my best to help you out. =)
How do you increase the height of an textbox? (along with its font size)
I'm assuming from the way you worded the question that you want to change the size after the page has rendered?
In Javascript, you can manipulate DOM CSS properties, for example:
document.getElementById('textboxid').style.height="200px";
document.getElementById('textboxid').style.fontSize="14pt";
If you simply want to specify the height and font size, use CSS or style attributes, e.g.
//in your CSS file or <style> tag
#textboxid
{
height:200px;
font-size:14pt;
}
<!--in your HTML-->
<input id="textboxid" ...>
Or
<input style="height:200px;font-size:14pt;" .....>
Note that if you want a multi line text box you have to use a <textarea> instead of an <input type="text">.
Increasing the font size on a text box will usually expand its size automatically.
<input type="text" style="font-size:16pt;">
If you want to set a height that is not proportional to the font size, I would recommend using something like the following. This prevents browsers like IE from rendering the text inside at the top rather than vertically centered.
.form-text{
padding:15px 0;
}
<input type="text" style="font-size:xxpt;height:xxpx">
Just replace "xx" with whatever values you wish.
With inline style:
<input type="text" style="font-size: 18pt; height: 40px; width:280px; ">
or with apart CSS:
HTML:
<input type="text" id="txtbox">
CSS:
#txtbox {
font-size: 18pt;
height: 42px;
width : 300px;
}
If you want multiple lines consider this:
<textarea rows="2"></textarea>
Specify rows as needed.
Don't the height and font-size CSS properties work for you ?
Use CSS:
<html>
<head>
<style>
.Large
{
font-size: 16pt;
height: 50px;
}
</style>
<body>
<input type="text" class="Large">
</body>
</html>