Twitter Bootstrap Question posted in

How to adjust the border according to the input group?-Twitter bootstrap

i am working on alpha.dubaiexporters.com.

i almost made the website responsive using bootstrap.
This is what i am trying to design:
enter image description here

i wanted to adjust the border of the input group according to input group.

enter image description here

When i am resizing it,it is not touching the input group. how to achieve it? The below is my code:

.searcharea{
    background-image: url('https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/Dubai-Skyline-Burj-Al-Arab-Big-Bus-Tours-01.17.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*min-height: 300px;*/
    position:relative;
    width: 100vw;
    height: 100vh; 
    max-width:100%;
    
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="container-fullwidth">       
          <div class="searcharea col-sm-12"> 
             <div class="container">
                             <form class="form-inline">
            <div class="form-group">
    
    
                <div class="row">
                <div class="col-sm-2"></div>
                    <div class="col-sm-8">
                        <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br />
                              <div class="input-group" style="padding-top:0px;padding-left:0px;" >
                                   <input id="txtkeyword" class="form-control" placeholder="Search By Keyword" style="display:inline; width:290px;height:60px;" type="text" runat="server" autocomplete="off"/>
                    <input id="txtserach" runat="server" type="text" class="form-control" list="browsers" name="myBrowser" autocomplete="off" placeholder="Search By Category" style="display:inline; width:290px;height:60px;"/>
                                  <datalist id="browsers">
      <option value="Automotive"/>
      <option value="Building and Interiors"/>
      <option value="Food, Kitchen and Hotel Supplies"/>
      <option value="Industrial and Machinery"/>
      <option value="Consumer and Household"/>
      <option value="Medical and Healthcare"/>
                         <option value="Printing , Packaging and Plastic"/>
                         <option value="IT / Telecom / Electronics"/>
                         <option value="Oil and Gas"/>
                         <option value="Power and Energy"/>
    </datalist>
                  
                               <button id="btnsearch" runat="server" type="submit" class="btn btn-danger" style="height:61px;" onserverclick="btnsearch_Click">
                            Search
                            </button>
       
                           
      </div>
                        </div>
                     <div class="col-sm-2"> </div>
    
                    </div>
                                 
                            </div></form></div>
    
                             </div></div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have used outline property for all inputs and button and it worked.

    outline: 6px solid rgba(0,0,0,0.5);

    now check, alpha.dubaiexporters.com


  2. 0

    I tried visiting your page for playing with the code but it doesn’t seem to help much.

    The problem you are facing is the input doesn’t include the defined margin and padding parameters.
    Visit my to-do page to understand this:
    MYTODO

    Here I have used a property called : box-sizing: border-box on the Add a new todo input area.

    If you disable it in my page, the input tag enlarges and doesn’t fit the parent box.

    Play around with the box-sizing property and I think you must be good to go.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search