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.
Related
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/
My checkbox isn't displaying in Chrome. It displays in other projects, but not in this one. I tried adding input[type="checkbox"] {-webkit-appearance: checkbox;} to my CSS, but that didn't work either. I'm not sure what else to do.
My code:
<div class="row">
<div class="col-lg-4 col-lg-offset-8">
<form>
<input type="checkbox" name="playerLeaderStats" value="goals" />Goals
<br />
<input type="checkbox" name="playerLeaderStats" value="redCards" />Red Cards
<br />
</form>
<button type="button" class="btn btn-primary">Set</button>
</div>
</div>
Is this code where the checkbox does not working ?
It working on Chrome, Firefox, IE : result on Chrome v54
Did you see if you've forgot a css property who modifying this type of input ?
Look with the Page Inspector if your input is really where it supposed to be even if it not visible ?
For some reason my Submit and Cancel buttons are not being wrapped in the form tag like I expect them to be (based on their position with in the form tag in the HTML) when I have their float property set to right and left respectively. The two buttons are positioned just outside & below the form div to the far right & left sides.
Link to the HTML & embedded CSS
alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png
How can I make it so the form div wraps the two buttons so they do not appear outside & below the form div?
Thank you
Adam
Remove .cancels float rule:
.cancel{/* no float */}
*tested on Chrome
Looks like you need to clear the floats. Give this a try.
<form action="#" method="get">
<textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea>
<input id="buttons" class="submit" type="submit" value="Submit" />
<input id="buttons" class="cancel" type="button" value="Cancel">
<br style="clear: both;" />
</form>
If I have a html form like the following:
<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>
Is it possible to align the checkboxes so they are in union, without using a table or css but pure html? Otherwise, which css should be used?
Yup. Surround each label with a <label> tag:
<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">
Then give the label a width:
label {
display: inline-block; /* try "block" instead if this fails in IE */
min-width: 5em;
}
That should pad out the text boxes nicely. As an added bonus, clicking on the label should now place the browser focus into the textbox.
The article Applying CSS to forms has some examples of syling labels to cause inputs to the right to line up along a vertical edge.
That said, it is a convention in user interface design to place labels to the right or radio buttons and checkboxes. If you follow that convention, then they will line up by themselves (since all the checkboxes will share a width).
You could just put your labels and inputs in an unorderded list. In order to get the alignment, the text would have to go on the right of the input/
<ul>
<li>
<label><input /> Some Text</label>
</li>
</ul>
or
<ul>
<li>
<input /><label for="">Some Text</label>
</li>
</ul>
Rich
The simplest way would simply be to align them all to the right. I'm not sure if the "align" attribute works on the form element but you could try that, or wrap your code in a div or p element with align="right").
CSS is a better solution. Put a class on the form then use the CSS rule text-align: right; or simply add style="text-align: right" to the form element directly.
I don't see why you want to do that.
It doesn't meet your no css instruction, but you could use inline styles if you really just want no external css.
Perhaps you could use
CSS (and to a lesser extent- tables) are tools you are looking for.
Edit: Another way you could do this is with ghost pixel images. images that are a 1x1 alpha transparent png and you use the height and width attributes in to tell it how much you want to space. You'd might need some inline css to make sure things clear correctly.
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.