I use bootstrap v.3.0.0.

input with 2 buttons with icons must be stretched to the full width of the block . The width of all elements is given in%. When you decrease the width of the screen, the input and buttons decrease proportionally. But at the same time the icons on the buttons crawl out of the border of the button: icons crawl out of buttons

https://jsfiddle.net/lilubanana/53d8tbmy/

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); .search-input { border: 1px solid #dadada; height: 52px; width: 84.8%; padding: 10px 30px; vertical-align: bottom; box-sizing: border-box; } .bttn { float:right; position: relative; border: none; height: 52px; width: 7.6%; /*min-width: 32px;*/ background: #dadada; border-right: 1px solid #cbcbcc; cursor: pointer; } .bttn:hover { position: relative; border: none; height: 52px; width: 7.6%; /*min-width: 32px;*/ background: #f06420; } 
 <input class="search-input" type=search name="focus" required placeholder="Введите запрос"><button class="bttn icons bttn-search"></button><button type="button" class="bttn icons bttn-settings"></button>

Setting the width through media queries in this case is a bad decision, because have to keep track of different screen widths.

What other ways you can apply?

  • jsfiddle.net/soledar10/tu6337fh - soledar10
  • Thank you very much for the option! but I do not want to overload the layout with extra divas. although your decision is also working. - Marina Voronova

2 answers 2

How to stretch one of the fields to the full width

(Picked up the bootstrap 3.0.0 and simplified CSS.)

1. wrap in a block with overflow:hidden;

Buttons make floating blocks with a fixed width. Block with overflow:hidden; pick up the rest of the place. The field inside it is stretched to 100% and made a block to avoid unnecessary gaps, which sin inline elements.

https://jsfiddle.net/glebkema/u4yz3twp/

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); .wide { overflow: hidden; } .search-input { border: 1px solid #dadada; display: block; height: 52px; padding: 10px 30px; width: 100%; } .bttn { background: #dadada; border: 0; border-right: 1px solid #cbcbcc; display: block; float: right; height: 52px; width: 52px; } .bttn:hover { background: #f06420; } 
 <button type="button" class="bttn icons bttn-search"></button> <button type="button" class="bttn icons bttn-settings"></button> <div class="wide"><input class="search-input" type=search name="focus" required placeholder="Введите запрос"></div>

2. Calculate the width function calc

You can make the width of the buttons constant, and for the input field use the function salc . For example:

https://jsfiddle.net/glebkema/o2yo6bqo/

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); .search-input { border: 1px solid #dadada; height: 52px; padding: 10px 30px; vertical-align: top; width: calc(100% - 104px); } .bttn { background: #dadada; border: 0; border-right: 1px solid #cbcbcc; height: 52px; width: 52px; } .bttn:hover { background: #f06420; } 
 <input class="search-input" type=search name="focus" required placeholder="Введите запрос"><button type="button" class="bttn icons bttn-search"></button><button type="button" class="bttn icons bttn-settings"></button>

  • Thank you very much. I'll use your option) although calc not supported everywhere, but it's worth a try) - Marina Voronova
  • @MarinaVoronova Added a solution without calc in response. - Gleb Kemarsky

I wrapped it with flex and it all worked. But specifying the width of a button as a percentage is not correct, as you do. You have not inserted the icons themselves inside the button.

 .myFlex { display: flex; } .myFlex > .search-input { flex: 2; border: 1px solid #dadada; height: 52px; padding: 10px 30px; vertical-align: bottom; box-sizing: border-box; } .btn-custom { border: 0; border-radius: 0; background: #dadada; border-right: 1px solid #cbcbcc; cursor: pointer; } .btn-custom:hover { background: #f06420; } 
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <div class="myFlex"> <input class="search-input" type=search name="focus" required placeholder="Введите запрос"> <button class="btn-custom"> <i class="glyphicon glyphicon-star"></i> </button> <button type="button" class="btn-custom"> <i class="glyphicon glyphicon-ok"></i> </button> </div> <div style="width: 800px"> <div class="myFlex"> <input class="search-input" type=search name="focus" required placeholder="Введите запрос"> <button class="btn-custom"> <i class="glyphicon glyphicon-star"></i> </button> <button type="button" class="btn-custom"> <i class="glyphicon glyphicon-ok"></i> </button> </div> </div> <div style="width: 400px"> <div class="myFlex"> <input class="search-input" type=search name="focus" required placeholder="Введите запрос"> <button class="btn-custom"> <i class="glyphicon glyphicon-star"></i> </button> <button type="button" class="btn-custom"> <i class="glyphicon glyphicon-ok"></i> </button> </div> </div> <div style="width: 200px"> <div class="myFlex"> <input class="search-input" type=search name="focus" required placeholder="Введите запрос"> <button class="btn-custom"> <i class="glyphicon glyphicon-star"></i> </button> <button type="button" class="btn-custom"> <i class="glyphicon glyphicon-ok"></i> </button> </div> </div>

  • thanks for the option! flex is cool, but I don’t use it in this project - Marina Voronova
  • @MarinaVoronova if you use the border property, why is the flex property worse? this is a standardized thing that even frees you from the bootstrap. What I am leading to ... It is necessary to use flex , and the sooner everyone understands how good a thing is, the better. But your example could work without flex, just in a button inside a tag, you had to insert an icon, and not hang a class icon on the button itself, this is logically wrong :) - Vasily Barbashev
  • at the expense of flex totally agree! I really want to use it everywhere. I can not insert the icon into the button, because icon and button have hover state. or just don't know a better way - Marina Voronova
  • those. when you hover over a button, the background button changes and the icon should change. until she figured out how to do this without hover:after - Marina Voronova
  • one
    if you change the color, then by button:hover add button:hover i for the icon to the button:hover . button:hover i { color: green; } button:hover i { color: green; } - Vasily Barbashev