I want to create a form in a DIV and I would like the DIV to be no bigger than the elements in the form. So I have crafted this as my DIV
<div id="content">
<div id="userNotificationForm">
<form class="new_user_notification" id="new_user_notification" action="/user_notifications" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="nZlQSEjw1o/7DxxOAUmFWJiXr5ZqPodX2tBcCs2qshqLVhM8U/WXuBWocICXDmYOoBnAjhvrEIat972+SkQKEQ==" />
<div class="field">
<label for="user_notification_price">Label</label> <span class="required">*</span> <br>
<input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
</div>
<div class="actions buttonContainer">
<input type="submit" name="commit" value="Submit" id="submit" class="button btn" data-disable-with="Submit" />
</div>
</form>
</div>
</div>
and assigned it the "display:inline-block" property, thinking that would make the form as big as needed, and no bigger.
#userNotificationForm {
background-color: #fff;
display: inline-block;
text-align: left;
}
This works fine on Mac Firefox -- https://jsfiddle.net/yj3cdvfy/ , but notice on Mac Chrome the text box bleeds over the edge of the form container (the white section). Ditto for Safari. How do I make the container include the textbox completely, as Firefox seems to do?
Your CSS does not specify any explicit width, neither for the form, nor for the div and input element. But the HTML markup specifies a size attribute for the input element which makes Chrome, Chromium and Internet Explorer 11 compute a width larger than the parent element's widht, so that the input field will overflow outside.
Specify a width: 100% (relative to its parent element) on input[type=text] to make it fit the form.
input[type=text] {
width: 100%;
/* ... */
}
Here is an updated fiddle that works in the current browsers (Chrome 60, Firefox 55, and Internet Explorer 11):
https://jsfiddle.net/IngoSteinke/ju2qfz9w/1/
Related
I'm trying to create an input form on a web page, and I want all of the input elements to be lined up along a certain column. My idea was to use absolute positioning to just shift all of the input elements over to a specific point on the page. It's working fine, except for one problem: the input elements are overlapping with each other a little bit, vertically.
Here's a MVCE:
<!DOCTYPE html>
<html><head>
<style>
span.right_align {
display: inline;
position: absolute;
left: 80px;
}
div.form_container {
position: relative;
}
</style>
<title>World's Best GUI</title></head>
<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">
<div class="form_container">
<form name="guiForm" method="post" action="return false;">
Input 1: <span class="right_align"><input type="text"></span><br>
Input 2: <span class="right_align"><select autocomplete="off">
<option value="yes">Yes</option>
<option value="no">No</option></select></span><br>
Input 3: <span class="right_align"><input type="text" size="50"></span><br>
Input 4: <span class="right_align"><input type="text"></span>
</form>
</div>
</body>
</html>
As far as I can tell, the problem is because the font is smaller than the size of the input box, but it's the size of the font that determines where a new line "begins". If you comment out or remove everything in the right_align class, they stop overlapping (but they also stop lining up so nicely).
I'll also note that the reason I went for the span-class solution is because I need to 1) have some lines dynamically disappear and reappear, depending on the current state of a drop-down, and 2) dynamically create new input items that will also line themselves up nicely. This seemed like a solution that would interfere very little with the current workings of my web page.
Is there a simple way to fix this? Should I be creating these columns in an entirely different way? I'm open to totally new ideas as well.
EDIT: someone suggested I create a jsfiddle, so I did: http://jsfiddle.net/uy9comxk/
EDIT 2: there will be lines where I have multiple inputs that have to appear beside each other on the same line (for date inputs). I didn't include them because it would have increased the MCVE size by a lot.
In your css, use a line-height and it will work:
div.form_container {
position: relative;
line-height: 25px;
}
With a fiddle
Since you're using a form, you should use the label tag and set the width of each - ideally a little longer than than width of the inputs' names to account for longer ones. Using the label for the inputs will also fix the overlapping issue of the inputs.
CSS:
label {
display: inline-block;
width: 80px;
}
input {
margin-left:10px;
}
HTML:
<form name="guiForm" method="post" action="return false;">
<label for="input1">Input 1:</label> <input name="input1" type="text"><br>
<label for="input2">Input 2:</label> <input name="input2" type="text"><br>
<label for="input3">Input 3:</label> <input name="input3" type="text"><br>
<label for="input4">Input 4:</label> <input name="input4" type="text"><br>
<label for="input5">Input 5:</label> <input name="input5" type="text"><br>
</form>
http://jsfiddle.net/ub3bw1rv/
I have a quantity selector on a webpage. I used a trick to make them inline without any gaps.
<div id="quantitybar">
<span class="inputwrapper">
<button id="piece_plus">+</button>
<input type="text" value="1" id="pieces" />
<button id="piece_minus">-</button>
</span>
<input type="submit" value="Add to cart" />
</div>
Here's my fiddle: http://jsfiddle.net/86sZ7/
It looks nice in Chrome, but in Firefox the bottom border of the text imput field is missing a piece. If I set overflow: hidden to the span then it looks OK, but the submit button is shifted down.
I want to make it look the same in Chrome and Firefox. Plus: it would be nice to have the submit button align with the other inputs too, because now it's a little off.
I'm trying to remove the margin between the search bar and the "Go!" button at the top of this page: http://beta.linksku.com/
I've tried removing all styles and adding margin:0;padding:0;border:none;, but there is still a margin between the two elements. I cannot replicate this problem on JSFiddle, but it occurs in all browsers on my website.
This is how elements function as inline-block.
Normally when you use inline-block elements, you often use them inside a paragraph, so the space between the letters must be consistent. inline-block elements apply to this rule too.
If you want to remove the space completely, you can float the elements.
float: left;
You can also remove the whitespace from your template document. Like so:
<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />
The space you're seeing is the default padding applied to inline elements. Simplest hack? Set font-size: 0 on the form, then reset the actual font-size on the input and button.
Magic.
form {
font-size: 0;
}
form input {
font-size: 12px;
Why does this occur? The browser interprets the whitespace between the inputs as a textual space, and renders accordingly. You can also smush all your elements together on one line, but that's ugly code soup.
That whitespace is relative to your font-size. You can remove it by adding font-size:0 on the container of your inputs, in this case a form, like so:
form {
font-size: 0;
}
Using chrome on the Mac, I can get rid of the space if I edit the form node as HTML in the Developer tools, and remove the space between the two closing tags so:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2">
<input type="submit" value="Go!" class="btn">
</form>
becomes:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn">
</form>
One way is to remove space, but if you're not willing to have an unreadable one-line mess, you can use HTML comment:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><!--
!--><input type="submit" value="Go!" class="btn">
</form>
I want to have two elements stay on the same row.
Right now I have this code:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</fieldset>
This works. The label, the input field and the button will all be on the same row as long as you view it in fullscreen in your computer browser. But if we make the window smaller, all three elements will be shown on one row each. Is there any way to make the label appear on one row, and the input field + button on the row below?
You need to override the jQM enhancements:
http://jsfiddle.net/E4EVT/10/
http://jsfiddle.net/E4EVT/36/ (Using the grid layout)
http://jsfiddle.net/E4EVT/42/ (Using the table layout)
JS
$('#textinput2').css('width','60%').css('display','inline');
HTML
<div>
<!-- use span instead of label -->
<span>Text:</span>
<input type="text" id="textinput2"/>
<br />
<input type="button" id="searchbutton2" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
I think you might want to look into the grid layout jQM offers
http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html
For Jquery Mobile 1.2.0
<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>
you need to add attribute data-inline="true" to the input elements.
CSS:
label {
display: block;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
width: 212px; /* the width of twice your input (plus borders) */
}
And your HTML:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<div class="wrap">
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
</fieldset>
http://jsfiddle.net/ahallicks/BWsdk/
Edit:
Sorry, misread your question! If you want them all on the same line to start with use the following CSS:
label {
float: left;
margin-right: 12px;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
float: left;
width: 212px; /* the width of twice your input (plus borders) */
}
http://jsfiddle.net/ahallicks/E4EVT/
I have a wizard-style HTML form with a row of submit buttons for the Back/Next/Cancel actions (in that order). The form can also contain a varying number of input fields, such as text fields, radio buttons, checkboxes, dropdowns (select tags), and textareas. The customer requires the "Next" button to be the default action, so that if the user types into a text field and presses Enter, it should submit the form as if they had clicked the "Next" button.
The problem is that in this scenario, the browser (at least IE, which is what 99% of our customers use) submits the form using the first button declared in the form, which as you can see from the above list is "Back", not "Next" as desired.
One fix I read about is to declare the Back and Next buttons in reverse order (i.e. Next first) then use CSS to display them around the right way, like so:
<html>
<head>
<style type="text/css">
.formSubmitButtons {
direction: rtl;
float: left;
}
.formSubmitButtons input {
direction: ltr;
float: none;
}
</style>
</head>
<body>
<form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
<div class="formSubmitButtons">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnBack" value="Back">
</div>
<input type="submit" name="btnCancel" value="Cancel">
<br/>Some text fields go here...
</form>
</body>
</html>
This provides the desired behaviour and button order in both Firefox and IE, however the spacing of the Cancel button relative to the others is inconsistent. In IE6 it looks nice enough, but in Firefox 3.0.5, the Cancel button is jammed up against the Next button.
Does anyone know what CSS magic I need to weave in order to get these three buttons to space evenly in both browsers?
(avoiding the issue by sorting the buttons Next/Back/Cancel is not an option)
(also thanks to everyone who suggested JavaScript-based solutions, but not all our customers allow JS, so it has to be a straight HTML and/or CSS solution)
Here's what I ended up doing that worked nicely (based on Cletus's suggestion):
<!--
<input type="submit" name="btnNext" style="position: absolute; left: -9999px" tabindex="-1">
<input type="submit" name="btnBack" value="Back">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnCancel" value="Cancel">
-->
(ignore the wrapping comment tags, they're just so you can see the HTML)
Have you considered using this trick? Basically you just have a hidden button appear first which does the desired action.
Could you just define a style
.btnMargin {
margin-left:5px;
margin-right:5px;
}
And just apply it to the buttons
<input type="submit" name="btnNext" class="btnMargin" value="Next">
<input type="submit" name="btnBack" class="btnMargin" value="Back">
...
<input type="submit" name="btnCancel" class="btnMargin" value="Cancel">
?
If you have the same style to all, it seems to yield in a few pixel differences between Next/Back and Back/Cancel. If it's crucial that this wouldn't happen, you could define individual margins to buttons. ?
This plasces the buttons in the back, next, cancel order, right next to each other. The only drawback is that you have to set a apecific width on the first button container to make it work in IE7. It works fine without that in Firefox and IE8.
The doctype is important so that the page is rendered in standards compliant mode. Without it the page displays in quirks mode which makes IE display the form elements with completely different spacing.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.formButtons { float: left; }
.formSubmitButtons { width: 120px; }
.formSubmitButtons input { float: right; }
.formFields { clear: both; }
</style>
</head>
<body>
<form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
<div class="formButtons formSubmitButtons">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnBack" value="Back">
</div>
<div class="formButtons">
<input type="submit" name="btnCancel" value="Cancel">
</div>
<div class="formFields">
Some text fields go here...
</div>
</form>
</body>
</html>
Make the buttons type="button" instead of type="submit". Then, add a hidden field, e.g.:
<hidden name="continue" value="Next"/>
Finally, add javascript onclick handlers to the buttons, which first set the value of the hidden field to the name of the pressed button, and then submit the form.
Why do you not just float the Cancel button right?
If it is only a firefox problem you could use an attribute selector like this
input[name="btnCancel"] {float: right;} or margin-left or whatever you want. Otherwise just use classes on the inputs.