CODEWITHSUNDEEP
css
Tobi
Tobi

Reputation: 1312

Input field should take the remaining width

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?

Image of the Design-Idea

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?

Upvotes: 1

Views: 40

Answers (2)

antejan
antejan

Reputation: 2624

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.

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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.

Upvotes: 2

Related Questions