The button below is not aligning with the input.
The input has to be on the same height as the button, though the padding of the input seems to have a influence on the alignment! The difference between padding-top and padding-bottom creates this shift of the button.
I made a fiddle: http://jsfiddle.net/3RMhm/10/ to show what I mean.
CSS:
.button {
font-size: 15px;
padding: 9px 23px;
border:0;
}
.form {
width: 290px;
background-color: #F9F9F9;
font-size: 18px;
color: #333;
height: 25px;
border:1px solid darkgray;
padding-top: 15px; <--- This padding
padding-bottom: 0px; <--- And this padding
}
HTML:
<input name="name" class="form" />
<input class="button" type="submit">
Just add vertical-align: middle to both elements (button and input).
http://jsfiddle.net/3RMhm/3/
Use:
vertical-align:middle;
margin-top: -5px;
http://jsfiddle.net/Hive7/3RMhm/2/
In your .form class,just change padding-top and padding-bottom values to :
.form {
padding-right: 4px;
padding-bottom: 8px;
}
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
(11 answers)
Closed 6 years ago.
I've a text area in my html, and this has rounded edges. but when I click inside the text area, it is showing a rectangle around the rounded edges.
Below is my HTML.
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" onclick="TextAreaToggle()" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>
and here is my CSS
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
}
working fiddle https://jsfiddle.net/jrss9192/1/
Just remove the outline
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: 0;
}
The rectangle that you are seeing is a browser-default outline. While its not a good idea to remove browser default styles, it can be done by declaring outline: none;
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>
Use: outline: none when the textarea is focused
textarea:focus{
outline: none;
}
That's outline of textarea appears on focus just set outline:0; on .Textareausermsg
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline:0;
}
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="width: 260px; height: 41px;"></textarea>
The rectangled area is called "outline" and it's a css property.
Try add outline: none; in your css code to remove it.
If you want a "blue border" when you click / focus the element, try this
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
.Textareausermsg:focus, .Textareausermsg:active {
border:1px solid blue;
}
https://jsfiddle.net/jrss9192/2/
Here is the solution to your question.
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
.Textareausermsg :active , .Textareausermsg :focus { outline:none}
Please have a view at this image:
As from the image you can see that I have entered text in the input box but as I also have a button placed in that box so the text is getting hidden below the box.
Is there any way to prevent that, the button should also be on that place and the text should not hide instead it shoud be focused if further text is being typed.
Html code is:
<div class="form">
<input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
<button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>
The css code is:
#media only screen and (max-width: 768px)
{
input[type="text"]
{
font-family: "titillium_webregular", Arial, sans-serif;
border: none;
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
color: rgba(85, 85, 85, 0.85);
font-size: 1.1em;
display: inline;
padding: 19.7px 13px;
background: #f5f5f5;
outline: none;
width: 93%;
box-shadow: 0px 11px 34px #111;
vertical-align: middle;
}
.btn-1
{
cursor: pointer;
padding: 29px 29px;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: -67px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
}
Any helps appreciated. Thanks in advance.
Try this.. You can see a space right to the textbox. I have added padding right to the textbox
$(function(){
$('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});
#tbcss
{
padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>
In my opinion, you should use your styling in a bit different way and use .form CSS selector too. You can use flexbox for example:
.form {
// NEW:
display: flex;
justify-content: space-between;
// Your old input CSS:
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
background: #f5f5f5;
box-shadow: 0px 11px 34px #111;
width: 93%;
}
input[type="text"] {
// NEW:
width: 100%;
// Your old without unnecessary CSS:
font-family: "titillium_webregular", Arial, sans-serif;
color: rgba(85, 85, 85, 0.85);
border: none;
font-size: 1.1em;
padding: 19.7px 13px;
outline: none;
vertical-align: middle;
}
.btn-1 {
// NEW
align-self: flex-end;
// Your old without unnecessary CSS:
cursor: pointer;
padding: 29px 29px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
Add webkit CSS properties in case you need support in older browsers.
If you wish to prevent the image from hiding the text, then all you need to do is increase the padding-right property on the input textfield.
Maybe try a value of 40px or even more until you're satisfied with the result, then the caret should never go below the button.
Just add this:
input[type="text"]
{
padding-right:5%;
}
In this case all u need to do is add "padding-right: 50 px;" to the input text box class(50 is just a number u can increase or decrease that according to your need)
I'm using a <ul> with css display: inline; set to use as a toolbar/menu at the top of my page like this:
As you can see, the text vertically aligns perfectly, however the img on the left is too high, and the input box on the right is slightly low. I'm struggling to move them so they are perfectly vertically aligned.
Below is my CSS:
.mynav {
font-weight: 300;
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #0067b1;
}
.mynav li {
display: inline;
align-items: center;
vertical-align:middle;
line-height:35px;
}
.mynav a {
color: white;
display: inline-block;
padding: 15px;
font-size: 14pt;
text-decoration: none;
}
.mynav input {
margin-left: 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
padding: 5px;
width: 200px;
height: 25px;
margin-top: 0px;
}
.mynav i
{
font-weight: 300;
color: white;
font-size: 24px;
margin-left: 15px;
}
And my HTML (if needed):
<ul class="mynav">
<li><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" style="width: 100px; height:25px; padding-right:25px;" /></li>
<li>My Jobs</li>
<li>Obtain a Quote</li>
<li>Submit New Instruction</li>
<li>Settings</li>
<li>Help</li>
<li><input type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></li>
</ul>
As for the input box, it has a padding of 5 which I have tried to remove with no luck. I have also set margin-top: 0px on the input, still no luck.
As for the logo, I'm also quite stumped. I've tried adding margin-top: 5px, but it's not working.
I also have found both these questions on StackOverflow:
<ul> horizontal nav bar... vertically-align element
css - verticaly align horizontal li
The first had no effect and the second wanted to change the CSS to display: flex, which for me gets rid of the horizontal bar, doesn't it?
Can anyone help me get the logo and the input box (and the magnifying glass) vertically centered? Thank you in advance!
Plunker here
I created a small bootstrap example for what you require. Different to what you have but give the required output more or less. Hopefully you can continue from here if this solution works for you.
HTML
<div class="col-md-2"><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" /></div>
<div class="col-md-1">My Jobs</div>
<div class="col-md-2">Obtain a Quote</div>
<div class="col-md-2">Submit a New Instruction</div>
<div class="col-md-1">Settings</div>
<div class="col-md-1">Help</div>
<div class="col-md-3"><input class="inputHeight" type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></div>
</div>
</div>
CSS
.navbar {
width:80%;
font-weight: 300;
border: 1px solid #ccc;
border-width: 1px 0;
margin: 0;
padding: 0;
text-align: center;
background-color: #0067b1;
vertical-align:middle;
line-height:50px;
}
.inputHeight {
margin-left: 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
padding: 5px;
width: 200px;
height: 25px;
margin-top: 0px;
}
Plunker Example
Adding next two rules to your image will center it correctly.
display: inline-block;
vertical-align: sub; /* or text-bottom */
As for the input , it looks correctly centered to me.
In your specific example it's enough to add vertical-align:middle; to <img> and to <a>, <i> elements! Also I'd recommend to have <li> elements as inline-block, not inline for more flexibility.
In general case, to align vertically the image height must be equal as
other element's line-height in the line and vertical-align:middle has to be set.
If image height is 25px then set:
.mynav li, .mynav i {
vertical-align:middle;
line-height:25px;
}
img {
vertical-align:middle;
height: 25px;
line-height:25px;
}
Here you go: https://plnkr.co/edit/Xf3uvvjuqykQMjnhVxes?p=preview
I want to make all buttons on my website follow a flat button class, input buttons or span buttons should be exactly the same.
I have applied the same class, removing border, adding padding, etc.. but, the buttons using the element appear slightly bigger than the ones using the form button.
Why is that? What other css property could I edit to make them look the same (aside from having a preset height for all of them?)
This is my button class:
.button{
padding: 10px;
display: inline;
border-radius: 2px;
font-family: "Arial";
border: 0;
margin: 0 10px;
background: red;
font-size: 15px;
line-height: 15px;
color: white;
width: auto;
height: auto;
box-sizing: content-box;
}
Here is the fiddle: http://jsfiddle.net/raphadko/f3293yeL/
Best solution would be to wrap the buttons inside the spans. That way, you'll total control of the button positioning. Do not use them as button inside a form!
span > .button {
padding: 10px;
display: inline;
border-radius: 2px;
font-family: "Arial";
border: 0;
margin: 0 10px;
background: red;
font-size: 15px;
line-height: 15px;
color: white;
width: auto;
height: auto;
box-sizing: content-box;
}
<form>
<span>
<input type="submit" class="button" value="Button1" />
</span>
<span>
<input type="submit" class="button" value="Button2" />
</span>
<span>
<input type="submit" class="button" value="Button3" />
</span>
</form>
Note: The spans can help you position the element easily but its not advisable to use it as button when a form is concerned.
So I've spent some time trying to figure this one out, but I've ended up turning to StackOverflow for help. I'm trying to get my search bar and go button to display on one line and am having trouble doing this.
The html code for the inputs is:
<nav class="sidebar">
<input type="text" id="search" placeholder="search">
<input type="button" name="button" value="Go" class="goButton">
</nav>
And the CSS for the two inputs is as follows:
#content .sidebar #search {
width: calc( 100% - 45px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
Can anyone suggest a fix for this? Currently, the inputs display as follows:
Thanks in advance.
It gets aligned when the text box is a little smaller and the margin-top of the button is removed:
#content .sidebar #search {
width: calc( 100% - 60px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
FIDDLE: http://jsfiddle.net/s0y93L87/
try put this:
#content .sidebar #search {
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
float: left;
width: 200px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 48px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
float: left;
}
There are a few reason why applyingwidth: calc( 100% - 45px ); to the text input isn't leaving enough room for the 45px-width button:
The browser is adding padding to the text input (+2 pixels for left and right padding) (at least in Chrome)
The browser is adding a border to the text input (+2 pixels for left and right borders) (at least in Chrome)
Because the text input and button are not on the same line, there is a single whitespace character separating them, adding more width.
Define explicit padding and border for the text input so browsers can't reset it, and adjust the 45px to 47px accordingly (to account for left and right 1px borders):
#content .sidebar #search {
border:1px solid #aaa;
padding:0;
width: calc( 100% - 47px );
}
And remove the whitespace between the two inputs by putting them on the same line in the HTML:
<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">
I also removed the top: -48px from your .goButton CSS.
Using a CSS reset can help eliminate this kind of problem of browsers adding unexpected styles.
Result: http://jsfiddle.net/k305a0jo/1/
Have you tried put it inside a table? something like this:
<nav class="sidebar">
<table>
<tr>
<td class='search'>
<input type="text" id="search" placeholder="search">
</td>
<td class='go'>
<input type="button" name="button" value="Go" class="goButton">
</td>
</tr>
</table>
</nav>
.sidebar #search {
width: calc(100%-45px);
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
}
/* Go button for search*/
.sidebar .goButton {
top:-48px;
background-color: #BA2022;
width:45px;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
}
td.search {
}
td.go {
}
tr {
width: calc(100%);
margin-bottom: 21px;
}
Here is a jsfiddle:
http://jsfiddle.net/yzmkxfa7/4/