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>
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 have a div container in my HTML which displays a list of 10 parsed headlines from The Toronto Star. I want to be able to display them in a repeating grid that looks like this:
Here's the django template that I have :
<div id="container">
<div class="containers">
{% for n, i in toronto %}
<center><img src="{{i}}"></center>
<h3>{{n}}</h3>
{% endfor %}
</div>
To clarify, I am asking for someone who is experienced with CSS Grids and django to help me with the appropiate css code similar to the picture i referenced above. The css grid needs to be repeating as well as the django template contains 10 indexes in its list
Try
<div id="container">
{% for n, i in toronto %}
<div class="containers">
<center><img src="{{i}}"></center>
<h3>{{n}}</h3>
</div>
{% endfor %}
</div>
The class has to be parsed too
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 am trying to add some keyword tags to an image gallery comprised of Bootstrap cards. Everything is working as expected, except that the anchor tag-wrapped elements are not clickable.
The problem seems similar to this: href link inside modal is not working and this: Anchor links in bootstrap don't work
But neither of the solutions in those cases seems to apply here. The problem seems to be with the "card-img-overlay" covering up the tags.
{% block page_content %}
<div class="container">
<legend>Gallery</legend>
<div class="row">
{% set current_page=gallery_items_page %}
{% for item in current_page.items %}
{% if item.published == True %}
<div class="col-4">
<div class="card mb-3">
<img style="width: 100%;" src="{{ url_for('images.static', filename=item.cover_picture[0].file_name) }}" class="img-fluid card-img" alt="responsive">
<div class="card-img-overlay">
<h1 style='font-family: "Miniver"' class="text-white">{{ item.title }}</h1>
</div>
<div class="card-header">
{% for kw in item.keywords %}
{# it's probably more efficient to use the PK, but more expressive to use the string... #}
{{ kw.keyword }}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
Using the inspect element tool on Firefox, it can be seen that the URL from the Jinja2 template works properly, and everything looks as intended, and the link itself works just fine, just it's not clickable. If I place the link outside of the the card div, it functions normally.
Here is a fiddle: https://jsfiddle.net/us4Lmqbp/
Your anchor tag is not clickable because it is under the div.card-img-overlay. So when you click, you are clicking on that div and not on the anchor tag. You can recognize this by right-clicking on the anchor tag in your browser and selecting "inspect". In the inspector window, the actual element clicked is selected.
To make the anchor tag clickable, you need to either:
Make the div "transparent" to clicking by giving it the style
pointer-events: none (read more here). jsFiddle
or
Move the anchor tag above the div by increasing its z-index (add the
style z-index: 20 and also add position: relative - z-index does
not work on statically-positioned elements, which is the default
browser style). jsFiddle
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 %}