I'm having issues with my last row not showing at all when I compile the program. I tried many things but there seems to be an issue with the Select element because what ever I try to add after the first Select row doesn't show up.
What am I missing?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
</head>
<p align="center" style="color:red">
Open Store
</p>
<div class="OpenStore">
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"/>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"/>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
</div>
</html>
Here is what it looks like in chrome:
html render
The second <select> is not shown, because the closing </select> tag is missing. <select> tags are used with <option> tags inside them.
<select asp-for="LanguageId" class="form-control form-control-sm" id="Language"
style="width:100px">
<option data-value="English">English</option>
<option data-value="French">French</option>
</select>
The list attribute is not valid for select. If you want to use a datalist you should switch to <input> tags.
Please use the <select></select> instead of <select/>
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype="multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"></select>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
Related
My problem is that first three fields are a little more to the right than the other fields. I don't know how to align those fields with the others.
I have an example on code pen.
Code for one of the problematic fields:
<div class="form-group">
<label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
<div class="col-sm-3">
<input type="text" id="inputACCO_NME" name="cACCO_NME" class="form-control" placeholder="#iLocalization._iTTmvc(Context, "#Enter few letters of client or VAT#")" value="#Model.cACCO_NME" />
</div>
<input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="#Model.iACCO_KEY" />
</div>
It looks like you were just missing a closing form-group DIV tag for your Kontact row, before the clearfix:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal do-not-submit" role="form" id="formJERECEProperties">
<input type="hidden" id="iRECE_KEY" name="iRECE_KEY" value="180001334">
<input type="hidden" id="hidden_cRECE_SRT" name="cRECE_SRT" value="6">
<input type="hidden" name="iENTE_KEY" value="110000007">
<input type="hidden" name="iBUUN_KEY">
<br>
<h3>testing</h3>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Testing</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputRECE_DBO" class="col-sm-2 control-label">Datum izposoje:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepickerFiduro" name="b53b663f-86cb-422c-9b2a-a407990788e5" id="inputRECE_DBO" data-editable="1" data-default="true" value="08.03.2018" name1="dRECE_DBO">
</div>
<label for="inputRECE_DRE" class="col-sm-2 control-label">Datum vračila:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepickerFiduro" name="a41fa57c-4654-4f13-a5eb-c4abb56a5950" id="inputRECE_DRE" data-editable="1" data-default="true" value="09.03.2018" name1="dRECE_DRE">
</div>
</div>
<div class="form-group">
<label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
<div class="col-sm-3">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="text" id="inputACCO_NME" name="98a4e8a7-55cb-4ab7-b075-7ab426566f5b" class="form-control ui-autocomplete-input" placeholder="Vpišite nekaj črk partnerja ali IDDDV"
value="" autocomplete="off" name1="cACCO_NME">
</div>
<input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="170000209" tabindex="-1">
</div>
<div class="form-group">
<label for="selectCONT_KEY" class="col-sm-2 control-label">Kontakt:</label>
<div class="col-sm-3">
<select id="selectCONT_KEY" class="form-control">
</select><input type="hidden" id="hidden_iCONT_KEY" name="iCONT_KEY">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group col-sm-12"></div>
<div class="form-group">
<label for="inputRECE_NME" class="col-sm-2 control-label">Ime reverza:</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="ead8d066-2618-4ed2-b03e-84c6cb46da4d" id="inputRECE_NME" value="" name1="cRECE_NME">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Skladišče:</label>
<div class="col-sm-3">
<select id="inputDIVI_KEY" name="iDIVI_KEY" class="form-control">
<option value="140001070">Centralno skladišče</option>
</select>
</div>
<div class="col-sm-7"> </div>
</div>
<div class="form-group">
<label for="inputRECE_TEL" class="col-sm-2 control-label">Telefon:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="4c40d2be-7f87-4faf-a6ba-0ff9b95be11b" id="inputRECE_TEL" value="" name1="cRECE_TEL">
</div>
<label for="inputRECE_MOB" class="col-sm-1 control-label">Mobilni tel.:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="958d73bd-723b-4234-b625-1927e9cab407" id="inputRECE_MOB" value="" name1="cRECE_MOB">
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="inputRECE_EML" class="col-sm-2 control-label">E-pošta:</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="4f653c8e-5613-449c-9b85-6850c8c857d7" id="inputRECE_EML" value="" name1="cRECE_EML">
</div>
<div class="col-sm-5">
</div>
</div>
<div class="form-group">
<label for="inputRECE_NTO" class="col-sm-2 control-label">Opomba:</label>
<div class="col-sm-7">
<textarea class="form-control" id="inputRECE_NTO" name="cRECE_NTO">Prevzel je:
2 kom line
2 kom corner</textarea>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="form-group">
<label for="selectRECE_STA" class="col-sm-2 control-label">Status:</label>
<div class="col-sm-2">
<select id="selectRECE_STA" name="cRECE_STA" class="form-control">
<option value="A" selected="">Osnutek</option>
<option value="B">Izdan</option>
<option value="9">Izbrisan</option>
</select>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</form>
The elements (in your codepen code) have different padding values due to different classes applied to them, which causes the different distance/width. Use a common class for all similar elements and a highly specific CSS selector to overwrite those settings with a common padding setting.
I'm having some trouble with a Twitter Bootstrap form alignment. I have a checkbox that causes the below div's to incorrectly line up with the grid because it's height is only 70px tall when the div next to it is 74px. I could add the CSS to force it to the pixel height needed (see id "test") but I don't want this stay a fixed height when content responds for smaller screens. What would be the best way to fix this?
<div class="container-fluid appointment">
<div class="container">
<div class="row">
<h2 class="text-center">Appointment Request</h2>
<form>
<div class="col-sm-4">
<div class="form-group">
<label for="">Phone Number:</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="col-sm-7">
<div class="form-group">
<label for="petname">Pet's Name:</label>
<input type="text" class="form-control" id="petname">
</div>
</div>
<div class="col-sm-5" id="test">
<div class="form-group">
<label>Is your pet neutered or spayed?</label>
<div class="checkbox">
<label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="pettype">Pet Type:</label>
<select class="form-control" id="pettype">
<option>Select Pet Type...</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="breed">Breed Type:</label>
<select class="form-control" id="breed">
<option>Select Breed...</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="age">Pet Age:</label>
<select class="form-control" id="age">
<option>Select Pet Age...</option>
<option value="less than 1">Less than 1 year</option>
<option value="1">1 Year</option>
</select>
</div>
</div>
<div class="col-sm-12 text-center">
<div class="form-group">
<button type="submit" class="btn btn-lg">Send Appointment</button>
</div>
</div>
</form>
</div>
</div>
</div>
just add a class "clearfix" for the div containing the checkbox as
<div class="col-sm-5" id="test">
<div class="form-group clearfix">
<label>Is your pet neutered or spayed?</label>
<div class="checkbox">
<label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label>
</div>
</div>
</div>
I am trying to create a form that looks like this:
What I have come up with looks like this. I either can have the dropdown take up the correct amount of space, but then the text is underneath, or have the text next to the dropdown and everything gets smushed.
I'm not sure what I'm doing wrong. Here is the html:
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<div class="form-group">
<select class="liveSyncSchedule form-control"></select>
</div>
<div class="form-group">{{t "templates.scheduler.seconds"}}</div>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
All help is greatly appreciated!
The layout is messed because form-group class is not handled properly. Try this,
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<select class="liveSyncSchedule form-control"></select>
<span>{{t "templates.scheduler.seconds"}}</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
</form>
Thanks!
Here is a simplified fiddle: https://jsfiddle.net/mz1xgr38/
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Fire every</label>
<div class="col-sm-9">
<div class="row">
<div class="col-md-6">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-md-6">
Seconds
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9 ">
<div class="checkbox">
<label>
<input type="checkbox" />Enabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Persisted
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Misfire policy</label>
<div class="col-sm-9">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</form>
The following code is written for a form but the from is not properly aligned in bootstrap.
Although i have divided the form in rows but what i do not understand is that how is the first column not properly aligned. I tried a lot of things but could not figure it out.
Pl help me make this alright!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<form >
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Roll number:</label>
<div class="col-sm-2">
<input type="text" class="form-control" >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">School code:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Year Of Passing:</label>
<div class="col-sm-2"><input type="text" class="form-control" >
</div></div></div>
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">First Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Middle Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control" >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Last Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control" >
</div></div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Father's First name:</label>
<div class="col-sm-2"><input type="text" class="form-control" >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Father's Middle name:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div>
<div class="form-group ">
<label class="col-sm-2 ">Father's Last name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Mother's First name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Mother's Middle name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Mother's Last name:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Gender:</label>
<div class="col-sm-2"><select class="form-control" >
<option>Male</option>
<option>Female</option>
</select>
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Mobile Number:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Aadhar Number:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Email:</label>
<div class="col-sm-2"><input type="email" class="form-control " >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">DOB:</label>
<div class="col-sm-1"><select class="form-control " >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="col-sm-2"><select class="form-control " >
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
</div>
<div class="col-sm-2"><select class="form-control " >
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div></div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2 ">Religion:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Age:</label>
<div class="col-sm-2"><input type="text" class="form-control " >
</div></div>
<div class="form-group">
<label class="col-sm-2 ">Category:</label>
<div class="col-sm-2"> <input type="text" class="form-control " >
</div></div></div>
</form>
</body>
</html>
I encountered this while working with django-bootstrap3, using the {% bootstrap_field form.attribute %} template tag.
The problem is that you're using too many form-group tags. You only need one surrounding the entire group of form inputs. After removing the tags, and deleting the now-superfluous divs, I get the following code, which renders without the misalignment of the second and following columns compared to the first:
<div class="container-fluid">
<form >
<div class="form-group">
<div class="row">
<label class="col-sm-2 ">Roll number:</label>
<div class="col-sm-2"><input type="text" class="form-control" ></div>
<label class="col-sm-2 ">School code:</label>
<div class="col-sm-2"><input type="text" class="form-control " ></div>
<label class="col-sm-2 ">Year Of Passing:</label>
<div class="col-sm-2"><input type="text" class="form-control" ></div>
</div>
<div class="row">
<label class="col-sm-2 ">First Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control " ></div>
<label class="col-sm-2 ">Middle Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control" ></div>
<label class="col-sm-2 ">Last Name:</label>
<div class="col-sm-2"> <input type="text" class="form-control" ></div>
</div>
</div>
</form>
</div>
This looks right on the webserver setup I am using.
I ran into this issue because I was grouping django-bootstrap {% bootstrap_field form.attribute %}tags into rows, but the default behavior is to create a div with the form-group tag for each form field. I overrode it using form_group_class="" Example:
{% bootstrap_field form.jobNum form_group_class="" field_class="col-md-3" label_class="col-md-2 text-right" %}
The way you use row class is not correct. It should be -
row > col-xs-4 > form-group > col-sm-6
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="col-sm-6">Roll number:</label>
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="col-sm-6">School code:</label>
<div class="col-sm-6">
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="col-sm-6">Year Of Passing:</label>
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
Jsfiddle with form-horizontal and control-label.
https://jsfiddle.net/g6ryga19/
Based on your layout I would recommend adding form-horizontal to your <form> and adding control-label to all of your labels. In addition, I would re-organize your form into 3 separate columns like so:
<form class="form form-horizontal">
<div class="col-sm-4">
<div class="form-group">
<label class="col-sm-3 control-label">Roll number:</label>
<div class="col-sm-9"><input type="text" class="form-control" ></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="col-sm-3 control-label">School code:</label>
<div class="col-sm-9"><input type="text" class="form-control " ></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="col-sm-3 control-label">Year Of Passing:</label>
<div class="col-sm-9"><input type="text" class="form-control" ></div>
</div>
</div>
</form>
Note: form-horizontal changes the behavior of form-group and causes it to mimic row so you can avoid an additional <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.