I have an html page that references bootstrap's datetimepicker. The calendar is displayed at the bottom of the page when the input is clicked. How do I display it right below the input field?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<!-- datetime picker -->
<!-- Include Bootstrap CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include Moment.js CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<!-- Include Bootstrap DateTimePicker CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div style="margin:100px">
<div style="margin-bottom: 3em;">
<div style="float:left; margin-right: 5em;">
<label id="startDateTimeLabel">Start DateTime</label>
<input class="form-control"
type="text" id="startDateTime" style="width:200px"/>
</div>
<div>
<label id="endTimeLabel">End DateTime</label>
<input class="form-control"
type="text" id="endDateTime" style="width:200px"/>
</div>
</div>
</div>
<script>
$("#startDateTime").datetimepicker({
format: 'MM/DD/YYYY HH:mm:ss',
defaultDate: new Date(),
});
$("#endDateTime").datetimepicker({
format: 'MM/DD/YYYY HH:mm:ss',
defaultDate: new Date(),
});
</script>
</body>
</html>
Any help is appreciated.
You should wrap the datetimepicker into a relative position div:
<div style="position: relative;">
<div style="float:left; margin-right: 5em;">
<label id="startDateTimeLabel">Start DateTime</label>
<input class="form-control" type="text" id="startDateTime" style="width:200px"/>
</div>
</div>
<div style="position: relative;">
<div style="float:left; margin-right: 5em;">
<label id="endTimeLabel">End DateTime</label>
<input class="form-control" type="text" id="endDateTime" style="width:200px"/>
</div>
</div>
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>
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).
I am a first-try bootstrap guy. The thing i want to achieve is to have labels and inputs same line nice and clean.
Anyone can explain me why in the below example labels are still above inputs? Am i doing something wrong?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta application-name="Test-System">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Bootstrap Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- jQuery UI from Google CDN -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<title></title>
</head>
<body>
<form class="form-horizontal">
<div class="control-group">
<label for="input1" class="control-label">Label</label>
<div class="controls">
<input id="input1" type="text">
</div>
</div>
<div class="control-group">
<label for="input2" class="control-label">Label</label>
<div class="controls">
<input id="input2" type="text">
</div>
</div>
</form>
<!-- jQuery from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jQuery UI from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</body>
</html>
<div class="controls">
<label for="input1" class="control-label">Label</label>
<input id="input1" type="text">
</div>
Is this what you are looking for?
EDIT
Horizontal label from outside of input's div.
<div class="control-group">
<label for="input1" class="control-label col-sm-2">Label</label>
<div class="controls col-sm-10">
<input id="input1" type="text">
</div>
</div>