As title,
I tried to create a block of inputs, where each input will be just next to each other, table-like-style as in the image below.
The code for above is
<div class="row">
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker">
</select>
</div>
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 padding-sides-none">
<input class="form-control" />
</div>
</div>
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date- format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6 padding-sides-none">
<input class="form-control"></input>
</div>
</div>
</div>
Select is using bootstrap-select while datepicker uses bootstrap-datetimepicker, and using Bootstrap 3.3.0.
Problem is the input border, which looks thicker when each input is on each other's side. The border side which touches the other inputs is somewhat thicker.
I want the touching sides of each input to be in border-collapse style, just like the border-collapse for table, where each border side will have the same thickness, but i just can't seem to get it done properly.
How can i achieve this?
i resolved your problem
please check below code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.formSection .nopadding {padding: 0;}
.formSection .form-control {border-radius: 0;}
.formSection select.form-control {border-bottom: 0;border-right: 0;}
.formSection .col-xs-3 input.form-control {border-bottom: 0;}
.formSection .input-group-addon {min-width: 36px;border-right: 0; border-radius: 0;}
.formSection .input-group {display: flex;}
</style>
<div class="formSection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker">
</select>
</div>
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 nopadding">
<input class="form-control" />
</div>
</div>
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date- format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6 nopadding">
<input class="form-control"></input>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With few minor modifications to your code and with some css you can get the expected result, please check the working example below:
note: select-box appearance is set to none to clear the default ui provided by browser.
.row.compact-row {
margin-right: 0;
margin-left: 0;
}
.row.compact-row > [class^="col-"],
.row.compact-row > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
margin: -1px 0 0 -1px;
}
.compact-row .input-group-addon {
border-radius: 0;
}
.compact-row .form-control {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br/><br/>
<div class="container">
<div class="row compact-row">
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<input class="form-control" />
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date-format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date- format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date-format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6">
<input class="form-control" type="text" />
</div>
</div>
</div>
Related
I am using bootstrap3 and trying to create a horizontal form in which one of the rows should show the controls inline.
In the code below I would like the three selects to be on the same line as the input-group.
I have tried the approaches here: Form inline inside a form horizontal in twitter bootstrap? but I cannot get it to work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="input-group col-xs-4">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
</body>
</html>
Have you tried using a table?
<table>
<tbody>
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</td>
<td>
<select>
<option>Select1</option>
</select>
</td>
<td>
<select>
<option>Select2</option>
</select>
</td>
<td>
<select>
<option>Select3</option>
</select>
</td>
</tr>
</tbody>
</table>
You can try using the row class and not the form group class, tried it with Boostrap 3.
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
https://jsfiddle.net/FJB_ZA/Lmzubdw3/
You need to make changes in your structure to make it fit in one line.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="col-xs-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select1</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
I have a problem joining multiple select tags into .input-group.
Here is my code:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 2</label>
<div class="col-md-6">
<select class="form-control" >
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group col-md-6">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
</div>
</div>
</form>
The problem is as follows:
In the last form-group, after the Label 3, three span's with select inside them have higher width then they should have and they overlap to the right and left of their input-group container (about 15 px).
Here is jsfiddle demostrating the problem (just click on first or third select in the last row)
Made another div for using class="form-group", See DEMO on full page mode in snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 2</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="col-md-6">
<div class="input-group ">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
change HTML
<form class="form-horizontal container-fluid" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 2</label>
<div class="col-md-6">
<select class="form-control" >
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
</div>
</div>
</div>
</form>
https://jsfiddle.net/qrtcq8bs/4/
just add
the margin-left:0; & margin-right:0;
in the form-group
because by default is negative
<div class="form-group" style="margin-left:0 !important; margin-right:0 !important;">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group col-md-6">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
i am new in bootstrap.i design the following html form using bootstrap.
Here is the image given below:
as you can see,that the right side [red marked] size are not same.
I know about manually adjusting each of the elements width.But it is very tedious.
May be form-control causes this.Please help me on this.Thanks
here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Loan Distribution</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="js/moment.min.js"></script> <!-- bootstrap-datetimepicker requires Moment.js to be loaded first -->
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({format:"DD/MM/YYYY", useCurrent: false });
});
</script>
<style>
#datetimepicker1{
width:140px;
}
body {
background-color: #584F39;
}
.panel.panel-primary {
border-color: #73AD21;
}
.panel-group .panel .panel-heading {
background: #73AD21;
}
.form-horizontal .panel.panel-primary {
border-color: #73AD21;
margin-bottom: 10px;
}
#media (max-width: 767px) {
.form-group-top {
margin-top: 15px;
}
}
</style>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Employee Loan Distribution</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">Employee ID:</label>
<div class="col-sm-3" id = "empid" >
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
<div class="col-sm-8">
<div class="input-group">
<select class="form-control " name="month" id="month" onchange="" >
<option value="" disabled selected>Loan</option>
<option value="01">Bank Consumer Loan</option>
<option value="02">GPF Loan Adv.</option>
<option value="03">Green Super Market Loan</option>
<option value="05">House Building Loan</option>
<option value="19">Other Loan</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="dcode">Description:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="dcode" placeholder="Enter Loan Description">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Amount" >
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
<div class="col-sm-3">
<div class="input-group date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Rate" >
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
remove input-group class in no use addon-button
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Employee Loan Distribution</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">Employee ID:</label>
<div class="col-sm-9" id = "empid" >
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
<div class="col-sm-9">
<select class="form-control " name="month" id="month" onchange="" >
<option value="" disabled selected>Loan</option>
<option value="01">Bank Consumer Loan</option>
<option value="02">GPF Loan Adv.</option>
<option value="03">Green Super Market Loan</option>
<option value="05">House Building Loan</option>
<option value="19">Other Loan</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="dcode">Description:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dcode" placeholder="Enter Loan Description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter Amount" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
<div class="col-sm-9">
<div class="input-group date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter Rate" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
https://jsfiddle.net/gpazs5pt/1/
create a custom class like this:
.custom
{
min-width: 150px;
}
add this class to all form elements.
I'm trying to align filter boxes into a grid that spans 3 blocks per row...
I didn't want to lose the bootstrap look so I haven't tried to strip out some of these navbar/input group classes. Is there a clean way to fix this? What approach should I take to troubleshooting stuff like this in the future? jsFiddle below
<nav class="navbar navbar-default" ng-if="filterOn">
<form class="navbar-form"> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter: </span>
<input class="form-control" ng-model="filterOptions.filterText" />
</span> <span class="input-group col-sm-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
<select class="form-control" name="mySelect1" ng-model="sel1">
<option></option>
<option>{{selections}}</option>
</select>
</span> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter B: </span>
<select class="form-control" name="mySelect2" ng-model="nameVarTo">
<option></option>
<option>selections2</option>
</select>
</span>
</form>
http://jsfiddle.net/u1wffrd4/1/
Try this:
.input-group {
width:100%;
}
<div class="table-responsive">
<nav class="navbar navbar-default" ng-if="filterOn">
<form class="navbar-form">
<div class="col-sm-4 col-xs-12">
<span class="input-group">
<span class="input-group-addon" style="width: 20%">Filter: </span>
<input class="form-control" ng-model="filterOptions.filterText" />
</span>
</div>
<div class="col-sm-4 col-xs-12">
<span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
<select class="form-control" name="mySelect1" ng-model="sel1">
<option></option>
<option>{{selections}}</option>
</select>
</span>
</div>
<div class="col-sm-4 col-xs-12">
<span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter B: </span>
<select class="form-control" name="mySelect2" ng-model="nameVarTo">
<option></option>
<option>selections2</option>
</select>
</span>
</div>
</form>
</nav>
</div>
.input-group.col-xs-4.col-md-4 {
float: left;
padding: 5px;
}
<div class="table-responsive">
<nav ng-if="filterOn" class="navbar navbar-default">
<form class="navbar-form">
<div class="show-grid">
<span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter: </span>
<input ng-model="filterOptions.filterText" class="form-control">
</span>
<span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
<select class="form-control" name="mySelect1" ng-model="sel1">
<option></option>
<option>{{selections}}</option>
</select>
</span>
<span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter B: </span>
<select class="form-control" name="mySelect2" ng-model="nameVarTo">
<option></option>
<option>selections2</option>
</select>
</span>
</div>
</form>
</nav>
</div>
You have to wrap your code with .container or .container-fluid and .row classes.
Check this http://jsfiddle.net/manishrane1/u1wffrd4/2/
<div class="container">
<div class="row">
<div class="table-responsive">
<nav class="navbar navbar-default" ng-if="filterOn">
<form class="navbar-form">
<div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter: </span>
<input class="form-control" ng-model="filterOptions.filterText" />
</span></div>
<div class="col-xs-4"><span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
<select class="form-control" name="mySelect1" ng-model="sel1">
<option></option>
<option>{{selections}}</option>
</select>
</span></div>
<div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter B: </span>
<select class="form-control" name="mySelect2" ng-model="nameVarTo">
<option></option>
<option>selections2</option>
</select>
</span></div>
</form>
</nav>
</div>
</div>
</div>
I have a responsible site but as you can see by the pictures (http://postimg.org/image/xoq7eyg1b/), it's not totally mobile-friendly because the components are shown kind of small.
To avoid the need to resize each one of them explicitly, is there any way to enlarge everything at once?
Code of the printed page:
<div class='row' id='content-wrapper'>
<div class='col-xs-12'>
<div class='page-header'>
<h1 class='pull-left'><i class='icon-stethoscope'></i> Doenças Crônicas</h1>
</div>
</div>
</div>
<div id="divGrid">
<div class='col-sm-12 col-md-3'>
<div style="width:101% !important" class="box">
<div class="box-header box-header-small dark-orange-background">
<div class="title">
<div class="icon-search"></div>
Pesquisa
</div>
<div class='actions'>
<a class="btn box-collapse btn-xs btn-link" href="#"><i></i></a>
</div>
</div>
<div class="box-content">
<form class="form form-horizontal" method="post" action="#" accept-charset="UTF-8">
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="nome">Nome</label>
<div class="col-md-8">
<input class="form-control input-sm" style="height:33px !important;font-size:medium !important" id="nome" placeholder="Ao menos 3 letras" type="text" data-bind="value: model.Nome" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="Email">E-mail</label>
<div class="col-md-8">
<input class="form-control input-sm" style="height:33px !important;font-size:medium !important" id="Email" placeholder="Ao menos 3 letras" type="text" data-bind="value: model.Email" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="Sexo">Sexo</label>
<div class="col-md-8">
<select id="Sexo" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.Sexo, ">
<option value="">-- Todos --</option>
<option value="M">Masculino</option>
<option value="F">Feminino</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="IsMonitorado">Monitorado</label>
<div class="col-md-8">
<select id="IsMonitorado" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.IsMonitorado, ">
<option value="">-- Todos --</option>
<option value="1">Sim</option>
<option value="0">Não</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="FaixaIdade">Faixa Idade</label>
<div class="col-md-8">
<select id="FaixaIdade" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.FaixaIdade, ">
<option value="">-- Todos --</option>
<option value="1">0 a 18 anos</option>
<option value="2">19 a 23 anos</option>
<option value="3">24 a 28 anos</option>
<option value="4">29 a 33 anos</option>
<option value="5">34 a 38 anos</option>
<option value="6">39 a 43 anos</option>
<option value="7">44 a 48 anos</option>
<option value="8">49 a 53 anos</option>
<option value="9">54 a 58 anos</option>
<option value="10">59 anos ou mais</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label " style="text-align: left;" for="situacao">Situação</label>
<div class="col-md-8">
<select id="situacao" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.StAtivo, ">
<option value="">-- Todos --</option>
<option value="1">Ativo</option>
<option value="0">Inativo</option>
</select>
</div>
</div>
<div class="form-actions form-actions-padding-xs">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<button class="btn btn-sm" type="button" data-bind="click: limpar">Limpar</button>
<button class="btn btn-primary btn-sm" type="button" data-bind="click: submit"><i class="icon-search"></i> Pesquisar</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-sm-12 col-md-9'>
<div style="width:101% !important" data-bind="kendoGrid: model.items"></div>
</div>
</div>
<div class="modal fade" id="NovoPaciente" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header blue-background">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-white" id="myModalLabel"><i class="icon-user"></i> NOVO PACIENTE</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Nome/Identificação*</label>
<input class='form-control' type='text' data-bind="value: model.Nome, valueUpdate:'afterkeydown'">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Endereço*</label>
<textarea class='form-control' rows='2' data-bind="value: model.Endereco"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Telefone</label>
<input class='form-control' type="text" data-bind="masked: model.Telefone, mask: '(99) 9999-9999'" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Sexo*</label>
<select class="form-control" data-bind="options: model.ComboSexo, optionsText: 'Text', optionsValue: 'Value', optionsCaption: '-- Selecione --', value: model.Sexo, "></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Nascimento*</label>
<div class="form-group">
<input class="form-control" id="txtDtNascimento" type="text" data-bind="value: model.DtNascimento, datepicker: model.DtNascimento, datepickerOptions: { altFormat: 'dd/mm/yyyy' } " />
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='tipoDocumento'>Unidade*</label>
<select id="tipoDocumento" class="form-control" data-bind="click: function(e) { obterEquipesUnidade(this) }, options: model.ComboUnidade, optionsText: 'Text', optionsValue: 'Value', value: model.IdUnidade, optionsCaption: '-- Selecione --', "></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Equipe</label>
<select class="form-control" data-bind="options: model.comboEquipe, optionsText: 'Descricao', optionsValue: 'Id', optionsCaption: '-- Selecione --', value: model.IdEquipe, "></select>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='tipoDocumento'>Assinatura do TCLE</label>
<br />
<label>
<input type="radio" name="Tcle" value="true" data-bind="checkedRadioToBool: model.Tcle" />
Sim
</label>
<label>
<input type="radio" name="Tcle" value="false" data-bind="checkedRadioToBool: model.Tcle" />
Não
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Altura</label>
<input class='form-control' type='text' id="Altura" data-bind="value: model.Altura, masked: model.Altura, mask: '0.00'">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Chave de acesso</label>
<input class='form-control' type="text" data-bind="numeric: number, value: model.ChaveAcesso" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>E-mail<span data-bind="text: model.Obrigatorio"></span></label>
<input class="form-control" type="email" data-bind="value: model.Email" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Outras Informações</label>
<textarea class='form-control' rows='2' data-bind="value: model.Observacao"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Senha<span data-bind="text: model.Obrigatorio"></span> </label>
<input type="password" class='form-control' data-bind="value: model.Senha" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Confirmação<span data-bind="text: model.Obrigatorio"></span> </label>
<input type="password" class='form-control' data-bind="value: model.ConfirmSenha" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bind="click: cancel">Fechar</button>
<button type="button" class="btn btn-primary" data-bind="click: save">Salvar</button>
</div>
</div>
</div>
</div>
Try increasing the font-size in the <body>.
#media screen (max-device-width:$mobile-breakpoint) {
body {
font-size:120%;
}
}
Also, you could use em units instead of pixels (I don't know if you do because you didn't post your CSS). These em units are always relative to the font-size set on the <body> tag. You can use media queries to increase or decrease the size of one em unit depending on the viewport.
Good em reference: https://css-tricks.com/css-font-size/
In Bootstrap, the font sizes are given in em units, so you can set a baseline font size in your CSS, and all of the font should scale accordingly.
Create a new CSS page, so you're not editing bootstrap.css directly.
Call it custom.css. It should contain:
html { font-size: 16px; }
Add a reference to custom.css below the references to bootstrap, something like this (you don't show that part of your code so I'm just guessing here):
<link rel="stylesheet" href="/path/to/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/css/bootstrap-theme.css"/>
<link rel="stylesheet" href="/path/to/css/custom.css"/>
The code in custom.css should overwrite whatever baseline font gets set initially. If setting the css for html doesn't work, try body.