Francis Francis - 1 year ago 46
CSS Question

Make a form responsive into a div

I am trying to make a form responsive and load it into a div, so that the form takes the shape of the div without over floating. I have applied row-fluid to the form element and the div and it still not responsive as shown

var div_container = document.getElementById('active-container');
var users = '';
var formy = '';
for (var i = 0; i < json.length; i++) {
users += '<span style="font-size:27px;"><strong>' + json[i].email + '</strong></span><br/>' + '<form class="row-fluid" style="margin-top:0px;" method="post" action="search"><input class="row-fluid" type="text" value="'+json[i].access+'" name="searchName" id="searchName" readonly/><button class="btn btn-success" type="submit"><i class="icon-circle-arrow-right icon-large"></i>FETCH</button></form>' + '<hr>';
}


EDITTED:
This is the div for the containing form tag

<div style="overflow: auto; overflow-x: auto; height:420px; color:#4b4f54; font-size:13px;" id="active-container">
</div>


Please how do I make the responsive into the div and attach the button to the right of the input type

Answer Source

Why not use something as simple as this. No JS needed.

Updated: inline style added. Also you can adjust by % within the inline styling, which I have found useful.

The markup

<div class="container">
<h2>Form name</h2>
    <form>
        <div class="form-group">
            <input style="display:inline; width:75%" type="email" class="form-control" id="email" placeholder="Enter email">
            <button style="width:24%"type="submit" class="btn btn-success pull-right">Fetch</button>
        </div>
    </form>
</div>

The CSS: adjust max-width as needed or remove altogether.

.container {
  margin: 20px;
  padding: 10px 10px;
  max-width: 500px;
  background: #FDFDFD;
  box-shadow: 2px 2px #D8D8D8;
}

JsFiddle Demo

Float left Demo