I am having trouble getting the Bootstrap Datepicker calendar to anchor/popup below the entry textbox. Any advice?
Here is my markup, etc.:
<head>
...
<!-- Bootstrap: Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap: Datepicker Plugin -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css" rel="stylesheet">
...
</head>
<body>
...
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="tour_date">Service Date</label>
<div class="input-group date col-md-2">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<label class="col-md-2 control-label" for="tour_time">Service Time</label>
<div class="input-group bootstrap-timepicker timepicker col-md-2">
<input id="timepicker" type="text" class="form-control input-small" data-minute-step="30">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>
</div>
...
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Bootstrap: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Bootstrap: Bootstrap Datepicker Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script>
$('#tickets .input-group.date').datepicker({
autoclose: true,
todayHighlight: true,
datesDisabled: ['01/01/1970', '12/31/2099']
});
</script>
</body>
Screen Shot - My Behavior
Screen Shot - Desired Behavior
Amended with added styling issues:
Related
I am calling the datetime picker to enter the date in dd/mm/yyyy format. I am using the following css and js file in layout file
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<style rel="stylesheet"
href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"></style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
#*<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>*#
my view file is given below
<script>
$("#TaxDate").datepicker({ dateFormat: "dd/MM/yy" });
$("#MOTDate").datepicker({ dateFormat: "dd/MM/yy" });
$("#InsuredDate").datepicker({ dateFormat: "dd/MM/yy" });
$("#RegDate").datepicker({ dateFormat: "dd/MM/yy" });
</script
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Vehicles.MOTDate" class="control-label col-3 col-form-label">MOT Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="MOTDate"
asp-for="Vehicles.MOTDate" />
<span asp-validation-for="Vehicles.MOTDate" class="text-danger">#ViewBag.moterror</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Vehicles.TaxDate" class="control-label col-3 col-form-label">Tax Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="TaxDate"
asp-for="Vehicles.TaxDate" />
<span asp-validation-for="Vehicles.TaxDate" class="text-danger">#ViewBag.taxerror</span>
</div>
</div>
</div>
</div>
But when I run the published site in azure , the date time 'dd/mm/yyyy' format is not working. it is still working as 'mm/dd/yyyy' .
If am going to run in application in localserver it will work . When I run azure it is not working please help to fix
UPDATE
This problem was finally solved by modifying CultureInfo. The sample code is as follows.
Setting the following in StartUp.Configure
var cultureInfo = new CultureInfo("en-US");
CultureInfo.DefaultThreadCurrentCulture = cultureInfo;
CultureInfo.DefaultThreadCurrentUICulture = cultureInfo;
PRIVIOUS
Usually we solve this problem, first ensure that there is no problem with the published file, you can use other methods such as FTP to publish, local testing and deployment to Azure testing.
enter image description hereenter image description hereAm using materializecss plugins for forms. Its working fine in html page but while I used in .Net core MVC view select option dropdown is not working. its shows error in console..enter image description here
'code'
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="~/css/materialize.min.css" rel="stylesheet" />
<script src="~/js/jquery.min.js"></script>
<script src="~/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('select').formSelect();
$('.datepicker').datepicker();
});
</script>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>
I did a test using Materialize plugins in .NET Core MVC view page, which work well on my side, please refer to it.
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>
#section scripts{
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$('select').formSelect();
$('.datepicker').datepicker();
</script>
}
You can create a new view page and include materialize from CDN as I did in above sample, then test if it can work well within your project. Besides, to check if any conflicts with other jquery files (referenced in layout file) cause the issue, please set Layout = null; to use no layout for your view page.
I am currently working with Bigcommerce's Built-in Blog. Everything is working fine now except the pagination. I tried to remove and bring it back and I even tried to place it on the bottom of the page. But still not working. I am not good with jQuery nor JavaScript, so please bear with me. Here's the existing code that I am currently working on:
the website's link is here:
http://abulafia4.mybigcommerce.com/blog/
<body class="blog" id="blog-main">
<!-- Facebok Plugin -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- added this for the custom css of the blog page -->
<link href="%%Asset_Styles/custom-blog.css%%" rel="stylesheet" type="text/css" />
<link href="%%Asset_Styles/bootstrap.min.css%%" rel="stylesheet" type="text/css" />
<div class="page-wrap">
%%Panel.Header%%
<div class="container">
<div class="row">
%%Panel.WrapperBanner%%
<div class="col-lg-9 col-md-9 col-sm-12">
<h1 class="TitleHeading">%%GLOBAL_BlogName%%</h1><!-- built in blog codes started here -->
<div class="PageContent">
%%SNIPPET_RecentPostsContent%%
<div class="product-nav btm">
<div class="Moveable Panel PagingBottom" id="CategoryPagingBottom">
<div class="CategoryPagination BloggingPagination" >
<ul class="pagination">
<li>Pages</li>
AAAAAAAA
<!-- %%GLOBAL_SectionPaging%%
%%GLOBAL_SectionPagingPrevious%%
%%GLOBAL_SectionPagingNext%% -->
</ul>
</div>
</div>
<br class="Clear">
</div>
</div><!-- built in blog codes ends here -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 sidebar-border">
<div class="row">
<!-- SEARCH BAR FOR BLOG ARTICLE -->
<div class="col-lg-12 col-md-12 col-sm-12 sidebar-widget">
%%Panel.BlogRecentPosts%%
</div>
<div class="clear"></div>
<div class="col-lg-12 col-md-12 col-sm-12 sidebar-widget">
%%Panel.FacebookPlugin%%
</div>
<div class="clear"></div>
<div class="col-lg-12 col-md-12 col-sm-12 sidebar-widget">
%%Panel.FollowUs%%
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
%%Panel.Footer%%
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-59ccab5868d78bdc"></script>
</body>
</html>
I am having a problem here with the mobile display. I want the form input to show the input bar very large. It shows it fine on desktop any size window I make it. But the second I look at it on a mobile device if it is vertical the form input is no where near as large and you have to zoom to see it. But the second I turn the phone horizontal it shows it fine.
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-sm-8 col-lg-8 center-block">
<form action="{{url_for('check')}}" method="POST">
{{ form.url(placeholder=form.url.description, class="form-control input-lg") }}
</form>
</div>
</div>
</div>
After a while I was able to figure it out. This was missing in the header.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can make the input field take up the whole available width by using class col-xs-12.
<!--- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!--- personal styles should always be below Bootstrap Core CSS -->
<!--<link rel="stylesheet" href="css/theme.css">-->
<!--- Google fonts-->
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-8 center-block">
<form action="{{url_for('check')}}" method="POST">
<input type="text" name="username" value="" class="form-control input-lg" />
</form>
</div>
</div>
</div>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
I am trying to test that a link dose exist on the page,
I tried to check all the nesting tags that contain the link tag like that:
response.body.should have_selector("div.page_margins div.page div#nav div.hlist ul li#2")
and it passes correctly, but, if I added the link tag to the test like this:
response.body.should have_selector("div.page_margins div.page div#nav div.hlist ul li#2 a",:text => "Next")
I get the error:
expected css "div.page_margins div.page div#nav div.hlist ul li#2 a#next_page"
with text "Next" to return something
If I test it with have_link like this:
response.body.should have_link("div.page_margins div.page div#nav div.hlist ul li#2 a#next_page")
I get the error:
expected link "div.page_margins div.page div#nav div.hlist ul li#2
a#next_page" to return something
Can any body help please ? I love rails, but, I still need a hand to get along with testing ..
EDIT
Here is the page.html, I've noticed that the html in content_for in which the link is rendered is not rendered in yield
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<title></title>
<script src="/assets/application.js" type="text/javascript"></script><link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
//<![CDATA[
var auto_log_off = false;
//]]>
</script><script type="text/javascript">
//<![CDATA[
var student_logged = false;
//]]>
</script><script src="/assets/sessions.js" type="text/javascript"></script><!-- add your meta tags here --><link href="/assets/application_yaml/css/my_layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 7]> <![endif]--><link href="/assets/application_yaml/css/patch_my_layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page_margins">
<div id="topnav">
<!-- start: skip link navigation -->
<a class="skip" href="#navigation" title="skip link">Skip to the navigation</a>
<span class="hideme">.</span>
<a class="skip" href="#content" title="skip link">Skip to the content</a>
<span class="hideme">.</span>
<!-- end: skip link navigation -->
</div>
<!-- start: skip link navigation -->
<!-- end: skip link navigation -->
<div class="page">
<div id="header">
<h1>Welcome to course builder!!</h1>
<p>Home</p>
</div>
<div id="nav">
<!-- skiplink anchor: navigation -->
<a id="navigation" name="navigation"></a>
<div class="hlist">
<!-- main navigation: horizontal list -->
<div class="quiz_review_buttons">
<!--
<ul>
<li class="active"><strong>Button 1</strong></li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
-->
</div>
<!-- <ul> -->
<!-- <li class="active"><strong>Button 1</strong></li> -->
<!-- <li>Button 2</li> -->
<!-- <li>Button 3</li> -->
<!-- <li>Button 4</li> -->
<!-- <li>Button 5</li> -->
<!-- </ul> -->
</div>
</div>
<div id="main">
<div id="col1">
<div class="clearfix" id="col1_content">
<!-- add your content here -->
<div class="debug_div">
<p>
<b>
devise/sessions#new
</b>
</p>
</div>
</div>
</div>
<div id="col3">
<div class="clearfix" id="col3_content">
<!-- add your content here -->
<div class="alert" id="notice_alert">You need to sign in or sign up before continuing.</div>
<script type="text/javascript"></script><!-- <div style="clear:both"></div> --><h2>Sign in for student</h2>
<form accept-charset="UTF-8" action="/students/sign_in" class="student_new" id="student_new" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
<div>
<label for="student_email">Email</label><br><input id="student_email" name="student[email]" size="30" type="email" value="">
</div>
<div>
<label for="student_password">Password</label><br><input id="student_password" name="student[password]" size="30" type="password">
</div>
<div>
<input name="student[remember_me]" type="hidden" value="0"><input id="student_remember_me" name="student[remember_me]" type="checkbox" value="1"><label for="student_remember_me">Remember me</label>
</div>
<div><input name="commit" type="submit" value="Sign in"></div>
</form>
Sign up<br>Forgot your password?<br>
</div>
<!-- IE Column Clearing -->
<div id="ie_clearing"> </div>
</div>
</div>
<div id="footer">
Layout based on
YAML
</div>
</div>
</div>
</body>
</html>
"expected to return something" just means that capybara couldn't find the element it was looking for. Hard to say why without seeing the html that capybara is searching
Note that the argument to have_link is not a css selector, it should be the text, id, title, or image alt attribute of the link.
Also, in controller specs, make sure you call render_views when checking markup.
.