So I have a few elements in an inline-block which display perfectly as they should in Firefox but for some reason in Safari and Chrome the positioning is all off
CSS:
#bb-tools {
float: right;
width: 100%;
text-align: right;
position: absolute;
z-index: -1;
}
.main-tools {
display: inline-block;
color: #000000;
font-size: 0.8em;
margin-top: 10px;
width: auto;
height: 30px;
}
.main-tools a img.icon-space { margin-right: 5px; }
.main-tools a {
color: #000000;
text-transform: uppercase;
text-decoration: none;
margin: 0 0 0 15px;
}
.main-tools a:hover {
color: #f4cdd4;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.search-box-responsive {
display: block;
float: left;
height: auto;
}
HTML:
<div id="bb-tools">
<div class="main-tools"> <a rel="nofollow" href="#"><span class="login">Log In</span></a> <span class="help">Help</span> <a class="basket" rel="nofollow" href="#"><img src="http://www.placehold.it/20x23" width="18" height="20" style="display:inline-block; border:0;" alt="" /> <span class="basket-contents"> <span class="basket-count"><sup> (100) </sup></span></span></a>
<div class="search-box-responsive">
<form class="search-responsive" role="search" method="get" action="#">
<fieldset>
<input id="headerSearch" name="q" type="text" placeholder="Search" />
<input id="headerSearch" value="" type="submit" />
</fieldset>
</form>
</div>
</div>
</div>
See the fiddle, if opened in Firefox, displays as it should:
DEMO
Can someone explain? Thanks for reading
It's happening as none of your anchors are floated so it is pushing the form down to the next line before it can get floated.
If you wrap your anchors in a div and then add float:right to that div, it should fix your problem
Example
Note sure what is causing the issue since i didn't get what you're trying to achieve with the css.
If you just want to fix the issue, you can place the .search-box-responsive before the links in DOM, if possible.
Demo (tested in safari and chrome)
sidenote: float has no effect on absolutely possible elements, as far as i know.
Add .search-box-responsive div right after #bb-tools div as in
http://jsfiddle.net/4tjJt/2/
Related
I have been looking everywhere for help on this issue with Css layout width I have been running into.
Whenever I float a div to the right its width won't automatically adjust to the total width of its children. I have observed this effect on all common browsers (Firefox, Chrome and IE11/Edge). What happens is that the last child will just be displayed bellow all the others which is what I do not want.
Here is the css and html I have been using.
https://jsfiddle.net/xqpf9s95/2/
*
<div id="header-container">
<div id="header-top-container">
<div id="header-logo">
<a href="/GlobalImagens/pages/imagens.xhtml?categoria=ultima-hora">
<img src="../resources/images/logo_globalimagens.jpg" alt="Global Imagens"></a>
</div>
<div class="header-top-right-corner">
<form id="language" name="language" method="post" action="/GlobalImagens/pages/imagens.xhtml" enctype="application/x-www-form-urlencoded">
<input name="language" value="language" type="hidden">
<div id="newsletter" class="newsletter">
Subscrever Newsletter
</div>
<div style="float: right; padding-left: 6%;">
<script type="text/javascript" src="/GlobalImagens/javax.faces.resource/jsf.js.xhtml?ln=javax.faces&stage=Development"></script>
<a href="#" style="text-decoration:none; " onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt31':'language:j_idt31','localeCode':'en'},'');return false">
<img src="../resources/images/flag_uk.jpg" border="0"></a>
</div>
<div style="float: right;">
<a href="#" style="text-decoration:none;" onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt35':'language:j_idt35','localeCode':'pt'},'');return false">
<img src="../resources/images/flag_pt.jpg" border="0"></a>
</div>
<input name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="215900126811062761:3093351618596041247" autocomplete="off" type="hidden">
</form>
</div>
<div id="admin-container">
<div>
<span class="admin-menu1" style="padding-left: 1.5%;">Iniciar Sessão
</span>
<span class="dotted-separator"></span>
<span style="padding-left: 1.5%;">Registo
</span>
<span class="admin-menu3"><a href="/GlobalImagens/pages/entrar.xhtml">
<img src="../resources/images/bt_minhaconta.jpg" title="A Minha conta" alt="A Minha conta"></a>
</span>
<span class="dotted-separator"></span>
<span class="admin-menu4"><a href="/GlobalImagens/pages/entrar.xhtml">
<img src="../resources/images/bt_carrinho.jpg" title="Meu carrinho" alt="Meu carrinho"></a>
</span>
</div>
<div>
<div align="right">
<span style="color: #83266f; padding-right: 5px;">Não pode adquirir imagens</span>(detalhes)
</div>
</div>
</div>
</div>
/*tables header*/
.admin-menu1 {
padding-right: 1.5%;
}
.dotted-separator {
border: none;
border-left: 1px dotted #83256f;
color: #fff;
/* background-color:#dadada;
height:17px;
width:0%;
margin: 0%; */
}
.admin-menu2 {
padding-left: 10px;
background: url(../images/background_dot.jpg) no-repeat right;
}
.admin-menu-logged-in-3 {
padding-left: 1.5%;
}
.admin-menu3 {
/* width: 75px; */
}
.admin-menu4 {
/* width: 28px; */
}
/*******************************HEADER*******************************/
#header-container {
/* height: 180px; */
/* float: left; */
}
#header-top-container {
/* width: 983px; */
/* height: 100px; */
/* float: left; */
}
#header-logo {
padding-top: 1%;
float: left;
}
#header-logo img {
border: none;
border-style: none;
}
.newsletter {
float: left;
padding-top: 1%;
}
.header-top-right-corner {
float: right;
padding-top: 1%;
width: 11%;
}
#admin-container {
padding-top: 1%;
font-size: 10px;
clear: right;
float: right;
box-sizing: border-box;
}
#admin-container a {
text-decoration: none;
color: #493641;
}
#admin-container a:hover {
text-decoration: underline;
}
*
And my issue is with the div "#admin-container".
How do I fix this so as to make that div auto adjust to the correct width and display without breaking its children elements?
Cheers and thank you.
EDIT: I have editted the code as asked by #Dzijeus. As I have commented, the images don't matter for the issue. My issue is with why the width won't auto adjust on the '#admin-container' to fit all its children.
Thanks for updating the code, it was better, but still far from a minimum verifiable example. A minimum example is when you strip as much as you can from the code while still reproducing the problem.
In your case, if you had done the exercise, you would probably have come to something like this:
<div id="admin-container">
<span class="admin-menu1">Iniciar Sessão</span>
<span>Registo</span>
<span>A Minha conta</span>
<span>Meu carrinho</span>
</div>
.admin-menu1 {
padding-right: 1.5%;
}
#admin-container {
clear: right;
float: right;
}
And you would immediately have seen the interest of doing this, AND solved the problem. Because from here, it is easy to notice that the problem is coming from using a relative padding. Switch to for example padding-right: 2px, and the display is now as you expected it.
As a general rule, padding and margin does not apply to inline elements such as span. To apply padding or margin you should use display: block or display: inline-block
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;
}
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
I'm trying to insert a search field in my header (black zone) but doesn't work. I want the search field inline with "SimpleCMS"...
See this screenshot to understand:
I want it on the same line as the header text...
There's my HTML code:
<div id="header"><h1><?php echo($header_text); ?></h1>
<div style="float: right;">
<form action="search.php" method="get">
<input type="text" name="q" id="q" value="Search..." />
<input type="submit" value="Search" />
</form>
</div>
</div>
And my CSS:
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
}
The problem is that you use a <h1> element. This will span over the whole width (see here) of the top so that every other element will be placed below it. Use a <span> instead and style it according to your needs. Using position-absolute as alpaca lips nao suggests might work as well.
Update: Use position: absolute;
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
position: relative;
}
#header div form {
position: absolute;
top: 75px;
right: 25px;
}
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