I have an input field where I add a fixed height. However, when I focus on said height, the height turns back to the original one...What I mean by that is that when I focus it, the 'area' where I write is in the center of the input field, while I want it at the bottom of the input field.
The reason why I want that is because I want a label inside the input field, so I increase the height of the input field, and stack the label behind the input field and have a transparent background on the input field. Here's the code and the demo on jsfiddle:
input {
position: absolute;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
width: 100%;
height: 7vh;
z-index: 10;
color: black;
background-color: transparent;
}
.test-label {
position: absolute;
left: 2%;
margin: 0;
top: 5%;
color: #778692;
}
.form-field {
height: 7vh;
position: relative;
padding: 0;
}
<div class="form-field">
<p class="test-label">Input</p>
<input type="text" />
</div>
How would I go to solve this?
I would probably add some padding to the top and include the
box-sizing: border-box;
So that your padding doesn't effect the size of the box.
The issue you will have, is your text's height is not dependant on the height of the view, whereas your input field is. So you will find inconsistent results on different height screens.
Here's an example JS fiddle:
http://jsfiddle.net/6uLnreu5/3/
Hope this helps
Use padding-top instead of fixed height. input {padding-top: 20px;}
you should define a font-size on your .test-label, and the set padding-top on the input equal to the font-size+x px where 0<=x<=somevalue as per your need of gapping between the label and text write area. Check out the fiddle - http://jsfiddle.net/6uLnreu5/7/
Additionally, you have to set box-sizing: border-box on the input so that its height does not increase beyond 10vh
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 1 year ago.
Now im having an input text element which be warpped by a div container (form-group)
And i set the width to the input text element become 100% (width: 100%). And i expect that the input text it will cover the entire width of the form-group div element. And the result is kinda weird to me. The input text, it likes it flow out of the form-group element, like the this picture here:
In this picture, im currently hover the form-group element, and you can see the orange part, is the margin of the it, but you can see, the input text element, the part i highlighed is like overlaying the margin of the form-group element, which proved that the input text element is flow out of the container element of it, which is the form-group element. And that's weird, at least to me, because I set the width to 100%, and so i think it should be cover the container element of it. Please help me to understand this.
I know i can use the overflow property to fix but, i want to know why this is happening, so hopefully, someone can help me with this, thank you so much.
.form-container {
background-color: black;
padding: 20px;
}
.form-group {
width: 50%;
font-size: 1.5rem;
background-color: red;
margin: 3rem auto;
display: block;
}
input {
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
}
<form action="#" class="form-container">
<div class="form-group">
<input type="text" placeholder="Enter text...">
</div>
</form>
This happens because by default the box-sizing property is content-box.
When you add padding to the input element, the input element size remains equal to the size of form-group div.
But, this increases the overall width of the input element and extends it outside as the padding adds up to the total width. It looks like the actual width of the input element has increased but actually just the padding is adding.
You can change this if you wish to, by changing the box-sizing to border-box. This way the padding gets added to the input element by compromising the actual size of the input element.
input {
box-sizing: border-box;
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
}
Also, after adding border-box, you can try adding some height to the form-group div to visualize their comparative heights.
Use this developer tool on your browser to help you see the width, padding and margins.
You are coming up against box-sizing.
The input has quite a noticeable padding added to it (3rem horizontally in all). While the basic element takes up the width of its parent on the width: 100% setting, the box-sizing is set to content by default in CSS. This means any padding (and borders) is outside the basic size.
Changing the box-sizing to border-box for the input means that the padding is included within the overall size so you get the width you expect - in total 100% of the parent:
input {
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
box-sizing: border-box; /* ADD THIS */
}
In html every elements have default padding and margin property..we overlapped this values.
use following code..to avoid these kind of issues.
* {
padding: 0px;
margin:0px;
box-sizing:border-box;
}
How Do I make the text start from the top instead starting right in middle?
<input class="card card-experience">
.card-experience{
width: 600px;
height: 100px;
position: absolute;
padding-bottom: 22px;
top: 400px;
border-color: black;
box-sizing: border-box;
}
input type="text" is used for single lines of text.
You can instead use "textarea", going by the size of your input element it seems that you want to take a large input or allow lot of lines of input. "textarea" will allow you to do that, and at the same time the text starts from the left top.
Refer: https://www.w3schools.com/tags/tag_textarea.asp
In case you use "textarea" and do not want the scroll bar then refer this :
Remove scrollbars from textarea
Following may satisfy your requirement. Remove padding-bottom and change input tag to textarea
.card-experience {
width: 600px;
height: 100px;
position: absolute;
top: 400px;
border-color: black;
box-sizing: border-box;
}
<textarea class="card card-experience"></textarea>
note: when you want to input data in multiple lines, input tag should be changed as textarea tag.
I am trying to create circular buttons in CSS. I use border-radius: 100% to make the button look like a circle but it only works if I explicitly set the width and height of the element. But if I do so, the buttons will not adjust to fix larger text
This is what I've tried so far:
.round-button{
width: 60px;
height: 60px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
}
.round-button:active{
background-color: #2980b9;
}
<div>
<button class="round-button">Button</button>
</div>
<div>
<button class="round-button">This text will overflow the button!</button>
</div>
As you can see the first button looks pretty OK, but the text in the second button overflows it. I've used overflow: hidden to prevent it from looking ugly but I would like the buttons size to adjust according to the content's size. Is that possible?
In order to draw a circle, you need a square to start with .
You can insert a pseudo of an height equal to width using vertical padding with percentage value.
https://www.w3.org/TR/CSS2/box.html#padding-properties
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.
Make this pseudo inline-block to help yoy center text.
If text has to wrap a few lines, it needs to be wraped within an inline-block .. if you use an inline-block pseudo.
You can set max and min width too.
example:
.round-button{
min-width: 60px;
max-width:120px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding:0;
}
.round-button:before {
content:'';
display:inline-block;;
vertical-align:middle;
padding-top:100%;
}
span {
display:inline-block;
vertical-align:middle;
max-width:90%;
}
.round-button:active{
background-color: #2980b9;
}
<div>
<button class="round-button"><span>Button</span></button>
</div>
<div>
<button class="round-button"><span>This text should NOT overflow the button!</span></button>
</div>
You are looking for an automatic way of making the width and height equal while it increases its size. If so, I don't think there's a way you can do that in CSS. I mean you don't expect width=height do you?
I'm not sure but JQuery might be the solution because it has operators and can interact with CSS.
Edit After reading the previous answer, I now understand that there's a way to do it in padding. But in my answer I said "I don't think". I loved the solution of #GCyrillus BTW.
I have the following textbox:
<input type="text" id="fromAdd" class="styledTB searchBDir" />
CSS:
.styledTB {
padding-left: 5px;
background: #E8E8E8;
opacity: 1;
border: none;
outline: none;
right: 35px;
box-shadow:
0px 5px #BBB,
0px 8px 10px rgba(148, 148, 148, 0.5);
}
.searchBDir {
height: 30px;
width: 90%;
}
Displays this:
How can I add the following icon toward the right of the box and make it clickable for Geo Location:
To make something like this (I would like to resize the image to fit the textbox and not overlap as shown):
I am using the following script which will populate the textbox once the icon is clicked and the user gives permission:
$.get("http://ipinfo.io", function (response) {
$("{textboxid}").text("Location: " + response.city + ", " + response.region);
}, "jsonp");
Here's what we're doing
Some slight changes to HTML
<div class='styledTB'>
<input type="textbox" id="gpsInput" />
<button id="searchBDir"></button>
</div>
What we're doing here is giving some layout context for your input and button. The container is going to serve as our bounding box for laying out the remainder of our elements. You could accomplish this visually with only the input, but since you've got a clickable element it makes sense to make the clickable area a button (for accessibility, semantics, blah, blah, blah...).
On to the CSS:
.styledTB {
position: relative;
display: inline-block;
height: 40px; /* Arbitrary number */
width: 400px; /* Arbitrary number */
}
.styledTB input {
width: 100%; /* Arbitrary number */
height: 100%;
padding-right: 40px;
box-sizing: border-box;
}
#searchBDir {
height: 100%;
width: 40px; /* Or however long you'd like your button to be, matches padding-right above */
background-image: url(http://i.stack.imgur.com/4v62r.png);
background-repeat: no-repeat;
background-position: 50% 50%;
border: none;
background-color: transparent;
position: absolute;
right: 0;
top: 0;
}
Read the comments as they are helpful, but as a high-level overview:
We're putting the bounding box (the div) into a relative position so that we can order the button absolutely. We define the size we want our input element to appear (I chose some number arbitrarily, it should work similarly no matter what size you set them to) and set display inline-block to mirror that of a normal input element.
We then force the box to fill its container with the width and height being declared as 100% and give the box a padding-right of 40px to match our intended size for the button. We set the box-sizing to border-box so that the padding doesn't force the input larger than its containing box. This just tells the browser to consider padding, borders and all internal spacing elements to not grow the outer bounds of the element.
Lastly, we set the button to position: absolute and give it the positioning values to force it to the right of the box. We give it a background image of your GPS icon, and then position that appropriately within the button.
The border and background-color rules are there to override the default browser rendering of a button as a raised gray box.
I hope that helps!
Fiddle here
set the image as a background aligned to the right, and set the padding-right.
TLDR: this codepen works fine in Chrome, but the alignment is off in Firefox.
I'm building a jQuery plugin which modifies a text input to give it a dropdown button on the left. In order to get the positioning right, I add a wrapper div, which is the same height as the input, so the button can be absolutely positioned on top of the input, and yet still have the same height:
#wrapper {
position: relative;
}
#overlay {
position: absolute;
top: 0;
bottom: 0;
width: 30px;
}
This works fine until the input has vertical margin: then the container grows to include the margin, and so the dropdown button grows with it. My solution to this was margin collapsing: I gave the input display:block which meant that the container ignored it's margin. All good.
input {
margin: 20px 0 40px; /* testing */
display: block;
}
But now the problem is that by default, inputs are inline elements e.g. you might want to have a submit button next to the input. So I wrapped the whole thing in a container div with display:inline-block, so another inline element like a button can happily sit next to it.
#container {
display: inline-block;
}
This works fine in Chrome, but has weird alignment issues in Firefox when there's any vertical margin on the input. Below I've added the final markup. There's also a codepen link at the top.
<div id="container">
<div id="wrapper">
<input>
<div id="overlay"></div>
</div>
</div>
<button>Submit</button>
Edit: the point is that this is a plugin and I'm trying to work with the user's existing markup and CSS e.g. they have this markup:
<input><button>Submit</button>
and their existing CSS has vertical margin on the input, and I want them to be able to just initialise my plugin on the input and it just work, without forcing them to change their markup/CSS. Now because the plugin needs to add lots of markup around the input (for the overlay and the dropdown list), I wrap it all up in a container div. This container div is the limit of our reach (and does not include the button element, or anything else they choose to put next to their inputs).
To fix this, you'll need to define a line-height in your parent div#test2. Without it, different browsers will give it different values. This will cause Firefox to cause this weird result.
Now, the line-height isn't the only problem, also the vertical-align's baseline value will generate a different result for inline elements than it is for inline-block elements that have a different height than the surrounding inline content. To fix this, change the value to top for the #container element (since that's the inline-block element).
The final result would have the following changed (only pasting the parts that changed):
#test2 {
background-color: green;
line-height:70px;
#container {
// replicate the inline nature of the input
display: inline-block;
vertical-align:top;
}
//the rest of the #test2 nested code
}
That would look like this.
Reply to comment
I've made something that does work by the requirements set. Since you said the extra code (so the divs around the input) are made by the plugin itself, I've taken the liberty of changing that a bit to make this work.
The way it can work quite easily is just not using inline-blocks at all, and sticking with the inline elements. This would change the styles to the following:
#container {
// replicate the inline nature of the input
display: inline;
}
#wrapper {
display: inline;
position: relative;
}
input {
// you'll want to make sure the typed text doesn't appear behind the overlay
padding-left:35px;
}
#overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
Notes:
I didn't bother making the overlay cover the full height of the input, since your plugin would just make it a flag anyway. To make it cover the full height, just set negative top and bottom styles on the overlay, equal to the computed padding-top and padding-bottom (resp.) on the input. In this case, you'd have to change them to top:-5px;bottom:-5px;. (you can get the computed style via jQuery's $(input).css('padding-top'))
You could actually also remove the whole #container from it, since the only style it has now is display:inline which really doesn't add anything to the whole thing.
I've added a padding-left to your input, because otherwise you'd have to type behind the overlay, which is just silly.
Is the HTML generated by the plugin and it needs to stay exactly the same? I'm not sure I can figure out exactly why the second example is not working, but you seem to have too many div elements there. You could make since simpler:
HTML
<div id="test1">
<div id="wrapper">
<input>
<div id="overlay"></div>
<button>submit</button>
</div>
</div>
SCSS
input, button {
border: 1px solid black;
padding: 5px;
}
input {
display: inline-block;
padding-left: 35px;
}
#test1 {
background-color: yellow;
padding: 20px 0 40px 0;
#wrapper {
position: relative;
#overlay {
position: absolute;
top: 1px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
}
}
Codepen example
I've removed the margin, and instead used padding on the parent, it achieves the same thing. You'll also want some padding-left on your input field so the entered text doesn't disappear behind your overlay div.
EDIT: In case you are unable to change the markup:
SCSS:
#test2 {
background-color: green;
#container {
// replicate the inline nature of the input
display: inline-block;
padding: 20px 0 40px 0;
}
#wrapper {
// this is just here to be display:block and ignore the margin on the input
display: block;
position: relative;
}
input {
// tell parent to ignore margin
//display: block;
margin: 0;
}
#overlay {
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
}
codepen demo
Removed the block and margin declarations from the input field, and moved the spacing to padding of the #container element.
"Disclaimer": Let me just start by saying that I did not find exactly what is causing the problems in Firefox, but I did think of an alternative way you could do it.
The way this works in both Firefox and Chrome is just to use the exact same HTML as you used for your #test1, but on top of that, also using the CSS :before pseudo-element (instead of using the #container and #wrapper). The code I used was:
#test2 {
background-color: green;
position:relative;
&:before {
content:"";
display:block;
position:absolute;
left:1px;
top:1px;
bottom:1px;
margin:20px 0 40px 0;
width:30px;
background:#00C2FF;
}
}
demo
The way this works is to simply position the :before overlay on exactly the same place as the divs previously were. As you can see, I've used most of the same styles as you did, but instead, I've put them on the :before pseudo-class.
Other answers don't know why it doesn't work on Firefox. Well, I think that Firefox has the right behavior and it's a Chrome problem.
In short, you want to align an input with a button. But the input is inside a wrapper. Then, you can use vertical-align to control the vertical aligning between the wrapper and the button, but not between the input and the button.
Here you can see an screenshot with different vertical-align:
See the code.
If you want to align the input and the button (last case in the image), you have a problem, because any of the keywords you can use with vertical-align does that. Only in case that input's top margin and bottom margin are equal, then vertical-align: middle works.
But in general, you have have another solution: vertical-align also accepts a <length> value.
And, to get a perfect alignment, you should use the formula
vertical-align: -(input bottom margin)
Or, if you want to align them even if the button has a bottom margin, then
vertical-align: -(input bottom margin) + (button button margin)
The code formula above works with inline-block <div>, but not with <buttons>.
The formula must be fixed to
vertical-align: -(input bottom margin) -(input offsetHeight)/2 + 6
In your example
(Input bottom margin) = 40px
(Input offsetHeight) = 31px
Then, you need
vertical-align: -(input bottom margin) -(input offsetHeight)/2 + 6
Demo
I could achieve it with the following.Codepen You will have to know the css applied to input and apply it to button as well
button{
position:absolute;
margin-left:5px;
}
input, button {
display: inline-block;
margin: 20px 0 40px 0;
}
please update below in your code.
input, button {
border: 1px solid #000000;
margin: 20px 0 40px;
padding: 5px;
vertical-align: top;
}
hope it will work
http://codepen.io/anon/pen/Isycu