I have a search bar on my website (link), with the form, input and button html markup. The height of the button is less than the input box if the resolution of the screen is not 100% i.e. you can see this by zooming in or out.
Screenshot:
Code:
<script src="https://use.fontawesome.com/85348ca6a3.js"></script>
<form action="index.php" method="post" class="srchForm" autocomplete="off" style="margin:auto;max-width:480px">
<input name="msg" id="search" type="text" placeholder="Search..." autofocus value= "<?php if(isset($_POST['msg'])) {
echo htmlentities ($_POST['msg']); }?>"></input>
<button type="submit"><i class="fa fa-search"></i></button>
<input type="submit" style="border:0; padding:0; font-size:0">
</form>
form.srchForm input[type=text] {
margin-top: 5px;
margin-left: 3.5%;
width: 81%;
font-size: 14px;
padding: 10px 20px 10px 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
form.srchForm button {
margin-top: 5px;
margin-right: 3.5%;
width: 12%;
padding: 10px;
font-size: 16px;
border-left: none;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
You should try flex. I tested your website it works.
form.srchForm {
display:flex;
}
form.srchForm input[type=text] {
margin-top: 5px;
margin-left: 3.5%;
width: 81%;
font-size: 14px;
padding: 10px 20px 10px 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
form.srchForm button {
margin-top: 5px;
margin-right: 3.5%;
width: 12%;
padding: 10px;
font-size: 16px;
border-left: none;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
<script src="https://use.fontawesome.com/85348ca6a3.js"></script>
<form action="index.php" method="post" class="srchForm" autocomplete="off" style="margin:auto;max-width:480px">
<input name="msg" id="search" type="text" placeholder="Search..." autofocus value= "asd"></input>
<button type="submit"><i class="fa fa-search"></i></button>
<input type="submit" style="border:0; padding:0; font-size:0">
</form>
Since the bar and the button both have static heights, I would just force that hight to prevent any weird rounding issue:
Add these CSS properties to your existing CSS rules:
form.srchForm input[type=text] {
height: 40px;
}
form.srchForm button {
height: 40px;
}
If this help, for me when I zoom to 200%+ it lines back up. Your website looks great btw! An helpful.
Also, I kno its kinda hacky but maybe make a horizontal container that's, say, 10% the height of the page, and the make the search bar and button's height 100%.
I want to complete en0ndev's answer and give some explanations. You encountered this problem because you used different font sizes for the items you needed to be displayed in line (while having the same height). You used:
form.srchForm input[type=text] {
font-size: 14px;
}
form.srchForm button {
font-size: 16px;
}
Even if the font size of the icon is larger than the input's text, the displayed item is smaller (use the same font size for both lowercase and uppercase letters, but the displayed height is different). Because the displayed height difference was small, it was not visible when the page was displayed normally, but when it was magnified, it became obvious. I enlarged the page and increased the font size of the icon button to 28px (when the display: flex was disabled in the form properties). Now the icon's box was bigger.
When using display: flex; on a parent element, all the child elements are displayed in line and stretched to the same height (of the highest element). By default, display: flex; includes align-items: stretch;
You need to change your font-size to match between the button and the search bar then it will line up.
Related
I'm new to this site and a beginner at html and css. I'm working on a personal project for practice and the design calls for both the input box and submit button to be a height of 55px and a width of 320 px. Both of these include a 2px border and a 15px padding. I'm not sure why my current code is not producing the same sizes. The input button is clearly smaller (both width and height) than the input boxes.
Any help would be appreciated.
body {
background-color: blue;
}
/* LOGO */
.logo img {
height: 35px;
padding: 50px;
display: block;
margin: 0 auto;
}
/* FORM */
.form {
background-color: white;
width: 400px;
height: 500px;
padding: 40px;
border-radius: 5px;
margin: 0 auto;
}
h1 {
font-family: "Courier New", Courier;
font-weight: normal;
text-align: center;
padding: 20px;
}
input[type='email'],
input[type='password'],
button[type='submit']{
height: 38px;
width: 303px;
border: 2px solid gray;
padding: 15px;
margin: 15px auto;
display: block;
font-size: 15px;
border-radius: 5px;
}
button {
background-color: green;
}
span {
color: white;
}
<div class="logo">
<img src="images/logo.png" alt="AnalogSea logo">
</div>
<div class="form">
<h1>Sign up</h1>
<form action="/signup" method="post" class="form_section">
<label class="email button_size" for="email" required>Email</label><br>
<input placeholder="foo#bar.com" type="email" name="email" id="email"><br>
<label class="email button_size" for="password" required>Password</label><br>
<input placeholder="1234passw0rd" type="password" name="password"><br>
<button type="submit"><span>Sign Up</span></button>
</form>
</div>
The reason it's happening is the way the box-model is rendered in browsers. In your example, the padding is what is causing the issue. For the button, the padding and border is included in the 303px, so the button is a total of 303px wide. For the <input> elements, the padding and border is added to the total width, giving it a width of 337px.
To fix this you can go about it a couple ways. You can reset the box-sizing (the property in CSS that handles this) globally like:
* { box-sizing: border-box }
Or you can add that to just the <input> elements.
input[type="whatever"] { box-sizing: border-box }
I personally do it globally as a reset, to make things consistent. That's a my preference.
If you do this, you'll have to readjust the height on your elements to 68px, because now the padding will be considered as part of the height property, not added to it.
Here's some reading on the box-model: http://www.w3schools.com/css/css_boxmodel.asp
Here's some reading on the box-sizing property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Hope this helps!
I would change:
<button type="submit"><span>Sign Up</span></button>
to
<input type='submit' value='Sign Up' />
then alter your CSS. This solution is more backward compatible, as well.
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
I have a div which contains some text and a button.
When I click on the button, it disappears based on a criteria which is controlled by an ng-if, but this causes the text to move up a couple of px!
I can't seem to make it stay in the same spot. Any ideas?
Here is what the HTML looks like:
<div class="review-helpful">
<span ng-if="showThis">Howdy there partner!</span>
<span ng-if="!showThis">How they hanging?</span>
<button ng-if="showThis" type="button" class="btn btn-default btn-helpful" ng-click="setShowThis(false)">Yes</button>
</div>
And here is the CSS:
.review-helpful {
margin-top: 5px;
min-height: 23px;
font-size: 12px;
color: #696969;
}
.btn-helpful {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
font-size: 12px;
}
I've hooked up a plnkr to show the exact problem: http://plnkr.co/edit/9FqzhB3NJXHHnHtdfVvB
The height of the button is greater than the height of the text in the span.
There are probably a million ways to solve it. One way is using the line-height style:
.review-helpful {
margin-top: 5px;
min-height: 23px;
font-size: 12px;
color: #696969;
line-height: 24px;
}
Good morning,
I have a little problem i have a text input field with border radius and because of the border radius the first character that is typed kind of sticks out the input field how can i fix this? like a little bit of whitespace extra before the first character.
HTML
<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">
CSS
input[type=text], [type=email], [type=password] {
width: 300px;
border-radius: 50px;
font-size: 15px;
display: block;
}
Well you simply have to add padding to your input and change its width according to padding size (box-sizing, as #Vucko said could do the trick, but IE8 doesn't support it).
input[type=text], [type=email], [type=password]{
width: 284px; /* this width is your initial width - padding-left - padding-right; */
padding:0 8px;
border-radius: 50px;
font-size: 15px;
display: block;
}
<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">
Just change the style of the padding-left to 0
Just add padding-left to your input, check the fiddle.
padding-left: 10px;
DEMO
One solution is to use text-indent: 5px:
input[type=text], [type=email], [type=password] {
width: 300px;
border-radius: 50px;
font-size: 15px;
display: block;
text-indent: 5px;/*add text-indent*/
outline: none;/*also remove outline*/
}
<label for="u_name">Gebruikersnaam</label>
<input type="text" name="u_name" value="">
Also remove outline.
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; }