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>
Related
I am doing a Course on meteor from Coursera. The teacher uses a mac or a linux in the installation so its becoming difficult for me to follow up.
After running the server, the teacher changed a few HTML items in the code and it changed on the server but when I change anything after starting and running the server, the file does not get changed.
<head>
<title>image_share</title>
</head>
<body>
<h1>Welcome to Coursera!</h1>
<div class="container">
{{> images}}
</div>
</body>
<template name="images">
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}"
alt="{{img_alt}}"/>
<div class="caption">
<h3>Thumbnail label</h3>
<p>description of the image</p>
</div>
</div>
</div> <!-- / col -->
{{/each}}
</div> <!-- / row -->
</template>
My edited code,
<head>
<title>image_share</title>
</head>
<body>
<h1>Welcome to My world!</h1>
<div class="container">
{{> images}}
</div>
</body>
<template name="images">
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}"
alt="{{img_alt}}"/>
<div class="caption">
<h3>Thumbnail label</h3>
<p>description of the image</p>
</div>
</div>
</div> <!-- / col -->
{{/each}}
</div> <!-- / row -->
</template>
Notice I have changed the contents of <h1> tag but still nothing changes on the server.
I want to get the fave.title within the collectionFS each block where I have "TITLE HERE", any ideas?
<template name="myFaves">
<div class="container">
<div class="page-header">
<h2>Your Favourites</h2>
</div>
<div class="row">
<div class="col-md-12">
{{#each faves}}
{{> singleFave }}
{{/each}}
</div>
</div>
</div>
</template>
<template name="singleFave">
<div class="row">
<div class="col-md-12">
<div id="freewall" class="freewall">
{{#each getMedia this.fileId}}
{{#if isImage store='thumb'}}
<div class="brick">
<img src="{{this.url store='thumb'}}" width="100%">
<div class="info">
TITLE HERE
</div>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
</template>
I guess you need to access the parent context. Try it with {{../fave.title}} or {{fave.title ..}}.
Note that grand-parent context could also be reached using {{../.. fave.title}}
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 have a ASP.NET MVC solution where I use MasterPage like this :
<div class="wrapper">
<div id="header">
<div class="content">
<div id="contentBody">
<div id="mainMenu">
#Html.Raw(#Html.MainMenu())
</div>
#Html.Raw(#Html.Partial("LoginStatusPartial"))
</div>
</div>
</div>
<div id="mainContent">
<div id="page">
#Html.Partial("LoginPartial")
#RenderBody()
</div>
<div id="rightPanel">
</div>
<div style="clear:both;"></div>
</div>
<div class="push"></div>
</div>
<div id="footer">
<div class="content">
foot [sitename]
</div>
</div>
Now I need to put a usercontrol in rightPanel and this do only apply when on a specific page.
Is this possible? And if so how?
You could use sections:
<div id="rightPanel">
#RenderSection("RightPanel", required: false)
</div>
and then inside the views that need to put something into this section could define it:
#section RightPanel {
<div>#Html.Partial("SomeRightPanel")</div>
}
Yes. Use the following in your master:
<div id="rightPanel">
#RenderSection("Name")
</div>
Or, if you just want the right panel to display, if you provide the content in your view, use:
#if (IsSectionDefined("Name")) {
<div id="rightPanel">
#RenderSection("Name")
</div>
}
And use it in your views with:
#section Name {
Content
}
I am working with Bootstrap and am having a strange layout issue in my fixed (not responsive) layout.
Using the BS scaffolding syntax, I have several nested divs in my grid. Usually looks/works fine; however, sometimes when I reload the page divs break throughout the page (header nav, divs in main content, etc.)
I cannot recreate this problem, it just seems to act the way it wants when it wants (again, when I refresh/reload).
Here are screenshots of what the issue looks like when it happens, and what it should always look like:
good 1
http://static.inky.ws/image/3486/ss-1-good.jpg
bad 1
http://static.inky.ws/image/3485/ss-1-bad.jpg
(I cannot add more URLS to this post; if you want to see more, the above 2 can be changed to 3487/ss-2-good.jpg & 3484/ss-2-bad.jpg)
Steps taken (to no positive effect):
-redo the grid
-go through my custom CSS line by line, seeing if removing portions solves the problem
-confirm paths, file order in webpage, etc.
-search, search and search again
Here is the basic HTML structure:
<div class="container">
<?php require ("includes/nav-top.php") ;?>
<!--page header -->
<div class="row" id="">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
... content ...
</div>
<div class="row-fluid">
<div class="span8">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<!--row-fluid-->
</div>
<!--span8-->
<div class="span4">
... content ...
</div>
<!--span4-->
</div>
<!--row-->
<div id="" class="row">
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
</div>
<!--row-->
<footer>
... content ...
</footer>
</div>
<!--container-->
I am loading the external files like this:
HEAD:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
;
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-config.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
BEFORE the closing BODY tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<?php require('includes/i-modal.php');?>
<?php require('includes/i-googleAnalytics.php');?>
<?php require_once('includes/i-js.php'); ?>
NOTES:
-like I said, this could happen 10x in a row, then the next 5 refreshes/reloads and it looks fine
-in the above files loaded in there is an include for Fancybox (i-modal.php) as well as custom JS (i-js.php). There is no CSS or anything else in those files which seems like it might trigger this.
-currently the BS overwrites (bootstrap-config.css) is empty; seemingly, when I add anything to it the problem kicks in, whether or not what little I add has margin or padding.
-from my research it looks like my use of "row-fluid" for nested grid sections is allowable in the otherwise fixed layout
-so far, testing on Safari / OSX, have not seen the problem in other browsers, but as I said it happens when it chooses to.
SO. After all this, I guess I am wondering what these symptoms might suggest to the knowledgeable out there. Bootstrap is outstanding, in many ways the tool of my dreams - has anyone experienced anything like this?
Thanks for reading this.
First of all you have some bad structure in your layout it should look like this:
<div class="row" id="">
<div class="span6">
<div class="row">
<div class="span3">
... content ...
</div>
<div class="span3">
... content ...
</div>
</div>
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
<div class="span12">
... content ...
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
</div>
</div>
You have to follow this rules:
don't use row-fluid in fixed layout.
full width span is 12.
content have to be in span - ALWAYS
sub-spans have to be in rows - ALWAYS
a sum of spans in sub-row have to be equal of container span (that don't concerns row-fluid) eg. in span8 you can place a row with span6 and span2
don't mess with bootstrap CSS if you are not SURE what you're doing
check if you didn't accidentally name some custom CSS classes same way as in BS
Fix those and it should fix your display problems.