How come when I load my app via a mobile device the h1 is cut off - I am using the Twitter BS:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<title>Birthday App</title>
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="cordova-2.5.0.js"></script>
<script src="js/index.js"></script>
<script src="js/app.js"></script>
<script src="js/bootstrap.js"></script>
<script>
app.initialize();
</script>
</head>
<body ng-app="birthdayToDo" ng-controller="main">
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Birthday Reminders</h1>
</div>
<ul class="unstyled" ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<button class="btn" type="button" ng-click="remove($index)">Delete</button>
</form>
</li>
</ul>
<form ng-show="visible" ng-submit="newBirthday()">
<label>Name:</label>
<input type="text" ng-model="bdayname" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bdaydate" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
</form>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a>
</div>
</div>
</body>
</html>
The responsive stylesheet needs to override some styles in bootstrap.css. Including the bootstrap-responsive css after bootstrap.css should fix your issue.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Win the week web portal portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js">
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-sm-8">
<img class="img-fluid" src="{{url_for('static',filename='images/image.png')}}" id="sideimage">
</div>
<div class="col-sm-4">
<div class="container" id ="inbound1">
<h3 id="tophead1">WELCOME TO</h2><br>
<h2 id="tophead2">Win The Week Web<sup id="sup">TM</sup> Portal</h2>
<h5 id="tophead3">Scorecard</h5>
<img class="img-fluid" src="{{url_for('static', filename='images/logo.png')}}" id="logo">
</div>
<div class="container" id ="inbound2">
<form action="#" method="post" name="formdata">
<label for="username" id="label1"><strong>Username:</strong></label>
<input type="email" name="username" id="username" required>
<br>
<label for="password" id="label2"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" required>
<br>
<div class="container">
<button class="btn btn-primary" id="login" name="login" type="submit" value="Login">Login</button>
</div>
<h4 id="tophead4" >Forgot password?
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The code above does contains the body part but it is not showing in the debugger console. I tried remove caching, installing different browsers, but all in vain.
I am trying to learn flask and that is why the url path is specified differently.
You are missing a </script> tag in your header this will fix the problem you are having.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Win the week web portal portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-sm-8">
<img class="img-fluid" src="{{url_for('static',filename='images/image.png')}}" id="sideimage">
</div>
<div class="col-sm-4">
<div class="container" id ="inbound1">
<h3 id="tophead1">WELCOME TO</h2><br>
<h2 id="tophead2">Win The Week Web<sup id="sup">TM</sup> Portal</h2>
<h5 id="tophead3">Scorecard</h5>
<img class="img-fluid" src="{{url_for('static', filename='images/logo.png')}}" id="logo">
</div>
<div class="container" id ="inbound2">
<form action="#" method="post" name="formdata">
<label for="username" id="label1"><strong>Username:</strong></label>
<input type="email" name="username" id="username" required>
<br>
<label for="password" id="label2"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" required>
<br>
<div class="container">
<button class="btn btn-primary" id="login" name="login" type="submit" value="Login">Login</button>
</div>
<h4 id="tophead4" >Forgot password?
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to create a inline form, but its not styling correctly.
Below is the code I am using:
body {
background-color: #a7cdf2;
}
#map {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form class="inline" action="" method="post" name="search">
<input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
<datalist id="id_datalist">
<option value="CLARENVILLE, CA">
</datalist>
<div class="form-group">
<label for="origin">Origin:</label>
<input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
</div>
<div class="form-group">
<label for="speed">Speed (knots):</label>
<input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
This is how it renders in Chrome:
It seems your boostrap links are incorrect... I played around with your code and replaced the links and it worked fine. It looks like either you have put the downloaded files in the wrong place, or perhaps the example you found wasn't clear. When the src has a value like /static/css/bootstrap.min.css it is looking at the files on the server hosting the site. Perhaps you should use CDN links instead?
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
body {
background-color: #a7cdf2;
}
#map {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form class="inline" action="" method="post" name="search">
<input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
<datalist id="id_datalist">
<option value="CLARENVILLE, CA">
</datalist>
<div class="form-group">
<label for="origin">Origin:</label>
<input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
</div>
<div class="form-group">
<label for="speed">Speed (knots):</label>
<input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
Why would the label and Field (just a wrapper for input) not display on the same line?
I believe that I'm following the simple instructions found here: https://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp
<div className="container">
<div className="row">
<label htmlFor="something" className="col-sm-2 col-form-label">Somethingwefwef</label>
<Field className="col-sm-10" name="something" type="text" component="input" className="form-control" />
</div>
</div>
your whole mark-up is problematic. Try to follow the tutorial carefully.
You should do it like this
<html>
<head>
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="row">
<label For="something" class="col-sm-2 form-label">Somethingwefwef</label>
<input class="col-sm-10" name="something" type="text" class="form-control" />
</div>
</div>
</body>
</html>
please see this picture!
I'm trying to align 'form element' to center.
here is what I tried.
1.I used .form-inline {margin: 0 auto;}2. added text-center in form class="form-inline"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<form class="form-inline">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email"> </div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="library/tether-master/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
< /html>
Could you please help me to find-out a solution of it?
Try the following CSS:
.form-inline {
margin: 0 auto;
display: table;
}
if your are using twitter-bootstrap why you not center with bootstrap elements ????? Offsetting columns
.com/css/#grid-offsetting
here is the Bootstrap solution, and its responsiv!
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container jumbotron">
<div class="row ">
<div class="col-sm-8 col-sm-offset-4 column">
<form class="form-inline">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email"> </div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
</div>
</div>
</body>
</html>
I'm currently working on an redmine app.
I want the page to be responsive, but it doesn't really work, although I have the meta tag included.
The Redmine header/banner is not shown on the page, but I noticed that the code is still there. Maybe this is the problem? If so, how can I fully remove the code for this page?
This is the code of the page:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Redmine</title>
<meta name="description" content="Redmine" />
<meta name="keywords" content="issue,bug,tracker" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="zAhdWOwD3KiOanSXnXiNPIT0NzBRFQwbsH1y4wkiqww=" name="csrf-token" />
<link rel='shortcut icon' href='/favicon.ico?1459352855' />
<link href="/stylesheets/jquery/jquery-ui-1.11.0.css?1459352855" media="all" rel="stylesheet" type="text/css" />
<link href="/stylesheets/application.css?1459352855" media="all" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.11.1-ui-1.11.0-ujs-3.1.3.js?1459352855" type="text/javascript"></script>
<script src="/javascripts/application.js?1459352855" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){ warnLeavingUnsaved('Die aktuellen Änderungen gehen verloren, wenn Sie diese Seite verlassen.'); });
//]]>
</script>
<!-- page specific tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="/plugin_assets/redmine_mtr/stylesheets/styles.css?1459353025" media="screen" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=20, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body class="controller-mtr_account action-mtr_login">
<div id="wrapper">
<div id="wrapper2">
<div id="wrapper3">
<div id="top-menu">
<div id="account">
<ul><li>Anmelden</li>
<li>Registrieren</li></ul> </div>
<ul><li>Hauptseite</li>
<li>Projekte</li>
<li>Hilfe</li></ul></div>
<div id="header">
<div id="quick-search">
<form accept-charset="UTF-8" action="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for='q'>
Suche:
</label>
<input accesskey="f" class="small" id="q" name="q" size="20" type="text" />
</form>
</div>
<h1>Redmine</h1>
</div>
<div id="main" class="nosidebar">
<div id="sidebar">
</div>
<div id="content">
<div id="login-form" class="col-sm-12 modal show" tabindex="-1" role="dialog" aria-hidden="true">
<form accept-charset="UTF-8" action="/mtr/login" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="zAhdWOwD3KiOanSXnXiNPIT0NzBRFQwbsH1y4wkiqww=" /></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="container col-md-12">Login</h1>
<h5 class="container col-md-12">Mobile Time Recording</h5>
</div>
<div class="modal-body form-group">
<div style="padding-top: 5px;">
<input class="login-input" id="username" name="username" style="width: 100%" tabindex="1" type="text" />
</div>
<div style="padding-top: 5px;">
<input class="login-input" id="password" name="password" style="width: 100%" tabindex="2" type="password" />
</div>
<div style="padding-top: 5px;">
<input type="submit" style="height: 38px" class="form-control input-lg btn btn-danger"
name="loginMtr" value="Anmelden »" tabindex="5"/>
</div>
</div>
</div>
</div>
</form></div>
<script type="text/javascript">
//<![CDATA[
$('#username').focus();
//]]>
</script>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="ajax-indicator" style="display:none;"><span>Lade...</span></div>
<div id="ajax-modal" style="display:none;"></div>
<div id="footer">
<div class="bgl"><div class="bgr">
Powered by Redmine © 2006-2015 Jean-Philippe Lang
</div></div>
</div>
</div>
</div>
</body>
</html>
I would first recommend that you use bootstrap and jQuery CDN rather then the files. The reason for this is to help with your asset pipeline and also to future proof your code - for example... if your jQuery lib goes out of date - you would have to manually go back and update it. Rather then just attaching a CDN and its forgetting it.
Second its best practice to always move all your JavaScript src tags to the end of your page before the ending </body> tag.
Also if you could update the problem with an error that you are running into - that may be a bit more helpful. Its best if you keep your developer tools open when making a website (helps to see what errors you run into on the DOM).