Francis Francis - 9 months ago 35
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>';

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">

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


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>
        <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>

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