I have absolutely positioned inputs which usually have 1 digit length as their input.
I set the input's width to 8px and everything works great. However, sometimes we can have up to 4 digits in the input. In this case, I want the input to automatically expand to fit, while retaining center alignment.
The inputs are positioned on a grid in a specific fashion and require absolute positioning.
For a simplified example, https://jsfiddle.net/joshuaohana/2var8ftL/1/
In this case I want to be able to type 1234 as an input, the box should expand with the input getting longer, and the center of the input box should remain in the same location.
<div class="container">
<div class="input1">
<input placeholder="1" />
</div>
<div class="input2">
<input placeholder="2" />
</div>
</div>
and the css
.container {
position: relative;
padding: 10px;
border: 1px solid blue;
width: 150px;
height: 150px;
}
.input1 {
position: absolute;
top: 5px;
left: 5px;
}
.input2 {
position: absolute;
top: 50px;
left: 25px;
}
input {
width: 8px;
}
The easiest way to make it happen is to have an element reflecting the value of an invisible input field. There is no way to adjust input width by the content without heavy trickery. That is, if you don't need full edit capabilities, like moving the cursor.
If you do, I would opt for having an invisible <div> element and setting its value to whatever you type in your <input>. Then, you'd read the width of that <div> and set the same width to your <input>. Just remember that they both need to have the same font-family, font-size and any other font-related property.
If you're open to using contenteditable then this should be easy to accomplish
.container {
position: relative;
padding: 10px;
border: 1px solid blue;
width: 150px;
height: 150px;
}
.input1 {
position: absolute;
top: 5px;
left: 5px;
}
.input2 {
position: absolute;
top: 50px;
left: 25px;
transform:translateX(-50%);
}
[contenteditable] {
border: 1px solid;
min-width: 8px;
max-width: calc(8px * 4);
white-space:nowrap;
overflow:hidden;
}
<div class="container">
<div class="input1">
<div contenteditable></div>
</div>
<div class="input2">
<div contenteditable></div>
</div>
</div>
Related
I have seen many websites with the following design for their form:
How do you accomplish the vertical tick at the left end of the line? Is it a pseudo element, or some border hack, or am I completely missing something simple?
You can achieve this by using a ::before pseudo element. Just enclosed your textbox in a div and make its height 50% or as much less as you want. You will also have to use top to bring the div down by same amount of height you reduced. padding is essential to display the div at exactly left of textbox.
Here is the code and JSfiddle demo
HTML:
<div>
<input type="text" id="t1" placeholder="Your Name">
</div>
CSS:
#t1{
position: relative;
display: inline-block;
border:0;
border-bottom: 2px solid blue;
text-align: right;
}
div{
display: inline-block;
position: relative;
padding-left: 0.15em;
}
div::before {
content: '';
border-left: 2px solid blue;
position: absolute;
height: 50%;
left: 0;
top: 50%;
}
I have been unable to get a table to format fonts like the one in the image. What I did was to set the line-height for numbers to 33% but thus far the line height has always been a full line height and I would not be able to get the below layout using either table tag or div/span tags. Any help is greatly appreciated.
You an change the font size and borders accordingly, but the following layout should work
<div style="display:inline-block;font-size:400%">A</div>
<div style="display:inline-block">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
http://jsfiddle.net/vmedg/
There's different ways to achieve the look of that pic. I'll provide you with an example to get started.
I prefer using position: absolute since it's much easier to arrange N boxes in 1 container. Sometimes, it might be pretty impossible without using it. position: absolute fixes the element div to the parent element .container.
So by setting the .letter to top: 0 and left: 0 , it positions it starting at the top left. But you want the letter to expand the whole container like in your pic. So to do that we can simply add bottom: 0 to force it to stretch the whole way.
HTML:
<div class="container">
<div class="letter">A</div>
<div class="number one">1</div>
<div class="number two">2</div>
<div class="number three">3</div>
</div>
CSS:
.container {
position: relative;
width: 300px;
height: 300px;
background: silver; //remove this to make it white like in your pic
}
.letter {
position: absolute;
left: 0;
top: 0;
width: 80%;
bottom: 0;
display: inline-block;
border: 1px solid black;
font-size: 248px;
text-indent: 30px;
}
.number {
position: absolute;
right: 0;
width: 19%;
height: 33%;
border: 1px solid black;
font-size: 60px;
text-indent: 15px;
}
.one {
top: 0;
}
.two {
top: 33%;
}
.three {
top: 66%;
}
I have a div containing an input. I want the input to stretch to fill the available space, this works in Chrome but not IE and Firefox.
<div class="outer">
<input type="text" />
</div>
.outer{
width: 100%;
height: 40px;
position: relative;
}
input{
position: absolute;
top: 7px;
bottom: 7px;
left: 7px;
right: 7px;
}
JSFiddle: http://jsfiddle.net/wwMZg/1/
In Chrome it appears like this:
In Firefox and IE it appears like this:
In my real-use scenario there are other divs that contain images for corners, that's why the top, left, right, bottom values are set to 7px in this example.
I would like to avoid setting the width directly on the input, I wan't to set it on .outer.
Most input elements have padding/borders on them. You need to use the box-sizing property to adjust how the element dimensions are calculated.
http://jsfiddle.net/wwMZg/5/
.outer {
width: 100%;
height: 40px;
}
.outer input {
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
http://caniuse.com/#search=box-sizing
If you cant use box-sizing because you need to support older browsers, and don't mind adding another element to the markup, you can use an intermediate div
CSS
.outer{
width: 100%;
height: 40px;
position: relative;
}
.inner {
position: absolute;
top: 7px;
bottom: 7px;
left: 7px;
right: 7px;
}
input{
width: 100%;
}
HTML
<div class="outer">
<div class="inner">
<input type="text" />
</div>
</div>
Fiddle: http://jsfiddle.net/2mFgR/
Controlling the stretching and height of an input element
This styling problem is a bit intriguing since the input element seems to have its own set of rules.
Consider the following HTML:
<div class="outer">
<div class="inner">
<input type="text" />
</div>
</div>
and the CSS:
.outer {
width: 100%;
font-size: 20px;
background-color: green;
overflow: auto;
}
.inner {
margin: 7px;
}
input {
font-size: inherit;
width: 100%;
border: none;
}
Wrapping the input field in the .inner element allows it to expand to 100% without triggering horizontal overflow on the top level container.
However, the margins will not be fully symmetric unless you set border: none on the input field. This could be fixed using box-sizing to deal with the width of the borders.
With respect to the height property, input behaves like a regular inline, non-replaced element, that is, the height value does not apply and you need to use the font-size to get some control over the height.
See demo at jsFiddle
add width:100% to your input style
.outer{
width:100%;
height: 40px;
position:absolute;
}
input{
position:relative;
top: 7px;
bottom: 7px;
width:100%;
padding:0px;
margin-left:-1px;
border:1px solid gray;
}
It's the border that's offsetting it in IE
HTML:
<div>
<img src="some/path/" class="thumbnail" />
<input type="file" class="image_upload" />
</div>
CSS:
div
{
border: 2px solid #ccc;
width: 50px;
height: 50px;
overflow: hidden;
}
.thumbnail
{
width: 100%;
}
.image_upload
{
opacity: 0;
position: absolute;
}
I want <img> and <input type="file"> to overlap with each other and both fill up their parent <div>. How can I fix my CSS to achieve that?
It is not possible to change the size of a file input. You could redesign the file-input and, but the size of the clickable area isn't modifiable.
Edit: Aaron shows a first trick, and I added the second one, so see this fiddle in which the whole image is clickable for the file input.
The trick is to set font-size to a large value, then opacity to zero and finally add overflow: hidden to the parent element.
File input fields don't really play by the rules (or at least as you'd expect). To accomplish what it sounds like you're after, you've gotta get creative. Example: http://jsfiddle.net/ZTPCd/
Its Possible.
Add this css for input type file
.My_CSS {
opacity: 0;
border: none;
border-radius: 3px;
background: grey;
position: absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
You'll need to add relative positioning to the parent div, so the input field won't be positioned relatively to the browser window. (Google for more info about absolute/relative positioning).
And you'll have to add some specific positioning (top/left) to the input tag.
http://jsfiddle.net/NbhQY/
(Your outer div will have to be a little bit bigger, though, if it needs to include a file upload.)
Here you need to use some JavaScript. Since I don't see any way to change the CSS for input(type=file) itself, I made it hidden but the <div> responsible for <input type='file'>.
var box = document.getElementById("box");
var file = document.getElementById("file");
box.addEventListener('click', function(){
file.click();
})
#box {
font-size: 30px;
text-align: center;
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #999;
position: relative;
}
p {
position: absolute;
top: 80px;
color: white;
}
#file {
width: 100%;
height: 100%;
visibility: hidden;
z-index: 100;
}
<div id="box">
<img id="image" src="http://guide.denverpost.com/media/photos/full/mountain_600x600.jpg" width="100%" height="100%"/>
<input type="file" id="file"/>
<p>Click to import</p>
</div>
Consider I have a <div style="margin-top:50px"> and I need to places items in it relatively. There are some elements above <div>. For example, I have a <input type="text" /> and a button. I need to place this at the bottom of the <div> with text input being on left side aligned to parent and and button aligned to right of the parent. The input text must fill the width to button. I dont want to hardcode the px or em.
How do I achieve this ?
Edit: This is how it must look like.
Now I dont want to specify the length of text input. What I want is the button to be rendered to the right bottom of div and text input must set its width accordingly so as to fill space.
Ha! where was the drawing the first time around?
http://jsfiddle.net/eGHjs/
(Looks almost identical in IE7, Chrome, FF).
You have at least hardcode the button width to achive that.
<div id="container">
<div id="bottom">
<div><input type="text" class="text"></div>
<input type="submit" id="submit">
</div>
</div>
div#container {
height: 200px;
margin-top: 50px;
border: 1px solid gray;
position: relative;
width: 100%;
}
#bottom {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#bottom div {
position: relative;
margin-right: 105px;
}
#container #bottom input.text {
width: 100%;
}
#submit {
display: block;
position: absolute;
top: 0;
right: 0;
width: 100px;
}