Input field should take the remaining width - css

I am trying to build a form to add new users to some kind of entity. The idea is to have user avatars in a line and on the end of the line there is a input-field with a typeahead to insert new users.
I tried this some years ago and ended up using javascript as I was not able to do this in plain css (2).
The big question: is this somehow possible in css3?
Basic idea of code:
<div class="availableWidth">
<div class="list">
<ul>
<li><div class="avatar">...</div></li>
...
</ul>
</div>
<div class="form">
<div class="typeaheadField">
<input ...>
</div>
<button>+</button>
</div>
</div>
CSS:
.list ul li {
list-style-type:none;
display:inline-block;
}
button {
width:50px;
}
Basic Idea is that the box .availableWidth has some width (100%) the box .list grows in width (when new li items are added) as the box .form should shrink in width. Right to the input is a some pixels wide button. The input should take the remaining space.
Is that possible in css3 or will I need Javascript?

You can use flexbox, or you can use display table attributes in CSS. Take a look:
.container {
display: table;
width: 100%;
position:relative;
}
.avatar {
width: 50px;
height: 50px;
display: table-cell;
}
.input {
height: 50px;
display:table-cell;
vertical-align: middle;
}
.input input {
width: 100%;
box-sizing: border-box;
padding: 5px;
}
<div class="container">
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="container">
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
You can add all the avatars that you want at left side and the input rearrange automatically.

You want to make input 100% width relative to some container from avatars to button. You can get it by using table, flexboxes or formatting contexts and floats.
Here is last one http://jsfiddle.net/53f0yzeL/
Notice overflow:hidden rule for .avatars-wrapper, it make container to fit exactly between floated elements and .avatars side so you can make input 100% wide.

Related

How to get three div in one line

I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks

Non-wrapping CSS Flex with fixed widths

I'm building a Carousel-type component, but am having some difficulty getting it to work just right.
My basic approach is a div (wrapper) with lots of other divs (items) in it. I want to display 4 items on the carousel at any one time. The items have various content heights, but the heights of the items should be equal (to the largest required).
I can't work out the CSS combination I need to get this to work correctly.
With this setup (HTML + CSS at bottom of post), the width: 25%; on each item-container is ignored.
If I add a fixed with to .item, then the 25% kicks in, but the item width is unknown -- it depends on the browsers size. Setting it to 1000px means you lose content from the item. Setting it to ~210px works, but when you start shrinking your browser, you lose content. On a large browser, you have excessive spacing.
Curiously, if I add flex-wrap: wrap to the CSS, then the 25% width is applied correctly -- but I can't do that, because then it's not a carousel! Example
The scenario is simple:
An unknown amount of items in a div with overflow: auto, which are equal heights should be displayed, with 4 of the children divs on the screen at any one time.
My HTML is structured as follows:
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
...
</div>
</div>
My CSS:
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
width: 25%;
}
Note, this is my MCVE. On my real component, I have buttons for scrolling left and right, the content is significantly more complex and stuff like that.
All you need is to add flex: 0 0 auto to .item-container elements.
* {
box-sizing: border-box;
}
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
flex: 0 0 auto;
width: 25%;
}
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #4.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #5.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #6.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #7.
</p>
</div>
</div>
</div>
</div>

Change position of Images HTML when Window changes

This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;

How to create sticky bottom search box Bootstrap (React)

