This may seem like a simple question and may have a simple solution but I was wondering how I can get two text elements (from a button) start at the space spot on the x-axis (they are two different divs). I am referring to the button's text in the image below.
How can I get both the text "Dashboard" and "A new button" to start at the same position on the x axis?
* {
margin: 0;
padding: 0;
}
body {
background-color: #ced4da;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
}
input[type="button"] {
border: none;
background-color: Transparent;
outline: none;
height: 20px;
width: 92%;
font-size: 13px;
font-weight: regular;
color: white;
}
.side-bar {
display: flex;
flex-direction: column;
width: 17%;
height: 100%;
background-color: #272C32;
}
.sub-title {
margin-top: 10%;
margin-left: 7.5%;
}
.sub-title h3 {
color: #B9B9B9;
font-size: 13px;
font-weight: lighter;
}
.splitter {
display: flex;
align-self: center;
width: 85%;
height: 0.5px;
background-color: grey;
margin-top: 12px;
margin-bottom: 4%;
}
.button {
position: relative;
margin-left: 7.5%;
margin-bottom: 3%;
}
.button form i {
color: white;
font-size: 14px;
transition: 0.3s;
position: absolute;
left: 0px;
top: 0px;
padding: 5px 0px;
}
.button input:hover+i {
color: dodgerblue;
}
<div class="wrapper">
<div class="side-bar">
<div class="sub-title">
<h3>ADMIN TOOLS<h3>
</div>
<div class="splitter"></div>
<div class="button">
<form>
<input type="button" value="Dashboard" onclick="window.location.href='http://www.google.com'"/>
<i class="fas fa-tachometer-alt fa-lg" aria-hidden="true"></i>
</form>
</div>
<div class="button">
<form>
<input type="button" value="A new button" onclick="window.location.href='http://www.google.com'"/>
<i class="fas fa-hand-paper fa-lg" aria-hidden="true"></i>
</form>
</div>
</div>
<div class="nav-bar"></div>
</div>
And if you have time, how does my CSS code look? I am still learning and would like some feedback too if you don't mind :) Thanks!
All you have to do is put a <div> element around your <form> element s, then set its position to wherever you want it, and its text-align: left;. BTW your CSS looks excellent, just keep in mind that some things can be simplified, e.g.
{margin: 0; padding: 0;}
This is very good, but * is the same as body, even though it's documented differently. * applies to all the content, but content is only displayed if it's in the <body> element.
Very good looking however, keep it up!
P.S. I'd vote you up if I could, but I'm out of votes - I'll do it tomorrow
Related
I'm experimenting on vertical buttons using CSS display grid & inline-grid and have them working. It's when I try to add regular buttons that things go wrong.
The image displays the issue.
]1
The grid's influence extends out past the visible items it contains and hence the "control" buttons are ending up below the vertical buttons instead of up top next to the first vertical button. I've tried surrounding the grid divs with other divs to try to contain their influence, but no luck.
How do I get the "control" buttons currently at the bottom back up toward the top?
<div id="control">
<div id="title">
Buttons In Grid
</div>
<div class="sideButtonsOuterContainer">
<div class="sideButtonsInnerContainer">
<button id="buttonR0" class="sideButtons">A</button>
<button id="buttonR1" class="sideButtons">B</button>
<button id="buttonR2" class="sideButtons">C</button>
</div>
<div class="sideButtonsInnerContainer">
<button id="buttonR3" class="sideButtons">D</button>
<button id="buttonR4" class="sideButtons">E</button>
<button id="buttonR5" class="sideButtons">F</button>
</div>
<div class="sideButtonsInnerContainer">
<button id="buttonR6" class="sideButtons">G</button>
<button id="buttonR7" class="sideButtons">H</button>
<button id="buttonR8" class="sideButtons">I</button>
</div>
</div>
<div id="sideControls">
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
</div>
</div>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
#control{
width: 20%;
}
#title{
text-align: center;
font-size: 43px;
color: rgb(255, 0, 0);
}
.sideButtonsOuterContainer{
display: grid;
width: 52px;
grid-template-rows: auto auto auto;
gap: 10px;
background-color: #000000;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.sideButtonsInnerContainer {
display: inline-grid;
width: 45px;
grid-template-rows: auto auto auto;
gap: 4px;
padding: 3px;
}
.sideButtons{
background-color: #4CAF50; /* Green */
color: white;
width: 45px;
height: 127px;
text-align: center;
font-size: 38px;
}
.topButtons{
background-color: #4CAF50; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 38px;
}
The spent text with the teal background is meant to be a tag, and I want the tag to appear above the todo bar...kind of like this:
Like a small rectangle on top of a big one. So the tag would be on the top left corner of the todo bar. How would I achieve this? I've tried doing margin to the tag, but that did not work out at all.
CSS for the tag (style.css)
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
React JS code for the tag part (Todo.js)
<li className={`todo-item${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Received</p>} ${text}
</li>
In case anyone needs the whole of the todo.css file: https://pastecode.io/s/s5XZ9e3DRW
If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!
I think if yow will separate the tag and the navbar to two different div tags and put them on main div something like:
<div id="wrapper">
<div id="top-left">top left div</div>
<div id="down">down side div</div>
</div>
and the css will be something like (using grid on the main div):
#wrapper {
display: grid;
}
#top-left {
background: green;
width: 250px;
float:left;
margin-right: 20px;
}
#down {
background: blue;
float:left;
width: 500px;
}
the result is:
I would go with something like this, where input:focus could be a class set on on .container, for example, if the input has any values.
I couldn't understand why you used li and p in your original code, because you need to override so much stuff to make it look nice.
Using "rem" over a fixed pixel value is also preferred if you want to create a responsive site, where you just override the font-size in the body to make everything scale.
.container {
position: relative;
display: flex;
}
body,
input {
padding: 1rem;
}
.container.selected > .todo-item,
input:focus ~ .todo-item {
transform: translateY(-1rem);
}
.todo-item {
position: absolute;
left: 1rem;
transform: translateY(1rem);
transition: transform 400ms;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
<div class="container">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
<div style="padding-top: 1rem"><-- select this input</div>
</div>
<div class="selected container" style="padding-top: 2rem">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
</div>
body {
background-color: #48AEE0;
}
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
width: 80px;
text-align: center;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.other {
margin: 0;
display: inline-flex;
flex-direction: column;
}
input {
height: 30px;
width: 200px;
border: white;
margin: 0;
}
<div class="container">
<div class="tag">spent</div>
<div class="others">
<input type="text">
</div>
</div>
I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display.
Here's the code
fiddle
.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px;
}
You need to clear the float. Add clear:both; to the .footer.
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if (img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
* {
margin: 0;
}
html,
body {
height: 100%;
}
.footer,
{
height: 140px;
display: block;
}
p {
font-family: HindRegular;
font-size: 13px;
font-weight: normal;
display: block;
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
.article {
float: left;
font-family: HindRegular;
width: 21%;
padding-right: 4%;
color: #999;
}
.article-right {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 4%;
color: #999;
}
.article-centre {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 2%;
padding-right: 2%;
color: #999;
}
.blurb {
font-family: HindMedium;
font-size: 24px;
padding-bottom: 100px;
color: #999;
}
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width: 100%;
min-height: 100%;
/* equal to footer height */
margin-bottom: -140px;
}
.heading {
font-family: HindMedium;
font-size: 24px;
color: #666;
margin-top: 1em;
}
.copyright {
float: left;
}
.contact {
float: right;
font-family: HindRegular;
color: #999;
}
#container {
width: 100%;
}
#container img {
width: 100%;
}
h8 {
font-family: HindRegular;
color: #999;
padding-right: 5px;
font-style: normal;
}
.footer {
clear: both;
background-color: #FFF;
height: 120px;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
}
a {
border-bottom: 1px solid #219edf;
padding: 0;
margin: 0 0 2px 0;
clear: both;
color: #666;
text-decoration: none;
font-weight: normal;
outline: none;
transition: all .15s ease;
}
.services {
width: 100%;
}
a:hover {
text-decoration: none;
color: #999;
border-bottom: 1px solid #999;
}
#details {
color: #666
}
#header {
color: #999;
}
<div class="about">
<div class="blurb">Stunning Imagery and resourceful imaging
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
</div>
<div class="heading">Architectural Photography
</div>
<p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</p>
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
</div>
<div class="heading"> Aerial Services
</div>
<p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
<p>Registered CAA pilot with commercial flight permissons</p>
<p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
<p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
<p>Agronomy - Crop analysis, multispectral imaging</p>
<p> </p>
</div>
<div class="article-centre">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
</div>
<div class="heading">Verified Views
</div>
<p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
<p>We don't outsource the photography or site survey whole process is in house</p>
<p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
</div>
<div class="article-right">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
</div>
<div class="heading">Rhizome
</div>
<P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
<P>Comming Soon</P>
</div>
<br style="clear: left;" />
</div>
<footer class="footer">
<div class="article"><span id="header">Contact Details</span>
</div>
<div class="article">
<span id="header">Address</span>
<br /><span id="details">Nathaniel McMahon Photography<br />
Maynards Farmhouse<br />
A21, Lamberhurst QTR<br />
Kent<br />
TN3 8AL</span>
</div>
<div class="article-centre">
<span id="header">Mobile</span> <span>+44 (0)7377673765
</span><br/>
<span id="header">Email </span>
nathaniel.mcmahon#gmail.com
</div>
<div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
</div>
</footer>
Remove these from your .about class. You should practice some with margin. It doesn't work the way you're trying to use it.
min-height: 100%;
margin-bottom: -140px;
Add clear:both; to your footer declaration.
Also change your body style from height to min-height, so that your body can be larger than the browser.
You can use overflow: hidden on .about and .footer so the floats will stay contained within those containers. You don't need the negative margin on the .about. If you are trying to make the footer stay at the bottom of the page even when the content is very little, you could try positioning the footer absolutely. Here's an example below. You'll need to wrap everything in .wrapper or whatever name you want to use.
.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }
With less content, footer is at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/1/
With more content, footer is still at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/3/
If you want elements to stick out of the .article and .footer containers, or just another option, here's an alternative solution to clearing floats:
You could remove floats on your article and footer containers, but use display: inline-block; with vertical-align: top; instead. You'll need * { box-sizing: border-box; } or change your padding into margin.
https://jsfiddle.net/suefeng/u4coohpp/4/
Also added this to the footer so the email address wouldn't run into the next column:
.footer a[href*="mailto"] {
word-break: break-all;
}
Here's an example of having a fixed footer:
https://jsfiddle.net/suefeng/gv7Lg3e0/1/
.footer {
position: fixed;
bottom: 0;
}
If you are simply trying to pin an element to stay at the bottom of the page and have content scroll under it. You should use position:fixed.
If you update your footer content like so:
.footer {
background-color: #FFF;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
overflow: hidden;
position: fixed;
left:0;
right:0;
bottom:0;
clear:both;
}
The footer will pin to the bottom. You will also need a spacer after your footer to ensure your scroll bar is sufficient to scroll all content into view.
HTML:
<div class='footer-spacer'></div>
CSS:
.footer-spacer {
height: 160px;
}
Remove these from your .about class. Negative margins will cause odd behavior when it moves an element off page.
min-height: 100%;
margin-bottom: -140px;
I would like to use a custom image in an input-group instead of a Bootstrap glyphicon without padding bottom (my image touch the bottom of the button), as you can see on this picture:
Actually, I use Bootstrap's glyphicon glyphicon-search:
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher un produit, une référence ..."/>
<span class="input-group-addon">
<span aria-hidden="true" class="glyphicon glyphicon-search"></span>
<span class="hidden-xs text-upper-style">
Rechercher</span>
</span>
</div>
My issue is that I fail to replace glyphicon by my picture in my search bar.
I've tried to create CSS to mimic those of Bootstrap, but it always render bad:
CSS
.glyphi {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: normal;
line-height: 1;
float: left;
display: block;
}
.glyphi.search {
background: url(../img/header/search.png);
background-size: cover;
}
.glyphi.normal {
width: 28px; //But Bootstrap glyphicon is 16x16...
height: 16px;
}
HTML
<span class="glyphicon glyphicon-search"></span>
Note that my image is not square (60x37 px).
Here is the picture that should replace the glyphicon:
What is the best Bootstrap way to do that?
Here is a Bootply of my code.
Thanks! :)
You can use simple img inside .input-group-addon instead of span.glyphicon and with some negative margins you can get the result you want.
HTML
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">
<span class="input-group-addon">
<img src="http://i.stack.imgur.com/vr0uy.png">
<span class="hidden-xs text-upper-style">Rechercher</span>
</span>
</div>
CSS
.rechercheProduit .input-group-addon img{
height: 24px;
margin-right: -16px;
margin-bottom: -6px;
vertical-align:text-bottom; /* align the text */
}
Updated Bootply
You should have a look on how the glyphicon span works:
If you inspect it, you will see that the interesting part in this span is actually its pseudo-element, the :before that calls a font of icons as a content.
A few solutions are actually possible to resolve your problem.
Override
One of the solution would be to override that pseudo element by
redeclaring its content:
.rechercheProduit .input-group-addon {
/* Declaring the parent as relative so the .glyphicon-search child span
as a position absolute to its parent..
That probably doesn't make any sense. */
position: relative;
}
.rechercheProduit .glyphicon-search {
/* 'absolute' in the .input-group-addon context */
position: absolute;
top: auto;
bottom: 0;
left: 5px;
height: 80%;
width: auto;
overflow: hidden;
}
.rechercheProduit .glyphicon-search:before {
content: '';
display: block;
width: 50px; /* Generic width */
height: 100%;
background: url('http://i.stack.imgur.com/vr0uy.png') no-repeat;
background-size: auto 100%;
}
.rechercheProduit .text-upper-style {
/* relative to its context. Especially here to deal with the display order. */
position: relative;
margin-left: 20px;
}
Demo 1
Custom span
Another solution, which would probably be better, would be to
actually create your own span with your own pseudo-element (CSS is
similar to the last example, renaming the .glyphicon-search part
obviously):
<span class="input-group-addon">
<span class="search-icon"></span>
<span class="hidden-xs text-upper-style">
Rechercher</span>
</span>
Demo 2
Image
Even if I personally prefer having the icon as a background image
here (have a look on this question and its answers), declaring
the icon as an image is another solution that works.
c.f. the answer of tmg about that.
About the rest
To go beyond with your code, you should think about the fact that you are working in a form with an input[type="text"] as main input.
You’ll have to submit this form and unless you deal with a click event on this main span to submit your form, you’ll have to declare your rechercher span as an input as well (type=“submit”).
That would be semantically more correct and easier for you to deal with this button action in the future.
My final proposition would then be:
(also considering the "custom" span icon solution)
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">
<label class="input-group-addon">
<span class="search-icon"></span>
<input type="submit" value="Rechercher" class="hidden-xs text-upper-style" />
</label>
</div>
-
.text-upper-style {
background: none;
text-transform: uppercase;
border: 0;
outline: 0;
}
.rechercheProduit .input-group-addon {
border: 0;
}
Demo 3
About the responsive, just declare a min-width on your label:
.rechercheProduit .input-group-addon {
min-width: 40px;
overflow: hidden;
}
Hope this makes sense. I'm open to any kind of suggestion, edit, etc...
Bon chance!
It's as easy as replace span glyphicon tag for your custom image tag forcing correct height and deleting top and bottom padding from text 'rechercher'.
So, add this to your html:
<span class="input-group-addon">
<img height="25" src="http://i.stack.imgur.com/vr0uy.png" alt="custom-magnifier">
<span class="hidden-xs text-upper-style">
Rechercher</span>
</span>
So, add this to your css:
.rechercheProduit .input-group-addon {
padding: 0 12px;
}
.rechercheProduit .input-group-addon {
vertical-align: bottom;
}
Here you have an example:
http://www.bootply.com/CAPEgZTt3J
You have to hide the default glyphicon then use custom image.
Try these lines:
.glyphicon-search::before {
content:none!important;
}
.glyphicon-search {
background-image:url(../ur-image);
height:20px;
width:20px;
background-repeat:no-repeat;
background-size:cover;
}
Here is the css that will replace the search icon
.glyphi {
background: rgba(0, 0, 0, 0) url("http://i.stack.imgur.com/vr0uy.png") no-repeat scroll 0 0 / contain;
display: inline-block;
font-style: normal;
font-weight: 400;
height: 16px;
line-height: 1;
position: relative;
top: 1px;
width: 60px;
}
You also need to resize the search icon because the parent element has padding.
This is my attemp, i hope this one can help you. i use absolute. Just try to view in full page, i working the responsive design.
* {
border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
border: 0px;
color: #ffffff;
background: #004392;
cursor: pointer;
}
.rechercheProduit:hover {
color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
-moz-border-radius: 0;
-webkit-border-w: 0;
border-radius: 0;
color: #ffffff;
background: #004392;
cursor: pointer;
}
.rechercheProduit .input-group-addon:hover {
color: #fbba00;
}
.text-upper-style {
text-transform: uppercase;
padding-left: 20px;
}
.glyphicon-search:before {
background: url(http://i.stack.imgur.com/vr0uy.png)center center;
background-size: contain;
background-repeat: no-repeat;
height: 25px;
width: 42px;
content: '';
z-index: 99;
position: absolute;
top: -15px;
left: -8px;
}
.glyphicon-search:before{
content: '' !important;
}
#media screen and (max-width: 767px){
.cus-icon{
padding: 0 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-8 col-md-6">
<form class="form-horizontal rechercheProduit">
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">
<span class="input-group-addon">
<span aria-hidden="true" class="glyphicon glyphicon-search cus-icon"></span>
<span class="hidden-xs text-upper-style">
Rechercher</span>
</span>
</div>
</form>
</div>
One way would be to use a background-image on the input-group-addon + some padding-left and remove the glyphicon entirely:
* {
border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
border: 0px;
color: #ffffff;
background: #004392;
cursor: pointer;
}
.rechercheProduit:hover {
color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
-moz-border-radius: 0;
-webkit-border-w: 0;
border-radius: 0;
color: #ffffff;
background: #004392;
cursor: pointer;
background-image: url("http://i.stack.imgur.com/vr0uy.png");
background-position: 6px 3px;
background-repeat: no-repeat;
background-size: contain;
padding-left: 38px;
}
.rechercheProduit .input-group-addon:hover {
color: #fbba00;
}
.text-upper-style {
text-transform: uppercase;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-8 col-md-6">
<form class="form-horizontal rechercheProduit">
<div class="input-group">
<input class="form-control" placeholder="Rechercher un produit, une référence ..." type="text">
<span class="input-group-addon">
<span class="text-upper-style">
Rechercher</span>
</span>
</div>
</form>
</div>
You need of course to change the background-position, background-size, padding-left so it fits your image.
Adjust the background-size to define the size of the image, change the background-position to position the image inside the span and change the padding-left value to move the text further to the right.
You can override .glyphicon and set your image as a background for it and remove its icon
.rechercheProduit .input-group-addon span.glyphicon{
background: url(http://i.stack.imgur.com/vr0uy.png);
background-size: 100% 100%;
height: 24px;
width: 38px;
vertical-align: text-bottom;
margin: -6px -13px 0 0;
top: auto;
bottom: -6px;
z-index: 0;
}
.rechercheProduit .input-group-addon span.glyphicon:before{
content:''; // To remove its default icon
}
https://jsfiddle.net/ms5e0535/
I am trying to make a custom placeholder for my "Search" input. It should look like a search icon (using Bootstrap glyphicon glyphicon-search classes for that) and then the word "Search", inside the input element, just as a placeholder looks like, and centered.
I am trying to position the div containing these to elements inside the input but I can't get it right.
Here's the code in jsfiddle.
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 340px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
display: inline;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 10px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .placeholder {
display: inline;
position: relative;
top: 30%;
width: 40px;
margin: 0 auto;
text-align: center;
font-size: 10px;
}
Then when focusing on the input the placeholder should be gone, I guess this shouldn't be difficult with some js.
But back to the issue, what am I doing wrong? How can I display the placeholder as intented?
Why not simplify this enormously? You already have the placeholder built into HTML! Here's what you can do:
input[type="search"]::-webkit-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
input[type="search"]::-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-ms-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
<input type='search' placeholder='search here' />
Now don't be worried, the icon isn't displaying here because I haven't included font-awesome (or whatever the Glyphicons Halflings font is provided by), but this makes it tremendously simply to create a nice placeholder. It even works like one! It also reduces your code greatly, although browser support is a little less stellar (it really depends how far back you want to go).
Font Awesome uses the unicode glyphs and a font with all those icons included, so as long as you use the right font and copy in the correct character into your content property, this will work.
this was tested in Safari and Chrome
My solution:
https://jsfiddle.net/83x8tfwp/6/
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 280px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
position: relative;
color: #aaa;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 3px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .search-input:focus + .placeholder {
display: none;
}
.search-wrapper .placeholder {
position: absolute;
top: 8px;
left: 38%;
margin: 0 auto;
text-align: center;
font-size: 13px;
}
JavaScript:
$('.placeholder').on('click', function() {
$('.search-input').focus();
});
if ($('.search-input').val()) {
$('.placeholder').hide();
}
$('.search-input').on('blur', function() {
if (!$('.search-input').val()) {
$('.placeholder').show();
}
});
$('.search-input').on('focus', function() {
if (!$('.search-input').val()) {
$('.placeholder').hide();
}
});
$('.search-input').on('input', function() {
if ($('.search-input').val()) {
$('.placeholder').hide();
}
});