{{> default/head}}
<body>
{{!-- Header partials and Nav --}}
<div class="container">
{{> default/header}}
<div class="nav-scroller py-1 mb-2">
{{!-- {{> default/topNav}} --}}
</div>
</div>
{{!-- End of Header and Nav --}}
{{!-- Page content --}}
<main class="container">
{{{ body }}}
</main>
{{!-- end of page content --}}
{{!-- page footer --}}
{{> default/footer}}
{{!-- end of footer --}}
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</body>
</html>
The {{{body}}} in the main content is not rendering but every other partials seems to be working perfectly. And doing {{> defalut\index}} renders the page. Please what i'm I doing wrong.
Related
We are having an issue with framework7 messages in Firefox. The attached image shows the last message not properly displayed.
This can probably fixed by changing some css properties.
Below is the message template we used. No additional css stylings has been made.
<!-- template7 templates -->
<script type="text/template7" id="messagesTemplate">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding"><i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding mobileNums" data-tonumber="{{#global.activeNumber}}" data-f2pmds="{{#global.f2pmds}}" data-fromnum="{{#global.fromNumber}}">{{#if #global.activeNumber}}{{#global.activeNumber}}{{else}}New Message{{/if}} </div>
<div class="right"><i class="icon icon-bars"></i></div>
</div>
</div>
<div class="pages navbar-through">
<div data-page="messages" class="page no-toolbar toolbar-fixed">
<div class="toolbar messagebar">
<div class="toolbar-inner"><i class="icon icon-camera"></i>
<textarea placeholder="Message"></textarea>Send
</div>
</div>
<div class="page-content messages-content">
<div class="messages">
{{#each messages}}
{{#if dsent}}
<div class="messages-date">{{dsent}}</div>
{{/if}}
{{#if sent}}
<div class="message message-sent">
<div class="message-text">{{body}}
<br />
{{#if time}}<div class="msgDate">{{time}}</div>{{/if}}
</div>
</div>
{{else}}
<div class="message message-received message-with-avatar">
<!---<div class="message-name">Kate</div>--->
<div class="message-text">{{body}}
<br />
{{#if time}}<div class="msgDate">{{time}}</div>{{/if}}
</div>
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)" class="message-avatar"></div>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
</div>
</script>
It can't be fixed for Firefox. It just doesn't support CSS masks like in webkit browsers
If your messagebar is a fixed height, like mine, you can try
#-moz-document url-prefix() {
.messages{
padding-bottom: 44px;
}
.message-received > .message-text{
margin-left: 35px!important;
}
}
This works for me, but you can't add the tails on messages in any browser other than Chrome (or Safari).
This is because they are the only browsers to support the -webkit-mask-box-image property.
I'm using the following markup in my main content area:
<div class="row">
<aside class="col-md-3 sidebar col-sm-3 col-xs-12">
content
</aside>
<div class="col-md-9 col-sm-9 col-xs-12">
content
</div>
</div>
But in extra small devices, I would like to put aside bellow the main div. I try to use push and pull but the div moves to the right.
If you start with the aside underneath, then at larger sizes, the push/pull classes will reverse the order. Like this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-12 col-sm-push-3">
DIVcontent
</div>
<aside class="col-md-3 sidebar col-sm-3 col-xs-12 col-sm-pull-9">
ASIDEcontent
</aside>
</div>
Meteor inserts template's contents under <body>. Is there a way to make it inserts it somewhere else? E.g. under a <div class='content'>
Sure:
index.html:
<body>
<h1>Your Site Title</h1>
<p>Other stuff here</p>
<div class='content'>
{{> content}}
</div>
</body>
content.html:
<template name="content">
Inserted template stuff
</template>
html.erb template:
<div class="container">
<script type="text/x-handlebars" id="sentence">content</script>
</div>
but checked firebug, it becomes
<div class="container"></div>
<div id="ember299" class="ember-view">
blablabla.....
</div>
So, the problem is the script not included by container property
<body>
<script type="text/x-handlebars">
<div class="container">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="sentence">
content
</script>
</body>
Template without id is application template.
application.html.erb
<div class="container" style="margin-top: 28px;">
<%= yield %>
</div>
index.html.erb
<script type="text/x-handlebars" id="sentence">content</script>
And then checked firebug, it becomes
<div class="container"></div>
<div id="ember299" class="ember-view">
blablabla.....
</div>
Use yield
, not {{outlet}}
I'm starting using jQuery Mobile using this tutorial:
Displaying windows
But I'm having a problem now that I don't understand.
When a have the code below in the file name index.html I'm able to navigate beteween windows, but if I have the same code in a file named, for instance, index3.html, this doesnt work anymore....
Anyone knows the reason? Any solution?
<!DOCTYPE html>
<html>
<head>
<title>Page Title2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role=page id=win>
<!-- Default theme -->
<div data-role=header>
<h1>Default theme</h1>
</div>
<div data-role=content>
<p>
Window content
</p>
<a href=#wina> Goto "a" theme </a>
</div>
</div>
<div data-role=page id=wina data-add-back-btn=true>
<div data-role=header data-theme=a>
<h1> "a" theme </h1>
</div>
<div data-role=content data-theme=a>
<p>
Window content
</p>
<a href=#winb> Goto "b" theme </a>
</div>
</div>
<div data-role=page id=winb data-add-back-btn=true>
<div data-role=header data-theme=b>
<h1> "b" theme </h1>
</div>
<div data-role=content data-theme=b>
<p>
Window content
</p>
<a href=#winc> Goto "c" theme </a>
</div>
</div>
<div data-role=page id=winc data-add-back-btn=true>
<div data-role=header data-theme=c>
<h1> "c" theme </h1>
</div>
<div data-role=content data-theme=c>
<p>
Window content
</p>
<a href=#wind> Goto "d" theme </a>
</div>
</div>
<div data-role=page id=wind data-add-back-btn=true>
<div data-role=header data-theme=d>
<h1> "d" theme </h1>
</div>
<div data-role=content data-theme=d>
<p>
Window content
</p>
<a href=#wine> Goto "e" theme </a>
</div>
</div>
<div data-role=page id=wine data-add-back-btn=true>
<div data-role=header data-theme=e>
<h1> "e" theme </h1>
</div>
<div data-role=content data-theme=e>
<p>
Window content
</p>
<p>
End of themes
</p>
</div>
</div>
</body>
</html>
Update
I noticed now that the problem just happens when come to this window from another page. When I enter directly the URL of the index3.html it works fine. The code from the other page is:
<div data-role=content>
<a href=index3.html> Goto default themes</a>
</div>