I cannot figure out what I am missing here. (Head included for bootstrap reference.)
<head>:
<!-- Bootstrap Complete CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></script>
<!-- Bootstrap Complete JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap Complete JavaScript Bundle -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
Problematic code:
<!-- TopGrid -->
<section id="TopGrid">
<div class="row">
<div class="TopGrid-Box col-lg-4">
<img class="Mask" src="Images\Mask Icon.png" alt="Lineart Face Mask">
<h2>Masks</h2>
<p>Our associates will be wearing masks, and you will be asked to do the same while shopping in our stores. </p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Hands" src="Images\Hand Cleaning Icon.png" alt="Lineart Hand Sanitizer">
<h2> Hands</h2>
<p>Hand sanitizer will be provided as you enter so we can maintain safer shoe displays. Our asociates will also be regularly using sanitizer as well as washing their hands
throughout the day.</p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Surface" src="Images\Surface Cleaning Icon.png" alt="Lineart Cleaning Spray">
<h2> Surfaces</h2>
<p>Our associates will be disinfecting all high-touch surfaces throughout the day, as well as before and after customers.</p>
</div>
</div>
</section>
I am not getting columns at all. Removing the images doesn't affect it, adding a container doesn't affect it, adjusting screen size does not affect it. I'm sure I'm missing something simple, but I don't know what it is.
(There is no CSS currently written for this code, except for the inline bootstrap.)
I have used the Asp.net MVC 5 Razor and angularjs.
Now my view have the layout .That layout contains top and side menu bar.
So when the view load i got nested page top and side bar in the ng-view.How do i resolve this.
If i was tried with another one root view and removed the layout.that was
worked fine.but when i hit F5 loaded the action alone.Master content is missed
_Layout.cshtml
<header ng-include="'/Partials/TopNavbar'" class="topnavbar-wrapper"></header>
<!-- sidebar-->
<aside ng-include="'/Partials/Sidebar'" ng-controller="SidebarController" class="aside"></aside>
<!-- offsidebar-->
<aside ng-include="'/Partials/Offsidebar'" class="offsidebar"></aside>
<!-- Main section-->
<section>
<!-- Page content-->
<div ui-view="" autoscroll="false" ng-class="app.viewAnimation" class="content-wrapper">
Tested
<div ui-view="" data-autoscroll="false" class="wrapper">
#Styles.Render("~/bundles/bootstrapStyles")
#Styles.Render("~/bundles/appStyles")
#RenderBody()
#Scripts.Render("~/bundles/baseScripts")
#Scripts.Render("~/bundles/appScripts")
</div>
</div>
</section>
<!-- Page footer-->
<footer ng-include="'/Partials/Footer'"></footer>
View
#{
// This is requried for AngularJS because we have to send only the view markup (not within the layout)
Layout = "~/Views/Shared/_Layout.cshtml";}
<small>Subtitle</small>
<div class="row">
<div class="col-lg-12">
testing A blank template
</div>
</div>
This view has refered the layout.
So while page load the Master content loaded perfectly.but when the ng-view load again the master content loaded like nested.
I am trying to put the start of a div in a "header" template and the end in a "footer" template.
Unfortunately meteor shows the following during the building process and fails to start:
Your app is crashing. Here's the latest log.
=> Meteor server restarted
Errors prevented startup:
While building the application:
file.html:22: Expected "div" end tag
What is the correct way of implementing divs that start in one template and end in another?
Thanks in advance.
Extend your templating as far as necessary.
Without an example of your code, I can only make an assumption of what you're trying to do.
<body>
<div class="container">
<div id="another-div">
{{> header}}
</div>
{{> footer}}
</div>
</body>
<template name="header">
<nav id="header">
<!-- content -->
</nav>
</template>
<template name="footer">
<footer id="footer">
<!-- content -->
</footer>
</template>
That being said, an example of your code in your post will help specify the answer.
I'm working on a mobile app using JQuery-mobile and I'm having problems with my dialogs, every time I try to close the dialog (using the default close button) the app freezes.
Head code:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <!-- JQuery Mobile CSS link -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- JQuery Mobile link stored on CDN-->
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <!-- JQuery Mobile link stored on CDN -->
Relative Home Page Code:
<p>Register</p>
Dialog Code:
<!-- Start of third page: #register -->
<div data-role="page" id="register">
<div data-role="header" data-theme="e">
<h1>Activation</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Licence Key</h2>
<p>Please enter your licence key in order to activate your additional features of 20Keys</p>
<div data-demo-html="true">
<div class="ui-field-contain">
<label for="licenseKey">Licence Key:</label>
<input type="text" name="licenseKey" id="key" placeholder="Insert Key" value="">
</div>
</div><!--/demo-html -->
</div><!-- /content -->
<div data-role="footer">
<p>Activate Now
Cancel</p>
</div><!-- /footer -->
</div><!-- /page register -->
At the moment the activation button (work in progress) just goes back to the home page. If you spot anything that could be causing this issue I'd appreciate your comment.
The same issue occurred with the Footer buttons when the code was:
<p>Activate Now....
Cancel</p>
I had to remove data-rel="back" in order to fix that.
I'm using Chrome if that helps answer this. Thank you in advance.
I found out what the problem was...
You can't use data-rel="back" in a dialog page because there's technically no back page to go to for a dialog page because it pops up like a new tab would.
The correct way to do solve my problem would be to either just use href="#one" or possibly data-rel="close" instead of data-rel="back".
I have been trying to resolve an issue for awhile with rendering of content and the {{currentUser}} check in meteor. A code snippet is below:
{{#if currentUser}}
<div class="sparkline-box side">
<div class="sparkline-row">
<h4 class="gray"><span>Pending Contract Actions</span> 25</h4>
<div class="sparkline big" data-color="gray"><!--28,11,24,24,8,20,26,22,16,6,12,15--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="dark-green"><span>Outstanding Task Orders</span> $43.33M</h4>
<div class="sparkline big" data-color="darkGreen"><!--16,20,6,19,25,22,9,13,7,10,15,4--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="blue"><span>Current Month Actions</span> 45</h4>
<div class="sparkline big" data-color="blue"><!--20,18,21,17,5,7,29,9,8,14,23,8--></div>
</div>
<hr class="divider">
</div>
{{/if}}
With the {{currentUser}} block in place, the text appears, but the sparkline charts do not render in the browser, even when the page is reloaded. If I am not logged in, the text and charts are not visible. The problem is with the rendering of the sparkline charts when wrapped in the {{currentUser}} block. This also happens with other third-party javascript libraries that I am using in the application if wrapped in a {{currentUser}} block. Any thoughts on what may be happening?
Thanks!!
What happens is that meteor re-renders the context when {{currentUser}} changes. It does not preserve any changes made to the DOM by third parties. Read about isolate, preserve and constant. I believe that {{#constant}} will do the trick here.