i have a problem with difference in render html between IE9 and Chrome.
I reviewed all urls of .js and .css and are fine. All files were downloaded from the official website.
This pic is from IE9
This pic is from Chrome
This is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="public/assets/ico/favicon.png" />
<title>SMG</title>
<!-- Bootstrap core CSS -->
<link href="public/dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<link href="public/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="public/assets/js/html5shiv.js"></script>
<script src="public/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">SMG</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" id="dni" data-container=".form-group" data-toggle="popover" data-content="" data-placement="bottom" placeholder="Numero" class="form-control">
</div>
<div class="form-group">
<input type="password" id="password" data-container=".form-group" data-toggle="popover" data-placement="bottom" data-content="Ingrese su Contraseña" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<select class="selectpicker" data-width="200px" title="Tipo de Documentacion" data-style="btn-inverse">
<option data-hidden="true"></option>
<option value="DU">DNI</option>
<option value="LC">LC</option>
<option value="LE">LE</option>
<option value="PA">PA</option>
</select>
</div>
<div class="form-group">
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-success btn-xs">Ingresar</button>
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-danger btn-xs">Registrarse</button>
</div>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<br/>
<div class="alert alert-block alert-danger " style="display: none">
<button type="button" class="close" aria-hidden="true">×</button>
<h4></h4>
</div>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
</div>
</div> <!-- /container -->
<script src="public/js/jquery.js"></script>
<script src="public/dist/js/bootstrap.min.js"></script>
<script src="public/js/bootstrap-select.min.js"></script>
</body>
</html>
dont know why. Can anyone lend me a hand? Thank you!
Related
I have created a JSP page where I want to use the CSS properties I have written in a custom CSS file in my SpringBoot project. But unfortunately SpringBoot is not reading the custom CSS file. In a similar vein it is also not reading the CSS files of Bootstrap, hence I am having to link to its CDN instead.
I have read solution to similar to my question here but none of the solutions worked for me. Not sure if these solutions work case specific.
Directory Structure
- src
- main
- java
- resources
- static
- css
- style.css
- webapp
- WEB-INF
- views
- addCountry.jsp
addCountry.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<title>Add Country</title>
</head>
<body>
<!-- Navbar Code Starts Here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="http://localhost:8080/WorldAtlas/">World Atlas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="http://localhost:8080/WorldAtlas/addCountry">Add Country</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar Code Ends Here -->
<!-- Add Country Form Code Starts Here -->
<div class="container wrapper">
<form action="saveCountryData" method="POST">
<div>
<input type="text" name = "country" class="form-control" placeholder="Country">
<input type="text" name = "capital" class="form-control" placeholder="Capital City">
<input type="text" name = "isocode" class="form-control" placeholder="ISO Code">
<input type="text" name = "area" class="form-control" placeholder="Area">
<select name = "continent" class="form-control">
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
<input type="text" name = "currency" class="form-control" placeholder="Currency">
<input type="text" name = "extension" class="form-control" placeholder="Extension">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Add Country Form Code Ends Here -->
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous">
</body>
</html>
Use this way <link rel="stylesheet" type="text/css" href="css/style.css" />
I have a problem with Internet Explorer and HTML code. With Chrome, Edge and firefox all work fine, but in Explorer I have this
instead of
In debug mode I see some error into html code only with explorer:
-Translate:
It has been found tag in excess. In a document is allowed only one body tag.
element or end not expected. All the elements opened have to be closed before the second document end.
Token not expected
The body tag is added by browser. All other page works fine. Do you see something wrong in my code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- Spring csrf -->
<meta name="_csrf" th:content="${_csrf.token}" />
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fleets & cars</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap Core CSS -->
<link th:href="#{/static/assets/bootstrap/css/bootstrap.css}"
rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
th:href="#{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}">
<!-- DataTables -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/dataTables.bootstrap.css}">
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}">
<!-- Theme style -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/AdminLTE.min.css}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/skins/_all-skins.min.css}">
<!-- Select2 angular -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/select2Angular/select.css}">
<!-- jQuery 2.1.4 -->
<script th:src="#{/static/assets/plugins/jQuery/jQuery-2.1.4.min.js}"
type="text/javascript"></script>
<!-- Bootstrap 3.3.5 -->
<script th:src="#{/static/assets/bootstrap/js/bootstrap.min.js}"
type="text/javascript"></script>
<!-- DataTables -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"></script>
<!-- Slimscroll -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/fastclick/fastclick.min.js}"></script>
<!-- Bootstrap-growl -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"></script>
<!-- AdminLTE App -->
<script type="text/javascript"
th:src="#{/static/assets/dist/js/app.min.js}"></script>
<!-- Angularjs -->
<script th:src="#{/static/assets/js/angular.min.js}"
type="text/javascript"></script>
<!-- Select2 angular -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/select2Angular/select.js}"></script>
<!-- Waiting modal -->
<script
th:src="#{/static/assets/plugins/waiting-modal/waiting-modal.js}"
type="text/javascript"></script>
<script type="text/javascript"
th:src="#{/static/assets/js/fleetAndCar.js}"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="myApp">
<input type="hidden" id="role"
th:value="${#authentication.getAuthorities()}">
<div class="wrapper" data-ng-controller="createFleetController"
id="createFleetControllerId">
<!-- Header nd menu fragment -->
<div th:replace="../fragments/dashboard-header :: dashboard-header"></div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Fleets Management</h1>
<ol class="breadcrumb">
<li><a th:href="#{/}"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Fleets management</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Fleets</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Fleets table -->
<table id="fleetsTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>Application</th>
<th>Cubic</th>
<th>Power</th>
<th>Euro class</th>
<th>Engine Type</th>
<th>Traction</th>
<th>Transmission</th>
<th>Managed by</th>
<th>Cars</th>
<th>Add User</th>
<th>Delete</th>
</tr>
</thead>
</table>
<!-- Create two equals button because when I am on desktop I show the text add fleet otherwise the + and the tooltip.
This is need because otherwise the text goes out the button -->
<button id="addFleetButton" type="button"
class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11"
data-toggle="modal" data-target="#addFleetModal">Add
fleet</button>
<button id="addFleetButton" type="button"
class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11"
data-toggle="modal" data-target="#addFleetModal">
<span class="glyphicon glyphicon-plus" data-toggle="tooltip"
title="Add fleet"></span>
</button>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- Modal to add car -->
<div class="modal" id="addFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Fleet parameters</h4>
</div>
<div class="modal-body">
<!-- form start -->
<form novalidate class="simple-form" name="newFleetForm">
<div class="box-body">
<div class="form-group">
<label>Application</label> <input
data-ng-model="newFleet.application" id="application"
type="text" class="form-control" placeholder="Application"
name="application" required>
</div>
<div class="form-group">
<label>Cubic</label> <input id="cubic"
data-ng-model="newFleet.cubic" type="text"
class="form-control" placeholder="Cubic" required>
</div>
<div class="form-group">
<label>Power</label> <input data-ng-model="newFleet.power"
id="power" type="number" min="0" step="1" class="form-control"
placeholder="Power" required>
</div>
<div class="form-group">
<label>Euro class</label> <input
data-ng-model="newFleet.euroClass" id="euroClass" type="text"
class="form-control" placeholder="Euro Class" required>
</div>
<div class="form-group">
<label>Engine type</label> <input
data-ng-model="newFleet.engineType" id="engineType"
type="text" class="form-control" placeholder="Engine type"
required>
</div>
<div class="form-group">
<label>Traction</label> <input
data-ng-model="newFleet.traction" id="traction" type="text"
class="form-control" placeholder="Traction" required>
</div>
<div class="form-group">
<label>Transmission</label> <input
data-ng-model="newFleet.transmission" id="transmission"
type="text" class="form-control" placeholder="Transmission"
required>
</div>
<div class="form-group">
<label>Note </label>(optional)
<textarea data-ng-model="newFleet.note" class="form-control"
rows="3" maxlength="1000"></textarea>
</div>
<div class="form-group" id=existingEcu>
<label>Ecu</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newFleet.ecu" required> <ui-select-match
placeholder="Select ecu">
{{$select.selected.note}}</ui-select-match> <ui-select-choices
repeat="ecu.idEcu as ecu in (ecuList | filter: $select.search) track by ecu.note">
<span data-ng-bind="ecu.note"></span> </ui-select-choices> </ui-select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button data-ng-disabled="newFleetForm.$invalid"
data-ng-click="createFleet(newFleet)" id="createFleetButton"
type="button" class="btn btn-primary">Create fleet</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal delete Fleet -->
<div class="modal" id="deleteFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Delete fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">Are you sure? The fleet will be
deleted permanently, you won't be able to recover it.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok"
data-ng-click="deleteFleet()" id="deleteFleetButton">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal delete User from Fleet -->
<div class="modal" id="deleteUserFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Delete user from fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">
Are you sure to remove <label data-ng-bind="user"></label>
management from fleet <label data-ng-bind="fleetApplication"></label>?
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok"
data-ng-click="deleteUserFleet(user,fleetId)"
id="deleteUserFleetButton">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal add User from Fleet -->
<div class="modal" id="addUserFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Add user to fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div class="form-group" id=fleetUser>
<label>Select user</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="username" required> <ui-select-match>
{{$select.selected}}</ui-select-match> <ui-select-choices
repeat="username in (fleetUserList | filter: $select.search) track by username">
<span data-ng-bind="username"></span> </ui-select-choices> </ui-select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-primary btn-ok"
data-ng-click="addUserFleet(username)" id="addUserFleetButton">Add</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
I'm using Bootstrap 3.1.1 and my login page is not responsive under 768px.
The page is breaking as shown in the pictures:
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>MY Site</title>
<link href="~/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon" />
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<meta content='Saúde Inteligente Móvel' name='description'>
<link href='~/favicon.ico?v=2' rel='shortcut icon' type='image/x-icon'>
<link href='~/assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
<link href='~/assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
<link href='~/assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
<link href='~/assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
<link href='~/assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
<!-- / START - page related stylesheets [optional] -->
<!-- / END - page related stylesheets [optional] -->
<!-- / bootstrap [required] -->
<link href="~/Content/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="~/Content/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="~/Content/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
<script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
<![endif]-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/site-css")
#Scripts.Render("~/bundles/libs/modernizr")
</head>
<body class='contrast-blue login contrast-background'>
<div class='middle-container' style="display: none" data-bind="visible: true">
<div class='middle-row'>
<div class='middle-wrapper'>
<div class='login-container-header'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<h1 class="text-primary"><img src="~/Images/logo-sim.png" height="160" width="225" /></h1>
</div>
</div>
</div>
</div>
</div>
<div class='login-container'>
<div class='container'>
<div class='row' data-bind="validationOptions: {
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true
}">
<div class='col-sm-4 col-sm-offset-4'>
<h1 class="text-center">
</h1>
<div class="row">
<div class='col-sm-12'>
<div class="validation-summary" data-bind="visible: model().isAnyMessageShown()">
<ul>
<li data-bind="validationMessage: model().Email"></li>
<li data-bind="validationMessage: model().Senha"></li>
</ul>
</div>
</div>
</div>
<form>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="Senha" class="form-control" data-bind="value: model().Senha" name="password" type="password" />
<i class='icon-lock text-muted'></i>
</div>
</div>
<div class='checkbox'>
<label for='remember_me'>
<input id='remember_me' name='remember_me' type='checkbox' data-bind="checked: model().CookiePersistente">
Lembrar de mim
</label>
</div>
<button class='btn btn-block' data-bind="click: submit">Entrar</button>
</form>
<div class='text-center'>
<hr class='hr-normal'>
#Html.ActionLink("Esqueceu sua senha?", "EsqueciSenha", "Login")
</div>
</div>
</div>
</div>
</div>
<div class='login-container-footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<img src="~/Images/logo-rodape.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/libs/jquery")
#Scripts.Render("~/bundles/libs/base")
<script type="text/javascript">
RouteUtility.rootPath = '#Url.Action("Index", "Home")';
</script>
<script type="text/javascript" src="#Url.Content("~/Scripts/pages/login.js")"></script>
</body>
</html>
EDIT:
After adding col-xs-* as suggested, a weird behaviour is happening.
When I add col-xs-*, the fields will fit only with 768px and up. If it's under 768px they will grow!!
It's totally the opposite!
How to fix this?
Under 768px: http://postimg.org/image/d0zcna7bf/
768px and up: http://postimg.org/image/56isu0qtt/
thiago Hi there.
Have a look around line number 60 in you code for this...
<div class='col-sm-4 col-sm-offset-4'>
When your screen size hits this breakpoint it will expand to 100% width because you are not controlling/using the col-xs-XX class here.
If you add this to your code like this...
<div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
for the line of code around line 60 and resize the window, you will see you have control.
This line of code you are using it is used to wrap the Form block, to set the width of this Form.
You just need to take control of this at all breakpoints.
Hope this helps.
Added to this
This is what I get when resized.
Using... <div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
You can control the width for xs device adding eg col-xs-6 :
<div class='form-group'>
<div class='controls with-icon-over-input col-xs-6'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
I'm starting to play with javascript for the first time and I turned the index.html of a steroids project into a simple login form but the content is going below the header. I've also tried the <ionic-header-bar><ionic-content> tags but none works. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Gestor de Mesas</title>
<link rel="stylesheet" href="/components/ionic/css/ionic.min.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
</head>
<body class="content">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Lembrar?
</li>
</div>
<button class="button button-positive">
Entrar
</button>
</ion-content>
</body>
</html>
Try adding Class "has-header" to your tag. It'll solve the issue. This is because :
ion-header-bar is positioned absolutely. and hence your lower content goes behind it. .has-header class defines top : 44px, which will move your content down with the required space.
I am writing a PhoneGap application and using Twitter's Bootstrap for responsive design.
The boxes that say campus/account/department are the select boxes. I think it's obvious the problem is how the select boxes are small, and unchangeable when I try things in css like:
select{ height: 30px; /** OR */ lineheight: 30px; }
Screenshot of what the issue is with my select boxes:
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" />
<link rel="stylesheet" type="text/css" href="css/template.css" />
<link rel="stylesheet" type="text/css" href="css/precode.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
<title>P-Card Mobile</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav pull-left">
<li id="titleLogo"><i id="back" class="icon-white icon-angle-left"></i><img src="img/lcbug.png"></img></li>
<li id="titleText"><h4>Blackbriar</h4></li>
</ul>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropDown">Home <i class="icon-white icon-home"></i></li>
<li class="dropDown">Transactions <i class="icon-white icon-credit-card"></i></li>
<li class="dropDown">Settings <i class="icon-white icon-cog"></i></li>
<li class="dropDown"><a id="logoutBtn" href="index.html">Logout <i class="icon-white icon-off"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="templates">
<ul id="templateUl" class="nav nav-pills">
<li class="templi">
<a class="pill">
<text class="temp">Walmart</text>
</a>
</li>
</ul>
</div>
<div id="templateEdit" class="span9">
<form id="codingForm" method="post">
<input id="templateName" type="text" class="tallerInput" placeholder="Template Name" required>
<input id="descriptionField" type="text" class="tallerInput" placeholder="Description" required>
<select id="campusField" required>
<option value="">Campus</option>
</select>
<select id="accountField" required>
<option value="">Account</option>
</select>
<select id="departmentField" required>
<option>Deptartment</option>
</select>
<input id="programNameField" type="text" class="tallerInput" placeholder="Program Name">
<input id="projectIdField" type="text" class="tallerInput" placeholder="Project ID">
<input id="taskIdField" type="text" class="tallerInput" placeholder="Task ID">
<br>
<button id="saveBtn" class="btn btn-large btn-primary">Save</button>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/precodeFunctions.js"></script>
<script type="text/javascript" src="js/precode.js"></script>
</body>
</html>
Update style as follows :
select.custom { min-height: 30px; /** OR */ line-height: 30px; }
change your select tags html as follows :
<select id="accountField" class="custom" required>
<option value="">Account</option>
</select>