tuchawat tuchawat - 1 month ago 7
CSS Question

How to make a form input width to responsive?

Hello I have searchbox html. see screenshot http://s16.postimg.org/utmcaczmd/Untitled.jpg
but when it is on the bigger screen PC, the focus width will still the same width and searchbox will look bigger because I make the div id = rightside's width in percent unit. so in the bigger screen the focus look too small width.

Question : How could I do to make the width of input form stretch too.



#content
{
float:left;
margin-top:2vh;
padding:0px;
width:100%;
display:flex;
flex-direction:row;
word-break: break-all;
}
#right-side
{
float:left;
margin-left:2vh;
width:30%;
min-height: 65vh;
border: solid 2px #E0E0E0;
background:white;
}

#left-side
{
float:left;
width:70%;
min-height: 65vh;
border: solid 2px #E0E0E0;
background:white;
}
.searchbox
{
background: #80bfff;
margin: 10px;
margin-top:20px;
padding: 5px;
border-radius: 5px;
}
.search-bar
{
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;

position:relative;
}
.search-bar .searchbutton
{
position:absolute;
top:23%;
right:5px;
}
.sfield
{
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%;
}

<div id="right-side">
<div class="searchbox">
<?php echo form_open('shopping/search');?>
<h4 style="text-align:center;"> ค้นหาสินค้า </h4>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="" placeholder="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>




Answer

you need to address some absolute value instead of a percent

check below demo, change the width of #right-side and see how the input field follows

 #content
{
    float:left;
    margin-top:2vh;
    padding:0px;
    width:100%;
    display:flex;
    flex-direction:row;
    word-break: break-all;
}
#right-side
{
    float:left;
    margin-left:2vh;
    width:30%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}

#left-side
{
    float:left;
    width:70%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}
.searchbox
    {
        background: #80bfff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
    }
   .search-bar 
        {
            height: 29px;
            background-color: #e1e1e1;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            margin-left:20px;
            margin-right:20px;
            margin-bottom:10px;
            position:relative;  
            padding-right: 34px; /* <- absolute space */
        }
        .search-bar .searchbutton 
        {
            position:absolute;
            top:23%;
            right:5px;
        }
        .sfield 
        {
            float: left;
            margin: 5px 0 0 8px;
            font: 8pt Verdana;
            color: #888;
            height: 20px;
            line-height: 18px;
            padding: 0;
            background: transparent;
            border: 0;
            width: 100%; /* <- full width */
            background-color: red; /* <- to better appreciate where is the input field (and its bounds) */
        }
              <div id="right-side">
                   <div class="searchbox">
                        <?php echo form_open('shopping/search');?>
                            <h4 style="text-align:center;"> ค้นหาสินค้า </h4>
                                <div class="search-bar">
                                    <input type="text" size="20" class="sfield" name="searchterm" value="" placeholder="Search...">
                                    <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
                                </div>
                        <?php echo form_close();?>
                    </div>
               </div>