I've tried to align the button submit and the search input but I doesn't work and I don't get to understand why.
I have this styling code:
input[type=search]
border: none
cursor: text
padding: 0
border: 1px solid #cfcfcf
.search-main input, .search-main button
height: 30px
display: inline-block
.search-main button
background: #55e0a8
border: none
width: 18%
margin-left: -7px
display:inline-block
.search-main input
width: 80%
and this html:
<form method="get" class="search-main">
<input name="q" type="search">
<button type="submit"></button>
</form>
and here's what I get:
Here's the online version
So, pretty silly question, but since I've been trying for more than 40+ minutes, thought I would try to post it here. I've been playing with firebug, padding, margins, and I don't get where the problem comes from.
You can try -
.search-main > button {
float: right;
}
Add vertical-align: middle to your inline-block elements:
.search-main input, .search-main button {
height: 29px;
display: inline-block;
vertical-align: middle;
}
Problems arise when you use height on inline elements.
You can simply remove the height and replace with padding on both elements :
.search-main input, .search-main button {
padding: 10px 0;
display: inline-block;
}
.search-main button {
background: #55e0a8
border: none
width: 18%
margin-left: -7px
display:inline-block
padding: 11px 0; // +1px for border on the input
}
It was easy, I hope the following code suffices what you needed.
.search-main button {
background: #55e0a8;
border: none;
width: 18%;
margin-left: -7px;
display: inline-block; //additional code
float: left; //additional code
vertical-align: middle; //additional code
height: 32px; //additional code
}
and this for the input:
<input name="q" type="search" style=" display: inline-block;float: left;">
Related
i got quite simple thing to do, but i can't find way out for that.
let's say i got form, i want to add inputs one below another, however next to one of them there will be label (only next to one of them).
I would like to make it, so all the classes are equal size (but to make it responsive). However, i would like to make that input with label next to it, to share the space with label, so it will be next to each other, not one under another if user would open that in little screen.
hope you guys got what i mean. :P
Thank you!
EDIT
<div class="mainbox-form">
<form>
<div class="mainbox-input">
<input type="text" name="store-name" placeholder="Name"><br>
</div>
<div class="mainbox-input">
<input type="text" name="store-subdomain" placeholder="Subdomain">
<label name="store-subdomain">.label.here</label><br>
</div>
<div class="mainbox-input">
<input type="email" name="store-email" placeholder="Email"><br>
</div>
<div class="mainbox-input">
<input type="password" name="store-password" placeholder="Password"><br>
</div>
</form>
</div>
.mainbox-form
{
text-align: center;
max-width: 50%;
min-width: 350px;
margin: 0 auto 0 auto;
}
.mainbox-input label
{
font-weight: bold;
color: #606060;
}
.mainbox-input
{
max-height: 57px;
}
.mainbox-input input
{
background: #f3f3f3;
width: 80%;
border: none;
color: #606060;
margin: 3px auto 3px auto;
padding: 15px 40px;
font-size: 18px;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 59%;
}
.mainbox-input input:focus
{
outline: none;
}
.mainbox-input input:active
{
outline: none;
}
http://jsfiddle.net/twjw113w/
Here's the code I've got as for now. The problem I have with it is that, the labeled input is not sticked to the left, and is behaving differently. i bet you can see it yourself better there, than I would explain it.
You need to add display: inline-block and width to the label and input element that you want on the same line.
.mainbox-input label
{
font-weight: bold;
color: #606060;
display:inline-block;
width:35%;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 40%;
display:inline-block;
}
Is this how you wanted it?
jsfiddle
Please remove the css property below:
.mainbox-input{
max-height: 57px;
}
Modify the css below:
.mainbox-input input[name=store-subdomain]{
max-width:100%;
}
.mainbox-input input{
width:auto;
display:table
}
.mainbox-input label{
display: table;
padding: 0px 40px;
}
Visit this url:
http://jsfiddle.net/sarowerj/e41653o4/
I've been trying to eliminate the space between these two labels, which I'd like to be side-by-side, to no avail. I've checked the way jQuery UI does it, but as far as I can tell their CSS is the same as mine. What am I missing?
.buttonset label {
width: 45%;
display: inline-block;
border: 2px solid #eee;
text-align: center;
padding: 5px 0px;
margin: 0px;
}
.buttonset label.checked {
border: 2px solid #5dccdb;
color: #5dccdb;
font-style: italic;
}
.buttonset input[type='radio'] {
display: none !important;
}
Fiddle
Any help appreciated.
Remove the white space between the labels in your HTML:
Demo http://jsfiddle.net/w76rM/4/
There are several ways to do it, three of the quickest ones are to comment out the white space, have all the elements in one line or have the ending > of the previous tag at the beginning of the next line.
1 -In one line:
<Label>...</label><Label>...</label>
2- Commented out:
<Label></label><!--
--><Label></label>
3- > of previous tag at the beginning of the next line:
<Label></label
><Label></label>
Your markup with commented out white space:
<div class="buttonset one_half">
<div>Twins</div>
<label for="twins_yes">
<input id="twins_yes" name="twins" type="radio" value="Yes">Yes</label><!--
--><label for="twins_no" class="checked">
<input id="twins_no" name="twins" type="radio" value="No" checked>No</label>
</div>
You have to add float left to the label elements
.buttonset label {
width: 45%;
display: inline-block;
border: 2px solid #eee;
text-align: center;
padding: 5px 0px;
margin: 0px;
float: left; }
I have this structure for fill out forms in html
<fieldset class="signup">
<div>
<label>First Name:</label>
<asp:TextBox ID="txtFirstName" runat="server"/>
</div>
<div>
<label>Last Name:</label>
<asp:TextBox ID="txtLastName" runat="server"/>
</div>
</fieldset>
And I defined this CSS
form fieldset
{
clear: both;
border-width: 0px;
border-style: none none none none;
padding: 0px;
margin: 0px;
}
form fieldset div
{
clear: left;
display: block;
margin: 10px 0px 10px 0px;
padding: 0px;
vertical-align: central;
}
form fieldset div label {
display: block;
float: left;
/*width: 150px;*/
padding: 1px 20px 0px 0px;
text-align: left;
vertical-align: central;
}
The appareance is clean but I commented the width attribute in the last style for labels in order to make it generic in the future. So I added a new style for my specific form and added this class to the fieldset but it's not working. I lost the width of my labels so how can I fix this mistake?
form fieldset div label .signup {
width: 150px;
}
Your selector is incorrect. What you want is likely:
form fieldset.signup div label {
width: 150px;
}
On a side note, I suggest reading up on CSS Selectors to understand the syntax a bit more. See:
Selectors Level 3
MDN (Selectors)
MSDN (Understanding CSS Selectors)
This should work:
fieldset.signup div label {
width: 150px;
}
Have you tried
min-width: 150px !important;
You are using a long chain of descendant CSS selectors and there is no such hierarchy in your Document. Use comma to group selectors. White space means descendant. also, Use > to indicate direct child its more efficient than descendant.
I have a very little but hard (for me) problem to solve.
I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.
HTML
<input type="text" name="email" /><input type="submit" value="»" />
CSS
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 9px;
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
}
I've setup this basic code on a jsfiddle here.
You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.
What am I missing?
Remove/add line-height: 18px; for both.
Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.
input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}
The problem is your padding that is applying wrong to your button.
Trying solving it like this.
input[type=submit], input[type=text] {
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
height: 30px; /* or whatever height necessary */
}
Additionally, you can keep the padding left and right on your button like this.
input[type=submit] {
background: #000;
color: #fff;
padding: 0px 9px;
}
input {
height: 19px;
}
This maybe?
Also, remove the padding property.
http://jsfiddle.net/xkeshav/e6aTd/1/
Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.
You need to remove the height and work on the actual height of the input text field just by padding/font-size
jsfiddle
Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...
The best solution I found is to put a div arround and set its style to display: flex.
All is perfect this way.
body {
background: #ccc;
}
div{
display: flex;
}
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 5px;
font-size: 25px;
border: 0;
margin: 0;
}
<div><input type="text" name="email" /><input type="submit" value="»" /></div>
TRY
body {
background-color: #ccc;
}
input[type=text] {
width: 218px;
}
Working DEMO
I have a text box and a button, which is described with the HTML/CSS below.
Currently these two elements are appearing with the button slightly lower than the text box. Can somebody please suggest how I can get these two aligned so their middles are on the same horizontal axis? Thanks
update: apparently the outside world can't see this site. I'll post some HTML describing the controls shortly
update 2: This is the code:
<div id="SearchForm">
<form method="get" action="/search/Tabs">
<div class="search-box ActionControl">
<input type="text" value="" name="Search" id="Search">
Search
</div>
<div id="ContentArea"></div>
</form>
</div>
#SearchForm .search-box
{
padding: 25px;
height: 25px;
background-color: #F6E9D8;
border: 1px solid #E7DFD0;
}
#SearchForm .search-box input
{
width: 425px;
}
#SearchForm .search-box a
{
background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:White;
cursor:pointer;
font-size:8pt;
padding-left: 22px;
padding-right:22px;
padding-top: 3px;
padding-bottom: 3px;
}
This is a quick fix... it was only a pixel out to my eyes...
#SearchForm .search-box a
{
... (Your existing styles)
position: relative;
top: -0.1em;
}
Using vertical-align doesn't work for me, so this just shims it.
#search, .search-box a { vertical-align: middle; display: inline-block; }