I have been trying for hours trying different examples I have found, and none seem to work.
What I want to do (without the custom JS): http://jsfiddle.net/paulalexandru/Z2Lu5/
However, I can't get it to work within Bootstrap. I am specifically using React-Bootstrap (I have changed the below code to normal HTML for those unfamiliar with React/React-Bootstrap), but I don't believe that to be the problem. I have a setup along the lines of:
<body>
<div class="container-fluid main">
<div class="row">
<div class="col-md-2 sidebar"
<my sidebar elements>
</div>
<div class="col-md-10">
<some random empty div (that will fill in the future)>
<div class="search">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
<input type="text" onchange="handleChange()" />
</a>
</div>
<div id="searchResultsContainer" className="panel-collapse collpase">
<div className="panel-body">
<my table containing search results from the server>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
However, no matter how hard I try
.search {
position: fixed;
bottom: 0;
width: 100%;
}
You will also notice stuff to try and make the search results accordion, but that's useless to me until I can get this box to stay at the bottom.
My guess is that the Rows/Columns of Bootstrap are causing some issues. I can't move the search box out of the grid and to the bottom (which does work) because it then also covers the sidebar, and I am using the grid system to keep the search box dynamically sized/placed.
Also, I tried this but it didn't seem to work: Making expandable fixed footer in Bootstrap 3?
The solution is position: fixed (you can see the other example using it as well). It should work no matter what framework you are using.
body
{
margin: 0;
padding: 0;
}
.search
{
background: rgba(255,0,0,0.5);
bottom: 0;
position: fixed;
width: 100%;
}
#media only screen and (min-width: 550px)
{
.search
{
left: 50%;
margin-left: -250px;
width: 500px;
}
}
#media only screen and (min-width: 850px)
{
.search
{
margin-left: -400px;
width: 800px
}
}
<div class="container-fluid main">
<div class="row">
<div class="col-md-2 sidebar">
<div>my sidebar elements</div>
</div>
<div class="col-md-10">
<div>some random empty div (that will fill in the future)</div>
<div class="search">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
<input type="text" onchange="handleChange()" />
</a>
</div>
<div id="searchResultsContainer" className="panel-collapse collpase">
<div className="panel-body">
<div>my table containing search results from the server</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle

CSS: Using 100% of remaining width

I'm making a list consisting of an image, title, buttons, source code and am having a problem with using 100% of the remaining width.
My main problem is that I'm not being able to make a <textarea> use all the remaining width and height.
Here's what I'm getting:
And what I intend to have:
Below the source code, CSS:
.listing {width:100%;background:#f1f1f1;display:table;}
.leftimage {clear:none;display:table-cell;padding:20px;}
.listing .information {padding: 20px;width:100%;display:table-cell;}
.listing .information .title {font-size:20px;color:#016b98;}
.listing .information .title a {color:#016b98;text-decoration:underline;}
.listing .information .outsideButton {float:left;padding-top:5px;padding-right:5px;clear:none;}
.listing .information .outsideButton {clear:right;}
.listing .information .outsideButton .button {border: 1px solid #626262;background:#d8d8d8;}
.listing .information .outsideButton .button .label {padding:5px;}
.listing .information .outsideButton .button .label a {color:#626262;}
HTML:
<div class="listing">
<div class="leftimage">
<div style="height:150px;"><!-- Allows to change image position on click without changing .listing size -->
<a><img class="preview" height="150px" src="img.png"></a>
</div>
</div>
<div class="information">
<div class="title">
<a>TITLE</a>
</div>
<div class="outsideButton">
<div class="button">
<div class="label">
<a>BUTTON 2</a>
</div>
</div>
</div>
<div class="outsideButton">
<div class="button">
<div class="label">
<a>BUTTON 3</a>
</div>
</div>
</div>
<div class="outsideButton">
<div class="button">
<div class="label">
<a>BUTTON 4</a>
</div>
</div>
</div>
<div class="outsideButton">
<div class="button">
<div class="label">
<a>BUTTON 5</a>
</div>
</div>
</div>
<!-- END OF BUTTONS -->
<!-- HERE I WANT TO DISPLAY THE TEXTAREA WITH HTML CODE -->
<div style="float:left;padding-top:10px;clear:left;width:100%;">
<textarea style="padding:0;margin:0;width:100%;"><?php echo htmlspecialchars("<div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?></textarea>
</div>
<!-- END OF TEXTAREA WITH HTML CODE -->
</div><!-- END OF .information -->
</div>
Thanks.
SOLUTION:
Set vertical-align:top; for every table-cell
As also referred in my comments maybe this helps you to achieve the same result but without the usage of floats at all:
CSS for HTML dynamic layout with not fixed columns?
Build the layout with display: table; and display: table-cell; properties and then use width: 100% on your <textarea>
EDIT:
You still use floats for your buttons - clear them correctly - e.g. wrap them in a <div class="clearfix"> and use this css for it:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
EDIT:
For anyone refering to this question: as pointed out by 2013Asker, don't forget to set the vertical-align: when using display: table-cell
First you have to tell the container div to get the remainder space and then tell textarea to get all that space of its parent. Add 'width: 100px' to each one.
<div style="float:left;padding-top:10px;clear:left; width:100%">
<textarea style="padding:0;margin:0; width: 100%"><?php echo htmlspecialchars("<div> <span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?>
</textarea>
</div>

Resources