I don't understand why the each clause is not working after I add the template "simple-todos" around them?!
<template name="simple-todos">
<head>
<title>Todo List</title>
</head>
<body>
<div class="row">
<header>
<h1>Todo List</h1>
{{> addObjects}}
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
</template>
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<span class="text">{{text}}</span>
<span class="text">{{createdAt}}</span>
</li>
</template>
When I'm not using the template name "simple-todos" I became directly the values from the database...
Thanks for help...
You are not allowed to put head and body tags inside a Meteor template, use this approach instead :
HTML
<!-- HEAD and BODY must be top level tags -->
<head>
<title>Todo List</title>
</head>
<body>
{{> simpleTodos}}
</body>
<template name="simpleTodos">
<div class="row">
...
</div>
</template>
Related
Hi Guys I have a problem about bootstrap bootstrap.min.css jquery.min.js and bootstrap.min.js are already included in my project but I cannot use well well-sm class and when I add manually by links this time divs engage you can see in the picture. where is the problem I don't understand?
my code :
#model xx.Web.Models.MiniRepairViewModel
#{
Layout = null;
}
<div class="pageWrapper">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
#Html.Action("Breadcrumb", "Manage")
<div class="TextBody">
<div class="container">
#Html.Action("LeftMenu", "Manage") //menu engage
<div class="col-threeQuarters">
#using (Ajax.BeginForm("MiniRepairServiceAdd", "Ajax", new AjaxOptions { OnSuccess = "jsFilt", OnFailure = "OnFailure" }))
{
<ul class="Form">
<li class="oneColumsFull">
#Html.DropDownListFor(x => x.GetCityModel.a, (IEnumerable<SelectListItem>)ViewBag.CitiesList, "select", new { name = "x", id = "y" })
</li>
<li id="ilce" class="twoColumsFull" style="display:none;">
</li>
<li class="oneColums"><input type="text" name="serviceName" id="serviceName" placeholder="Service"></li>
<li class="button"><input class=".bh-sl-reset" id="reset" type="button" value="clear" onclick="javascript: window.location.reload();"></li>
<li class="button"><input type="submit" value="search" name="search"></li>
</ul>
}
<div id="myDiv" class="well well-sm"> </div> //not working
</div>
</div>
</div>
</div>
I am not sure if colThreeQuarters is a bootstrap class, the actual class is col
<div class="container">
<div class="row">
<div class="col-md-9> // 3quarters
</div>
</div>
</div>
You Need to include headtag before Bodytag and add the bootstrap cdn in that head and write you js cdn at bottom of body tag.
SO the code structure will be like this
<html>
<head>
<bootstrap cdn>
</head>
<body>
your content
...
..
<js cdns>
</body>
</html>
This is because you are not loading your bootstrap cdn at right place. You should load all your scripts files inside your head tag as #yashwardhan said.
this mean:
Go to your code, find </head> tag and load all your scripts and css file just before this tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
and use the right bootstrap syntax. colThreeQuarters is not a bootstrap class
Why you should do this, is explained here:-
Where should I put <script> tags in HTML markup?
I am using IntelliJ and Spring Boot and Thymeleaf for a database visualisation project. The following HTML-Template is for the view of one gene:
gene.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<title>Gene</title>
<meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--import header-->
<header th:include="header"></header>
<div id="main">
<!--GeneID as page heading -->
<h2 th:text="'Gene: '+${identifier}" style="text-align: center"></h2>
<!--Gene description -->
<p th:text="${description}" style="text-align: center"></p>
<br/>
<!-- Sequence -->
<h3 th:text="'Sequence:'"></h3>
<!-- For each char in sequence-->
<th:block th:each="char:${sequence}">
<!-- Print the char. Color encoding done by main.css -->
<div th:class="${'gene ' + char}" th:text="${char}"></div>
</th:block>
<!--Protein encoded by gene -->
<h3 th:text="'Protein:'"></h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
</body>
</html>
In my later view, I have a problem.
I want the "Protein: Q6GZX4" to be in one line below the sequence. Yet I could not achieve it with <br/>or anything else.
What am I missing?
Thanks for your time and effort :)
Based on #manfromnowhere:
Change gene.html to:
[...]
<!--Protein encoded by gene -->
<div class="breaker">
<br/>
<h3 style="display:inline-block;" th:text="'Protein:'"></h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
breaker-class in main.css:
div.breaker{
clear:both;
}
Output:
I have added some bootsstrap to my django template and that works fine - but yet when I add my own css and it doesn't have an effect on the page; no errors are produced.
I have a personal web app with a dir static/personal/images/bg01.png
The image isn't loading and the ul isn't being put inline.
views.py:
def index(request):
return render(request, 'personal/home.html')
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deps</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
background-image:url('{{ STATIC_URL }} personal/images/bg01.png');
li{
display:inline;
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/images/bg01.png' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>Programming, Teaching, Entrepreneurship</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
In your style block, the background-image property isn't nested within a selector. If you wanted that to also be applied to the html/body, just move it up into the curly braces (and add a semi-colon after the height property); otherwise, add an appropriate selector to apply the property to instead.
You may also need to remove the space after {{ STATIC_URL }} so you don't end up with a space in the image path.
<style type="text/css">
html,
body {
height:100%;
background-image:url('{{ STATIC_URL }}personal/images/bg01.png');
}
li {
display:inline;
}
</style>
Consider this polymer-element
<polymer-element name="my-card" attributes="title content">
<template>
<div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
<paper-shadow z="1">
<div class="row">
<div class="col-xs-12" style="margin-top:-20px"><h2>{{title}}</h2></div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">{{content}}</p></div>
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</div>
</template>
<script>
Polymer({
cardTapped: function(){
alert('tapped!');
}
});
</script>
</polymer-element>
this is how I am using it
<my-card content="this is a test body" title="Here is a nice Title"></my-card>
it works but when I use html in the content attribute like
<my-card content="this is a test body <p>with paragraphs</p>" title="Here is a nice Title"></my-card>
they are handled like text, is there any way to pass HTML code to attribute and embed it in polymer-template
I think what you actually want is to use the <content></content> insertion point within your <template>, rather than creating an attribute named content and using variable interpolation.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="//www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
<polymer-element name="my-card" attributes="title">
<template>
<div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
<paper-shadow z="1">
<div class="row">
<div class="col-xs-12" style="margin-top:-20px">
<h2>{{title}}</h2>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">
<content></content>
</div>
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</div>
</template>
<script>
Polymer({
cardTapped: function(e) {
console.log('tapped!', e);
}
});
</script>
</polymer-element>
<my-card title="Here is a nice Title">
this is a test body <p>with paragraphs</p>
</my-card>
</body>
</html>
This is an edit of the original question:
When using the ng-include directive to reuse my header HTML on all pages, there is a slight delay in loading/rendering the top navbar. To alleviate the problem, I'm attempting to point ng-include to a header.html file that contains <script type='text/ng-template' id='header.html>...</script> so that it pre-loads the partial.
But I can't seem to get it to work. I've only had success when sticking the contents of header.html directly in index.html, which defeats the purpose of reusing the header code.
The docs for script only give an example of using an inline template, and the docs for ngInclude don't use script in the example templates.
Can ngInclude load a file that uses angular's script directive?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Testing</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<script src='lib/angular/angular.js'></script>
<script src='js/main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
<div ng-include src="header.url"></div>
<!-- script works when it is put directly in index.html:
<script type="text/ng-template" id="header.html">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a class="brand" href="#">Test</a>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
</script>
-->
</div>
</body>
</html>
header.html:
<script type="text/ng-template" id="header.html">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a class="brand" href="#">Test</a>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
</script>
main.js:
"use strict";
// I've also tried this with "use strict"; removed
var myApp = angular.module('myApp', []);
function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}
<div ng-include src="header.url"></div>
should be
<div ng-include src="'header.url'"></div>
Not sure if this is what rjm226 meant by 'double quotes were necessary'. Both double and single are necessary for ng-include. I've been tripped up by this recently.
This works perfectly. Tried it on my server. Double quotes were necessary. What is with the "use strict"; That breaks it on my end.