Problem in leaving automatic field width in responsive layout

Question

Problem in leaving automatic field width in responsive layout

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

6

I have the following situation .. I'm working on a responsive layout that has three columns, left sidebar, center and right ... It happens that inside the right sidebar there is a text field and next to it there should be a submit button ... This button can never break the line, so I used in the div (inside the sidebar) where this form is the property white -space: nowrap;

The problem is that I would like the button element to be fixed in its width and the text field to be flexible, but when the dimensions are varied this does not happen, or it grows too big, popping up the layout or gets too small, leaving space inside the sidebar. Is there any way to resolve this?

The code is as follows:

div#sidebar {
  width: 23%;
}

div#sidebar div#searchbox {
  display: block;
  padding: 3px 5px;
  margin-bottom: 4px;
  white-space: nowrap;
}

div#sidebar div#searchbox input[type="text"] {
  width: 100%;
}

div#sidebar div#searchbox input[type="submit"] {
  width: 85px;
}

HTML:

<div id="sidebar">
   <div id="searchbox">
       <input type="text" name="query" />
       <input type="submit" name="btn-submit" />
   </div>
</div>

html css css3 layout-responsivo layout

asked by anonymous 12.06.2015 / 19:40

3 answers

What is the purpose of the MINUS command in oracle? What is the best way to insert a large amount of records into the database?

score 1 · Answer 1

Look at this example where I use a table to achieve its goal:

table{
    width: 100%;
}
td{
    border: 0;
    padding: 0 5px 0 5px;
    margin: 0 5px 0 5px;
}
input[type="submit"], input[type="text"] {
    width: 100%;
}
.parse{
     min-width: 70px;
     width: 70px;   
}
.full{
    width: 1fr;   
    min-width: 100px;
}

<table>
    <tr>
        <td class="full" >
            <input type="text">
        </td>
        <td  class="parse" >
            <input type="submit">
        </td>
    </tr>
</table>

Use of the table is justified on account of the width property, with the 1fr attribute. This attribute causes the column (or line) to which it is applied to have the rest of the screen size, taking into account the other columns.

Just put the inputs with width: 100% and their size you choose by applying min-width to the columns they are in.

Try to resize in JsFiddle: link .

score 0 · Answer 2

I changed the html structure a bit to get the final result, but it worked fine here.

    #sidebar {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        border: 2px solid red;
        width: 50%;
    }

<div id="sidebar">
    <div style="width: 100%;">
        <input type="text" name="query" style="width: 100%;" />
    </div>
    <div style="border: 2px solid blue;">
        <input type="submit" name="btn-submit" />
    </div>
</div>

score 0 · Answer 3

Since you're doing a responsive layout, you should think responsively. When the screen is too small for your sidebar to behave as it should, use a sidebar off-canvas (search for it) or make it appear above the central content.