I do adaptive search form. Search field should take 100% width of the parent div (the width of the parent div will change depending on the resolution of the device). The button "Search" should always be at the right of the field, do not shift down.
A working version.
But there's a problem: The text "Search now" (placeholder) too close to the edge of the field and I can't move it to the right. In other examples, it moves by the set value for the field padding. But if I change the padding — field itself is shifted to the left, but I only need to move the text!
#searchfield {
padding: 10px 0 13px 0; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! */
}
Try adding text-align:center for id searchfield or add box-sizing: border-box; declaration.
try with any one of below examples, it will move the placeholder to right as you expected, these will support Ie lower versions too.
Example1 (using box-sizing:border-box declaration)
#searchfield {
padding: 10px 0 13px 0px;
box-sizing: border-box;
}
Example2 (using text-align:center declaration)
#searchfield {
text-align:center;
}
You can still use padding to move the placeholder text, with the flavor of box-sizing: border-box; declaration.
box-sizing: border-box; make user-agents include padding/border to the width/height of the box.
#searchfield {
width: 100%;
border: 1px solid #ccc;
padding: 10px 0 13px 10px;
box-sizing: border-box;
/* other declarations... */
}
Vendor prefixes omitted due to brevity.
#sidebar {
width: 20%;
background: #ccc;
height: 300px;
padding: 20px;
}
#search {
width: 100%;
height: 50px;
position: relative;}
#searchfield {
width: 100%;
border: 1px solid #ccc;
margin: 0;
padding: 12px 0 13px 10px;
box-sizing: border-box;
position: absolute;
right: 0;
}
#searchsubmit {
width: 60px;
height: 41px;
background: red 0 0;
border: 0;
overflow: hidden;
cursor: pointer;
right: 0;
position: absolute;
}
<html>
<body>
<div id="sidebar">
<div id="search">
<form id="searchform" method="get" action="/index.php" _lpchecked="1">
<input type="text" name="s" id="searchfield" placeholder="Search now">
<input type="submit" id="searchsubmit" value="Search">
</form>
</div>
</div>
</body>
</html>
It's worth mentioning that border-box is supported in IE8+ as well as modern web browsers.
This could do the trick for you. It solved the issue I was having.
Tried on firefox and chrome
.random-class-name{
text-indent: 10px;
}
Text written inside the input is indented as well.
No need to use position absolute. try this code:
<html>
<body>
<div id="sidebar">
<div id="search">
<form id="searchform" method="get" action="/index.php" _lpchecked="1">
<input type="text" name="s" id="searchfield" placeholder="Search now">
<input type="submit" id="searchsubmit" value="Search">
</form>
</div>
</div>
</body>
</html>
#sidebar {
width: 20%;
background: #ccc;
height: 300px;
padding: 20px;
}
#search {
width: 100%;
height: 50px;
position: relative;}
#searchfield {
width: calc(100% - 60px);
border: 1px solid #ccc;
margin: 0;
padding: 10px 0 13px 20px; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right!
position: absolute;*/
right: 0;
float:left;
box-sizing:border-box;
}
#searchsubmit {
width: 60px;
height: 41px;
background: red 0 0;
border: 0;
overflow: hidden;
cursor: pointer;
right: 0;
float:left;
box-sizing:border-box;
}
live demo on code pen
Related
I have the following:
https://codepen.io/anon/pen/KXYLrq
<header>
<input type="text" id="textfield" placeholder="Get it done!" autofocus>
<button id="add"><i class="fa fa-plus" aria-hidden="true"></i></button>
</header>
with css that is too long to list. I'd like to focus on the #media query. Due to larger screen sizes i need to limit the width of the input bar. If i set a max-width, or fixed width the button will move along with the screen size and continually move to the right.
How do i fix the button in one position past a certain screen size ? (In codepen, if you take out the media query it works just fine, presumably because i set the width to 100%)
Add this also in media query
header button{
right: auto;
left: 695px
}
It will help you to align the button with the text box.
I placed a Container over your input and button, assuming you'll have other elements in the header later.
I then set the section as display: inline-block to make it take the width of the content and also made it position: relative for the child absolute elements. So that those elements will take the section as a starting point and not the header.
https://codepen.io/anon/pen/jGRooL
Just wrap input and button in one parent div and set position relative in it and add width in it.
header {
background: #25b99a;
border-radius: 0 0 10px 10px;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
box-sizing: border-box;
height: 80px;
padding: 15px 25px 0 25px;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
header input {
background: rgba(255, 255, 245, 0.2);
border-radius: 5px 25px 25px 5px;
border: 0;
box-sizing: border-box;
color: rgba(255, 255, 255, 1);
float: left;
font-size: 15px;
height: 50px;
padding-right: 65px;
outline: none;
text-indent: 15px;
width: 100%;
}
.search-box {
position: relative;
width:100%;
max-width: 700px;
}
.search-box button {
background-color: white;
border-radius: 25px;
border: 0;
cursor: pointer;
height: 50px;
outline: none;
position: absolute;
right: 0;
width: 50px;
z-index: 2;
}
#media screen and (max-width: 767px) {
.search-box {
max-width: none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div class="search-box">
<input type="text" id="textfield" placeholder="Get it done!" autofocus>
<button id="add"><i class="fa fa-plus" aria-hidden="true"></i></button>
</div>
</header>
Updated Codepen Demo
I wanted to put an image inside a text input box and tried to position the image by nesting the image tag inside the input tag and using relative position for the input and absolute positioning for the image and setting the images 'right' and 'top' value to 0. I thought this would place the image on the right hand side of the text box. Instead it placed the image on the right hand side of the webpage. I'm unsure why this is, I found a solution by changing the 'top' and 'right' values to position it where I wanted but it just seemed like the first way should have worked, could anyone explain why it didn't?
This is the HTML for the text input and image.
<input = "text" id="searchbar">
<img src ="microphone.png" id="voicebutton"/>
</input>
This is the CSS I though would work.
#searchbar{
border: 0.6px solid #dbdbdb;
display:block;
margin-left:auto;
margin-right:auto;
width:600px;
height:37.5px;
position:relative;
}
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:0;
top:0;
}
This is the CSS that worked.
#searchbar{
border: 0.6px solid #dbdbdb;
display:block;
margin-left:auto;
margin-right:auto;
width:600px;
height:37.5px;
position:relative;
}
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:395;
top:207;
}
Three ways to do it:
1- Use the properties background-size and background-position to set your background-image inside the input-box. Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:85%;
height:55px;
border: 2px solid black;
background-color: floralwhite;
background-image: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png");
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: 99% 100%;
}
input[type=text]:focus {
background-color: pink;
outline: none;
}
<input type="text" placeholder="write here" id="searchbar">
2- Use a negative margin to place the image over it (you can set the image to be a link). Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:85%;
height:55px;
border: 2px solid black;
background-color: honeydew;
vertical-align: top;
}
input[type=text]:focus {
background-color: skyblue;
outline: none;
}
img {
margin-top: 3px;
margin-left: -55px;
}
<input type="text" placeholder="write here" id="searchbar"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;">
3- Let both inputbox and image inside a container; set the container position: relative and the image position: absolute (you can set the image to be a link). Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:100%;
height:55px;
border: 2px solid black;
background-color: MintCream;
vertical-align: top;
}
input[type=text]:focus {
background-color: LightGreen;
outline: none;
}
img {
position: absolute;
top: 3px;
right: 5px;
}
#container {
position: relative;
width:85%;
}
<div id="container">
<input type="text" placeholder="write here" id="searchbar">
<image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;">
</div>
First of all, you can't have decimals in your pixels, like height: 37.5px;. This won't work. Also right: 395; does not work, because it doesn't specify what usage: pixels, ems, percentage? The input="text" is incorrect, it should be input type="text" as this can be e.g. email or radio.
That said, to achieve what you want, you can add a wrapper around your input field (like .box-wrapper) and give it a relative positioning with the same size as the input field. This will conclude to the example below.
.box-wrapper {
position: relative;
width: 600px;
height: 38px;
}
#searchbar{
border: 1px solid #dbdbdb;
display: block;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 38px;
position: relative;
}
#voicebutton{
width: 16px;
height: 23px;
position: absolute;
top: 0;
right: 0;
}
<div class="box-wrapper">
<input type="text" id="searchbar">
<img src ="http://dummyimage.com/50x50/ffff00/fff" id="voicebutton"/>
</div>
The input tag has no closing tag in HTML, you should remove the closing tag from your HTML code, additionally you can position the element over the input box changing your CSS to something like this (your CSS was almost right, the problem is the HTML) :
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:16px;
top:16px;
}
In HTML, the input tag has no end tag (as opposed to XHTML), so your a tag is outside of your input tag.
I am looking to show an error message below a text input like so
The message should not extend any wider than the width of the input, so I was thinking could I inherit the width of the input on say a span that sits below it?
Something like:
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" >
<p style="width:inherit;">Some Error Here</p>
</div>
My current attempt - http://jsfiddle.net/4eu2qkra/
I know this sample above will not work, and usage of inherit is wrong here since it will be looking to use the width of the parent div.
Is there a pure css way to inherit from a sibling element immediately before a target element? Maybe I'm going about this all the wrong way?!
Use your wrapper DIV to control the width of the input and the error message. Make sure that the input has width: 100%; so that it will fill the wrapper DIV.
<div class="control-wrap">
<input type="text">
<p>Error Message. Error Message</p>
</div>
* {
box-sizing: border-box;
}
.control-wrap {
width: 50%;
padding: 5px;
background-color: red;
border: 1px solid #666;
}
input {
width: 100%;
border: 1px solid #666;
}
p {
margin: 5px 0;
}
jsFiddle: http://jsfiddle.net/2krc8tyL/
You can wrap the input and error message in a div with display: table set on it, which will match the width of the largest child. This way it will adjust to the input's width.
.my-form-control-group {
display: table;
padding: 4px;
}
.my-form-control {
width: 250px;
border-width: 1px;
}
.my-form-control-group.has-error {
color:white;
border-color:red;
background-color: red;
padding: 1px 1px 4px 1px;
}
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" >
<div>Some Error Here</div>
</div>
The most obvious option is to use absolute positioning.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.my-form-control-group {
display: inline-block;
position: relative;
background: red;
padding: 4px;
}
.my-form-control {
border-width: 1px;
display: block;
}
.error {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: red;
color: white;
padding: 4px;
}
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" />
<p class="error">Some Error Here Lorem ipsum dolor.</p>
</div>
I want to make my textarea like as facebook. Where in same line display a textarea, a upload icon and a emoticons icon.
Now, I want my textarea will be responsible width And 2 icon will be fixed 25px width.
Here is in my example fiddle textarea overflow my 2 icon But I want they will not be overflow.
How can it possible without CSS media query and div contenteditable?
Your markup and style could be simplified
Fork: http://jsfiddle.net/s0e5ks6n/3/
CSS
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.maintbox {
position:relative;
width: 100%;
}
#frm textarea{
min-height: 25px;
border: 2px solid #ccc;
width:100%;
resize: none;
margin: 0;
padding-right:60px;
}
#right {
position:absolute;
top: 0px;
right:0px;
height: 35px;
line-height: 35px;
width: 60px;
z-index:1;
}
#right img {
cursor:pointer;
vertical-align: middle;
}
Markup
<form action="" id="frm">
<textarea placeholder="Type here..."> </textarea>
<div id="right">
<img src="https://cdn3....png" alt="" />
<img src="http://s...png" />
</div>
</form>
Final result
I am trying to have it so users can log in into my website using fb etc. For some reason, the text gets hidden behind the buttons in my existing code. I am not sure what's wrong since the text used to show up where it needed to be up until I changed the background of the buttons and added social icons to them. Could you please help?
Here is the relevant code:
HTML:
<a class="alt-sign-in facebook">Login with facebook</a>
<a class="alt-sign-in google">Login with google</a>
<a class="alt-sign-in twitter">Login with twitter</a>
<form>
<input type="text" name="name" placeholder="name">
<input type="text" name="email" placeholder="email">
<input type="submit" name="submit">
</form>
<button id="computer-button">Start</button>
</div>
CSS:
#import url('http://weloveiconfonts.com/api/?family=entypo');
#import url('http://weloveiconfonts.com/api/?family=zocial');
html, body {
height: 100%;
background: #ddd;
}
.alt-sign-in {
position: relative;
display:block;
height: 40px;
width: 300px;
margin: 10px 0px auto auto;
padding: 5px;
font: 700 16px/40px'Quattrocento Sans', sans-serif;
text-decoration: none;
text-transform: uppercase;
text-align:center;
line-height: 40px;
color: #555;
border-radius: 2px;
background: linear-gradient(to bottom, white 40%, lightgrey);
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
cursor: pointer;
box-sizing: border-box;
}
.alt-sign-in:before {
color:white;
position:relative;
top: -5px;
left: -5px;
display:block;
box-sizing: border-box;
height: 40px;
width: 45px;
font: 20px/40px entypo;
text-align: center;
color: #fff;
border-radius: 2px 0 0 2px;
}
http://jsfiddle.net/prettysweet/Dv9rC/24/
Thank you so much!
The code you have posted seems to be an incomplete, or older version.
But by judging from your jsfiddle link, I suggest to change the following;
.alt-sign-in {
/* removed: box-sizing: border-box; */
}
.alt-sign-in:before {
position:absolute;
top: 5px;
left: 5px;
}
see http://jsfiddle.net/Dv9rC/27/
I think you have floating element problem. If you add these lines to your css code, it'll be OK.
.alt-sign-in.facebook:before {
...
float: left;
}
.alt-sign-in.google:before {
...
float: left;
}
.alt-sign-in.twitter:before {
...
float: left;
}
Bonus Edit: After adding all of these codes, just add form tag to your CSS document for top margin.
form{
margin-top:15px;
}