I'm curious why I get different results on Chrome and Firefox with this simple code:
Breaks on Chrome
Works on both Firefox, IE and Chrome
The only difference is in HTML layout:
<div class="container">
<div class="form-wrapper">
<input class="email" type="text">
<button class="send pull-right">Send</button>
</div>
</div>
versus this:
<div class="container">
<div class="form-wrapper">
<input class="email" type="text"><button class="send pull-right">Send</button>
</div>
</div>
Any recommended fix without ugly hacks and HTML changes?
<input> isn't block elements by default. You must use float:left for them:
.form-wrapper {overflow:hidden;}
input.email, button.send{float:left}
Method 1:
/* CSS used here will be applied after bootstrap.css */
.form-wrapper {
background-color: #000;
padding: 10px;
font-size: 0; /*set font-size to zero*/
}
input.email {
background-color: #fff;
border: none;
height: 50px;
width: 70%;
padding-left: 15px;
padding-right: 15px;
font-size: 16px; /*reset font-size*/
}
button.send {
background-color: grey;
border: none;
height: 50px;
width: 30%;
font-size: 16px; /*reset font-size*/
}
working demo
Method 2:
Use float for inputs and clear the float using overflow:hidden to parent div.
demo
Related
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
I would like the font size for my form label and input fields to scale down from 18px to 10px when the browser width reaches 1460px or less.
I read that it is not possible to get fonts to automatically 'scale down' as such when the browser width decreases, and that I would need to use media queries instead.
Therefore I have put a media query at the top of my style tags asking the font size for my label and input to display at 10px when the screen size is 1460px, but it doesn't seem to work. The rest of my code is working fine however, so it must be something to do with the way I am coding my media query.
If someone could offer some help that would be much appreciated.. my code is pasted below.
#media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
Your selector — label input — doesn't match any elements in your HTML.
None of your input elements are descendants of your label elements.
Perhaps you meant label, input to select label elements and input elements. If so, then it still wouldn't work because you define the input font-size with a more specific selector later on (and the most specific selector wins the cascade) and the label in a similar way (it doesn't have a more specific selector, but when selectors are equal, the last one wins the cascade).
Actually, you CAN scale fonts up or down with the viewport size. There is a method with calc() and vw units:
Basically you do something like font-size: 3vw and then set max and min font sizes.
Here is a link to the calculation on Smashing Magazine. The rest of the article is pretty interesting, too.
You can extend this even further and optimize the font size with media queries.
Have fun! :)
I have a responsive form element which is supposed to be inline with a title, like so:
which is fine in Firefox because this is what I'm looking for.
But when we see the same code in Chrome (edit, same results in Blisk, Yandex and maybe all webkit browsers, along with MS Edge and IE11), this is what I get:
The code:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: table-cell;
}
.field,
input {
width: 100%;
}
input,
.btn {
padding: 10px 16px;
box-sizing: border-box;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
Or, take a look at the code here (Codepen.io).
Does FF and Chrome handle the CSS differently? I feel that Chrome is showing the correct layout considering that the .field class has display: table-cell;, but I'm not sure about that. Is there a way to achieve what Firefox has shown in Chrome as well without removing the responsive nature of the input field?
Thanks.
Just remove the property: table-cell and make sure that everything is inline-block:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: inline-block; /* instead of table-cell > inline-block */
}
input,
.btn {
padding: 10px 16px;
}
SEE demo here: CODEPEN
There is no need to use table-cell just use float:left and remove the width from field class.
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
float: left;/* Use floating here */
}
.field,
input {
/*width: 100%;*/
}
input,
.btn {
padding: 10px 16px;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.
You can use something like this.
Outside box:
<input></input><span style="margin-left:10px;">lb</span>
Inside box:
<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>
Fiddle
You can make use of bootstrap input-group component.
Note: The example below uses bootstrap 4 classes
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.
Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.
Example here:
https://jsfiddle.net/peg3mdsg/1/
If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).
const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
hiddenValue.innerHTML = input.value;
// Only show units when there is a value?
// unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});
.wrapper {
position: relative;
width: 80px;
}
#input {
border: 2px solid #fee400;
background-color: #373637;
width: 100%;
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
padding: 3px 3px 3px 10px;
color: white;
}
.units {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0;
pointer-events: none;
overflow: hidden;
display: flex;
/* Match input styles */
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
/* includes border width */
padding: 5px 5px 5px 12px;
color: white;
opacity: 0.8;
}
.invisible {
visibility: hidden;
}
#unitsValue {
/* Support spaces */
white-space: pre;
}
<div class="wrapper">
<input id="input"type="number" value="12" />
<div class="units">
<span class="invisible" id="hiddenValue">12</span>
<span class="units-value" id="unitsValue"> km</span>
</div>
</div>
Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
Fiddle
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
CSS:
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
JSFiddle DEMO
The problem I have found with all of the previous answers is that, if you change the length of the units (for example, "€/month" instead of "lb") the <span> element won't be correctly aligned.
I found a better answer in another post, and it's really simple:
Html
<div class="wrapper">
<input></input>
<span class="units">lb</span>
</div>
CSS
.wrapper{
position: relative;
}
.units {
position: absolute;
right: 14px (or the px that fit with your design);
}
This way, you can even put a long unit such as "€/month" and it will still be correctly positioned.
using bootstrap:
<label for="idinput">LABEL</label>
<div class="input-group mb-3">
<input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">m3/s</span>
</div>
</div>
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}
The 'required' text is showing up to the left of the input box. Similar problem in Opera except is displays on the next line (creates a line break). Looks as expected in FF3.1 and chrome. Any suggestions? Eventually I would like to use the display:none attribute on the 'required' span and show this span as necessary with javascript.
<html>
<head>
<title></title>
<style type="text/css">
<!--
input.missing { background-color: #FFFF77; }
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
// float: right;
width: 235px;
text-align: left;
padding-right: 0px;
padding-left: 45px;
}
div.spacer {
clear: both;
}
.container{
width: 425px;
background-color: #ccc;
border: 1px dotted #333;
padding: 5px 5px 5px 5px;
margin: 0px auto;
}
.error{
color: #ff0000;
}
.required{
color: #ff0000;
float: right;
// display:none;
// display:inline;
}
-->
</style>
</head>
<body>
<div id="contact_form">
<form action="/jr/index.php" method="POST" id="contact">
<div id="top_message" style="width: 360px; margin: 10px auto;">
Enter Your Information Below</div>
<div class="container">
<div class="row">
<span class="label">Name:</span>
<span class="formw"><input size="30" maxlength="30" name="name" id="name" value=""></span>
</div>
<div class="row">
<span class="label">Email:</span>
<span class="formw"><input size="30" maxlength="30" name="email" id="email" value=""></span>
<span id="email_error" class="required">(required)</span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="formw">
<input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span>
</div>
<div class="spacer">
</div>
</div>
<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>
</form>
</div>
</body>
</html>
IE really makes me hate web dev sometimes.
You probably should start by adding the proper DocType tag at the top of your file.
EDIT:
After looking at your code, it appears you are not using your floats properly. First off - // does NOT comment out lines in a CSS file. You need to wrap it in /* and */ to comment it out. So your SPAN.formw style is floating to the right, which is before your SPAN.required, which also floats right. Since you're using SPAN tags, you really don't need to float anything here. If you remove all of those it should just fall into place for you.
Which doctype are you using ? A strict one may prevent that kind of problem... Also, I usually start my CSS design with a reset file to get rid of all those kind of annoyances : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Using double slash "//" is not valid CSS commenting. So this float right rule:
div.row span.formw { // float: right;
Is being applied.
Use:
/* comment */
When commenting CSS.
Put a float:left on the formW class
Float all the boxes in the row to the left, instead of mixing floating and inline elements:
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: left;
width: 235px;
padding-left: 45px;
}
.required{
float: left;
color: #ff0000;
// display:none;
}
jriggs, since IE8 is still not completely stable, for some projects you can have IE8 revert to IE7 rendering rules. One of the benefits is that this doesn't give the user the compatibility view button on the right of the location bar.
For more info and specifics see
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx