I created a top-bar menu using Foundation 6 looking at its documentation and some tutorials on its page. I managed to make it work responsively, changes from dropdown to drilldown when in mobile view. All ok, but I'm missing something here. The dropdown boxes don't expand to make menu options one line each. The Foundation class "is-dropdown-submenu" set a min-width of 200px. But that doesn't work as a minimum width. It works as the max-width because dropdown boxes doesn't expand beyond that value. I have to manually set a larger width to place all my menu options in one line each. Is there any way to dropdown boxes adjust its size automatically?
Any ideas?
<div class="top-bar">
<div class="wrapper">
<div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
</span>
<img class="logo" src="https://placehold.it/145x40&text=LOGO">
</div>
<div id="responsive-menu">
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu navigation" data-responsive-menu="drilldown medium-dropdown"
data-back-button='<li class="js-drilldown-back"><a tabindex="0">Return</a></li>'>
<li>
Lorem Ipsum
<ul class="vertical menu">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
</ul>
</li>
<li>
Lorem
<ul class="vertical menu">
<li>Ipsum</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor</li>
</ul>
</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem</li>
</ul>
</div>
</div>
</div>
</div>
Here's my codepen
Related
HTML
You can see the below code which I am using but transition not working.
<div class="faq">
<input type="radio" id="faq1" class="input" name="faqs">
<label for="faq1">text 1</label>
<div class="answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
<div class="faq">
<input type="radio" id="faq2" class="input" name="faqs">
<label for="faq2">text 2</label>
<div class="answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
CSS
Here is the CSS that I am using for the transition.
.input, .answer
{
display: none;
transition: all 1s;
}
.faq input[type="radio"]:checked ~ .answer
{
display: block;
transition: all 1s;
}
Transition doesn't work with display none and block property. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.
Optionally, You can play with height and opacity, and much better if you are comfortable with javascript. You can make smooth animation with js.
Just in case you want to do this with CSS here is a way to make it work:
.input, .answer
{
opacity: 0;
transition: height 1s, opacity .5s;
background: aqua;
height: 0;
}
.faq input[type="radio"]:checked ~ .answer
{
opacity: 1;
height: auto;
transition: height 1s, opacity .5s;
}
<div class="faq">
<input type="radio" id="faq1" class="input" name="faqs">
<label for="faq1">text 1</label>
<div class="answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
<div class="faq">
<input type="radio" id="faq2" class="input" name="faqs">
<label for="faq2">text 2</label>
<div class="answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
Hi, I try to achieve a custom grid with bootstrap 4 using forloop counter. Unfortunately for me, something causes the elements to fall apart. I know I'm close to achieving this but I try to do this for several hours and still I failed to do this.
My code:
{% for article in healtharticles %}
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<!-- News block -->
{% if forloop.counter0 < 1 %}
<div>
<!-- Featured image -->
<div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<!-- Article data -->
<div class="row mb-3">
<div class="col-6">
<a href="" class="text-info">
<i class="fas fa-plane"></i>
Travels
</a>
</div>
<div class="col-6 text-end">
<u> 15.07.2020</u>
</div>
</div>
<!-- Article title and description -->
<a href="" class="text-dark">
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed
id nihil magni, sint vero provident esse numquam perferendis ducimus dicta
adipisci iusto nam temporibus modi animi laboriosam?
</p>
</a>
{% else %}
<hr />
<!-- News -->
<a href="" class="text-dark">
<div class="row mb-4 border-bottom pb-2">
<div class="col-3">
<img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"
class="img-fluid shadow-1-strong rounded" alt="" />
</div>
<div class="col-9">
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>
<p>
<u> 15.07.2020</u>
</p>
</div>
</div>
</a>
</div>
{% endif %}
<!-- News block -->
</div>
{% endfor %}
Maybe someone has an idea of what's is wrong.
You have not closed div in if condition and opened div in else condition.
{% if forloop.counter0 < 1 %}
<div>
......
</a>
</div> <!-- Close div here-->
{% else %}
<div> <!-- Open div here -->
.....
</div>
{% endif %}
I am using bootstrap carousel and i am using for template to iterate through data but i want two data at once so i wanted to do was if data exceeds 2 i want to display nothing after that can some one tell me how to do it.
<section id="latest-trip">
<div class="container">
<div class="row col-md-12">
<!-- Latest trip left part(carousel part) Start -->
<div id="treaking-list" class="col-md-7 ml-4">
<div
id="carouselExampleIndicators-three"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="1"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
{% for tour in tours %}
<div class="carousel-item {% if tour.id == 1 %} active {% endif %}">
<div class="row">
{% for tour in tours %}
<div class="treaking col-md-6">
<img
src="{{tour.image}}"
alt="Real Adventure Nepal - {{tour.tour_name}}"
title="{{tour.tour_name}}"
/>
<div class="treaking-head">
<h3>{{tour.tour_name}}</h3>
<p>
{{tour.description}}
</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Latest trip left part(carousel part) End -->
<!-- Latest trip right part(Description part) Start -->
<div class="col-md-4 ml-5 title">
<h2 class="treaking-title">Latest Trips</h2>
<span class="right-styled-para">Explore the unexplored world</span>
<p class="treaking-description">
Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod
tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim
veniam quiso.
</p>
<button type="button" class="btn btn-primary join-us">
Join us now
</button>
</div>
<!-- Latest trip right part(Description part) End -->
</div>
</div>
</section>
What is Currently happening is that the data are going down and same thing keeps going on in carousel :
<section id="latest-trip">
<div class="container">
<div class="row col-md-12">
<!-- Latest trip left part(carousel part) Start -->
<div id="treaking-list" class="col-md-7 ml-4">
<div
id="carouselExampleIndicators-three"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="1"
></li>
<li
data-target="#carouselExampleIndicators-three"
data-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
{% for tour in tours[:2] %}
<div class="carousel-item {% if tour.id == 1 %} active {% endif %}">
<div class="row">
{% for tour in tours %}
<div class="treaking col-md-6">
<img
src="{{tour.image}}"
alt="Real Adventure Nepal - {{tour.tour_name}}"
title="{{tour.tour_name}}"
/>
<div class="treaking-head">
<h3>{{tour.tour_name}}</h3>
<p>
{{tour.description}}
</p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Latest trip left part(carousel part) End -->
<!-- Latest trip right part(Description part) Start -->
<div class="col-md-4 ml-5 title">
<h2 class="treaking-title">Latest Trips</h2>
<span class="right-styled-para">Explore the unexplored world</span>
<p class="treaking-description">
Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod
tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim
veniam quiso.
</p>
<button type="button" class="btn btn-primary join-us">
Join us now
</button>
</div>
<!-- Latest trip right part(Description part) End -->
</div>
</div>
</section>
Adding [:2] after tours will resolve it. See my above answer.
So I have this piece of HTML:
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-img">
<img src="assets/images/watch-4.png" class="img-responsive" alt="Image">
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-content arrow-left">
<i class="icofont icofont-brand-android-robot"></i>
<h4>Android and iOS Apps Install</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
</div>
</div>
</div>
</div>
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-content arrow-right">
<i class="icofont icofont-ui-text-chat"></i>
<h4>Live Chat With Friends</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-img">
<img src="assets/images/watch-5.png" class="img-responsive" alt="Image">
</div>
</div>
</div>
</div>
Which generates this kind output in the webpage:
But how do I iterate an HTML element like this? Because the text and image block order are changing each iteration.
What I came up with:
{% for entry in page.product_features_showcase.all %}
{% image entry.image height-1000 as img %}
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-content arrow-{% cycle 'left' 'right' 'left' 'right' 'left' 'right' 'left' 'right' %}">
<i class="icofont icofont-phone"></i>
<h4>{{ page.product_features_showcase_title }}</h4>
<p>{{ page.product_features_showcase_description }}</p>
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-img">
<img src="{{ img.url }}" class="img-responsive" alt="Image">
</div>
</div>
</div>
</div>
{% endfor %}
I know I can use cycle to make different CSS classes each iteration. But how to change the order of the HTML element? To make this HTML work in a loop.
Use forloop.counter and divisibleby inside a for loop to render different HTML blocks in odd and even loops:
{% if forloop.counter|divisibleby:2 %}
Right-arrow block
{% else %}
Left-arrow block
{% endif %}
In Django docs: https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#divisibleby
I am using foundation-3.2.2 , but I am facing image slider problem, I used both orbit image slider or content slider but its not helpful.
Problem is that on my site I want to slide both image and content at a time , and my html structure is below, you can chack ths http://ipadfeatures.info/yogita/envision.com to maximize and minimize your browser.
<div class="row">
<div class="twelve columns">
<div id="featuredContent">
<div>
<img src="images/illustration/spotlight1.jpg"/>
<div class="data">
<h3 class="textWeight">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed"</h3>
</div>
</div>
<div>
<img src="images/illustration/spotlight2.jpg"/>
<div class="data">
<h3 class="textWeight">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed"</h3>
Lorem ipsum dolor sit amet,
</div>
</div>
<div>
<img src="images/illustration/spotlight3.jpg"/>
<div class="data">
<h3>""Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</h3>
Lorem ipsum dolor sit amet, c
</div>
</div>
</div>
</div>
</div>
Zurb has responded to this topic on this github page.
Unfortunately variable content sliding in Foundation 3 was not what the Orbit slider was planned for, it has been updated in Foundation 4.0 to do so, but in 3 it is not supported.