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;
}
Related
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>
I'm just starting to look at html/css and having some problems getting my head around how the layout engine works.
I'm from a c# background and anything with hardcoded widths/heights feels like something is wrong. One of the first things I discovered is that you can't make divs expand to fill their available height in a sensible way, so I've been using tables.
The UI I want is basically a grid, which is the main part of the page with a side panel. The idea is to navigate the grid with the arrow keys and then select options for a cell using the side panel - its a fairly straightforward master/detail.
I'm happy with using a table to seperate the two columns but the problem I'm running into is in the side panel:
I want to have a search box at the top. When you type into the search box it 'autocompletes' to show you a options relevant to what you just typed.
The first problem I had was that the search box wasn't at the top of the cell in the grid. So I was using:
position: absolute;
top: 0;
for the <input> with a position:relative set in the td.
I was then using another div inside the cell to layout the results. That works fine but the search box obscures the first item.
I then tried changing the search box to have display: block which solves the problem but means the search box isn't top aligned when there are no search results!
It seems like using the display and position attributes are mutually exclusive so how do I achieve this in a sensible way?
One option seems to be to just use tables for everything, is there anything wrong with that?
#mainLayout
{
width: 100%
}
#turnSelectionPanel
{
/*visibility: hidden;*/
width: 30%;
height: 100%;
background-color: saddlebrown;
/*this is to allow positioning within this element using 'absolute'*/
position: relative;
}
#turnSearchBox
{
min-height: 20px;
max-width: 200px;
min-width: 100px;
display: block;
/*or
position: absolute;
top: 0;
*/
}
<body>
<table id="mainLayout">
<tr>
<td>
<table id="roster"></table>
</td>
<td id="turnSelectionPanel">
<input type="text" id="turnSearchBox"/>
<div id="turnArea">
</div>
</td>
</tr>
</table>
</body>
I've ommitted some of the other css for brevity's sake + some of the stuff shown there is basically irrelevant - widths etc.
The table + sidepanel is populated from javascript
This is a basic structure that you can you use.
<body>
<!-- This is a wrapper that controls the total height and width of page elements -->
<div id="mainLayout">
<!-- You can position the elements however you would like. -->
<div id="leftColumn"> ...Code goes here... </div>
<div id="searchBar"> ...Code goes here... </div>
<div id="rightColumn"> ...Code goes here... </div>
</div>
</body>
I am particularly fond of using float:left; to arrange my elements. Something like:
#mainLayout {
width:100%
height:100%;
}
#leftColumn {
width:75%;
height: 100%;
float:left;
}
#searchBar{
width:25%;
height: 10%;
float:left;
}
#rightColumn {
width:25%;
height: 90%;
float:left;
}
This will create a layout that scales with the window, and gives you a left column and a right column with a search bar above it. Obviously if you know what size you want your elements than you can simply set them.
I'm not a fan (at all, really) of using floats, so this is my approach on your layout:
I'm not sure if you want a left column, but I've added one in for your choice anyway:
.left, .nav,.right, .content {
display: inline-block;
position: absolute;
position: absolute;
}
html,
body {
margin: 0;
padding: 0;
}
.nav {
width: 75%;
background: lightgray;
height: 100px;
top: 0;
left: 0;
}
.left {
width: 20%;
top: 100px;
left: 0;
background: darkgray;
height: calc(100% - 100px);
}
.right {
width: 25%;
top: 0;
right: 0;
background: gray;
height: 100%;
}
.content {
width: 55%;
height: calc(100% - 100px);
background: lightblue;
top: 100px;
left: 20%;
}
#search {
position: relative;
width: 90%;
margin: 2%;
}
<div class="nav">I'll go most of the way along the top</div>
<div class="left">I'll be a column on the left</div>
<div class="right">
<input id="search" type="text" placeholder="Search Me" />
<br/>
<div class="furtherContent">
I'll be a column on the right</div>
</div>
<div class="content">I'll be a content</div>
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>
I have the following standard markup:
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
and style:
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
Any advice would be appreciated, thanks.
One element for the button and another element for the line that goes into the infinity and beyond..
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS:
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML:
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
I'm not going to say this is the best way, but it works for me.
<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
Your button here!
</div>
</div>
The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.
When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.