I have a twig template in my symfony2 project and in there I have 4 blocks.
The block one is usualy a huge list of items, so the user has to scroll down on the page to see everything.
The problem is that the blocks 2, 3 and 4 and small in which concerns their height.
So, in order to have something "nice", I have to ideas:
Make the blocks 2, 3 and 4 to be always fixed, so when the user scrolls dow, the page will go down to se the block 1, but the content of the other blocks will allways be on the screen.
For that, I know how to use CSS:
position:fixed
But I don't know how to use position:fixed for all the 4 blocks at once. I tryed to create an extra parent block but it does't work.
Fix the size of the block 1 and only scroll inside of the block 1, not on entire page. How can I do that? If I set with CSS:
height: 100px
Nothing hapens.
Thank you very much.
EDIT: Here is what I have tryed for the moment:
{% block global %}
<div style="position:fixed ">
{% block one %}
...
{% endblock %}
{% block two %}
...
{% endblock %}
</div>
{% endblock %}
Related
I would like to hide the sidebar on just 1 specific page and allow the content to take the full 100%. I am using liquid. I have done this:
{% if page.handle != 'lorem' %}
<main-sidebar class="sidebar {% if page.handle == 'lorem' %} blockCSS {% endif %}">
It works.
But then you check the homepage and normally all the sections are wrapped within the content-holder div but for some reason after adding that piece of code after 3 sections they are outside of that div. I have not even changed that div at all.
How do I ensure that all sections that come after the first 3 that they are also in the content-holder?
I am trying to extend a navbar so it appears in several pages. When I insert {% extend %} {% block content %} {% endblock %}, it only appears as text - the code dosen't work.
Here is my Navbar that I want to extend:
This is how it appears in the browser:
This is the html file I want to include my navbar in:
How it appears:
I want to inherit my navbar, but only the code text appears in the browser.
{% extend %} and so on have no special meaning in HTML.
The syntax is clearly from some template engine. Maybe Nunjucks.
You'll need to pass your source code through the template engine and use the HTML generated from it.
I am developing a web app and I'm using a navbar.html as layout in each page of my webapp with this code :
eachpage.html :
{% extends 'navbar.html' %}
{% block body %}
<div class="container">
<div class="titre_pages">
<h2>PAGE TITLE </h2>
</div>
</div>
Everything works fine and my pages seems responsive bu when I reduce the size of my browser my navbar and my titles are overlaping. Should I add something between my navbar/layout and my html code to avoid this ?
Here is my page with a normal browser size :
Here is my page when I reduce the size of my browser :
The answer to your problem is to use media queries to serve different css/design for different viewport sizes. If you use bootstrap or something and bootstrap grid often you can have responsiveness handled for you. Also see below for standard practice instead of extending a nav bar we would create a base.html that would contain the entire layout including navbar. With this method of assigning blocks and including files you can over you can then extend from base.html and only over ride the body block or sidebar block as necessary.
<!-- base.html -->
<!html>
<head>
</head>
<header>
{% block header %}
{% include 'navbar.html' %}
{% endblock %}
</header>
<body>
{% block body %}
{% include 'index.html' %}
{% endblock %}
</body>
</html>
I've got this page that should be segmented. Using Bootstrap, there's a side block of col-sm-3 for the sidebar, and a body block of col-sm-9 for the main content. I thought if everything added up to 12 columns, everything would be OK, but when I input a nav div thing in the sideblock, it seems to just ignore the whole grid system and pushes the body block downwards, leaving a big empty space in front of the sidebar.
I'm still pretty new to all of this and haven't learned how to properly use css. I used the bootstrap CDN if that matters. Is there anyway to makes the sidebar and the main content share the same row using just the bootstrap CDN? If not, how would I go to implement the css properly in this case?
The block of html giving me problems:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
{% block side_block %}
{% get_category_list category %}
{% endblock %}
</div>
<div class="col-sm-9 col-sm-offset-3">
<div>
{% block body %}{% endblock %}
</div>
</div>
</div>
</div>
and the block of code rendered by {% get_category_list category %}:
{% if cats %}
<ul class="nav navbar-sidebar">
{% for c in cats %}
{% if c == act_cat %}<li class="active"> {% else %} <li>{% endif %}
{{ c.name }}</li>
{% endfor %}
{% else %}
<li><strong>There are no categories present.</strong></li>
</ul>
{% endif %}
It is a bit difficult to tell what your issue is just by looking, but here are a couple of suggestions:
Check your padding, if you have any custom padding added to grid elements, make sure to add the property (box-sizing: border-box) to those which will make sure the size of the element won't grow with padding. Try to check that on your nav element as well.
Try to remove (col-sm-offset-3) and instead, wrap the two elements above in a row and a (col-sm-12), which will ensure that they both sit in 12 columns which might also help you find out what's happening.
This property might cause some errors, and I wouldn't recommend using it for actual development but it could help shed some light if the issue is indeed related to padding:
in your css, you can do something like:
html,html *{box-sizing: border-box !important;}
Even if this works and resolves the issue, please remove it and proceed to apply the box-sizing property to affected divs only and not html and it's children as it is never recommended to use syntax like this.
The issue is occuring because you're using classes beginning with .col-sm... Classes starting with this will maintain their grid until the viewport width is less than 768px, then it will revert to a one column structure.
If you'd like to keep the grid until a smaller viewport, try changing the classes to begin with .col-xs... for example:
.col-xs-3
https://jsfiddle.net/20jhf966/
Also, have a look through the Bootstrap docs for loads more help, it's very well documented:
http://getbootstrap.com/css/#grid-options
Your problem is that you are using offset. You don't need offset. See this JSFIDDLE.
So essentially you were doing 3(for sidebar)+3(for offset)+9(for main) which is greater than 12. If you remove the offset, bootstrap will naturally place your div alongside the sidebar and your total would be 12.
Just for completeness, your updated code:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 sidebar">
This is the sidebar
</div>
<div class="col-sm-9 main">
<div>
This is the main body
</div>
</div>
</div>
</div>
I have a template block to override the class name in the inherited template. The resultant html from the block override is showing up the a malicious text.
Base.html:
<html>
<body>
{% block content %}
<h1 class="{% block heading_style %}Base{% endblock %}">Base Page Heading</h1>
{% endblock%}
</body>
</html>
Child.html:
{% extends "Base.html" %}
{% block content %}
{{block.super}}
{% block heading_style %}Login{% endblock %}
{% endblock %}
The block heading_style is the block I'm concerned about.
Resultant html:
As you can see the h1 class has been replaced with "Login" but it has also the started showing the "Login" as text after the h1 tag.
I'm using django 1.3.3 and eclipse with pydev. I've also checked the encoding of the html files and they and they are utf-8
You've put the definition of the heading_style block in the child within the content block. So it's being used for two things: as text content within content, and to fill the heading_style block in the parent.
Move heading_style outside of the content block definition, and it should be fine.
one endblock is missing
{% block content %}
{{block.super}}
{% block heading_style %}Login{% endblock %} {% endblock %}
I'm not sure overriding a block and nested sub-block along with {{block.super}} is good combination of doing things. May be you want to re-factor your templates for not relying on this.
Here is a ticket on django related to this (not sure this has been fixed or not) {{ block.super }} doesn't work with nested {% block %} statements