i have a problem with the Slideshow component by UIkit:
the site of the images are 0 and doesn't show images - with without uk-cover they show the first images, but the next images are Style="width:0;height:0"…
here the code
<div class="uk-position-relative uk-visible-toggle uk-slideshow" uk-slideshow="animation: fade">
<ul class="uk-slideshow-items" uk-lightbox="animation: fade">
<li class="uk-active uk-transition-active" style="z-index: -1;">
<img src="imag1.jpg" alt="">
</li>
<li>
<img src="image2.jpg" alt="">
</li>
</ul>
<div class="uk-position-relative uk-position-small uk-visible-toggle uk-light uk-slider uk-slider-container" uk-slider="">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li uk-slideshow-item="0" class="uk-transition-active uk-active">
<img src="image1.jpg">
</li>
<li uk-slideshow-item="1" >
<img src="image2.jpg" alt="">
</li>
</ul>
</div>
</div>
Add the uk-position-cover class.
<a class="uk-position-cover" href="image2.jpg"><img src="image2.jpg" alt=""></a>
Slideshow component displays images as background images.
Therefore, slideshow container must have height property.
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1"
uk-slideshow="animation: slide; autoplay: true; autoplay-interval: 3000">
<ul class="uk-slideshow-items" uk-height-viewport="offset-top: true;">
uk-height-viewport="offset-top: true" --> set min-height as 100vh or less according to viewport and elements (without fixed or absolute positionned) on top of slideshow.
Here is the pen slideshow with data-srcset. You can add images url seperately for mobile and desktop.
Related
I am using Foundation 6.7.4.
I am trying to set up an accordion like the one in their example here https://get.foundation/sites/docs/accordion.html
I have my accordion set up as such:
<div class="grid-x">
<div class="medium-12 cell">
<ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
My Title
</a>
<div class="accordion-content" data-tab-content>
My content
</div>
</li>
</ul>
</div>
</div>
When I click the A tag I can see the Accordion expand for a fraction of a second before closing. I can also see the CSS classes and attributes change in the inpector.
But I'm unsure why none of these are sticking and what's causing the accordion to revert its's self.
Would anyone know why?
Turned out this was because I had 2 foundation.js files referenced.
I copied the foundation navbar syntax straight from their site https://foundation.zurb.com/sites/docs/top-bar.html and the dropdown menu feature doesnt seem to be working
Here's the code:
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
Here's what it looks like
Make sure to initialize foundation:
$(document).foundation();
I had the same issue -
This appears to be a known issue with Foundation 6.2 ~ 6.4 - at least for Rails apps using the foundation-rails gem.
The fix was to update the foundation_and_overrides.scss include order, move
#include foundation-dropdown-menu;
to the bottom as per here
I do not know how to set even spacing in my navbar:
there is a bigger gap between Articles and User Profil than User Profil and Admin.
There is a bigger gap between Admin and DB than User Profil and Admin.
My code is:
<li class="blog-nav-item">
<a class="blog-nav-item" href="#" class="blog-nav-item active" data-toggle="dropdown" role="button" aria-expanded="false">Articles<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>All</li>
<li>Create New</li>
</ul>
</li>
<a class="blog-nav-item" href="/accounts/profil/">User Profil</a></li>
<a class="blog-nav-item" href="/admin/">Admin</a></li>
<li class="blog-nav-item">
DB<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>DB: JSON</li>
<li>DB: XML</li>
</ul>
</li>
That is because, by default, there is different margin spacing for a simple list element and a drop down menu.
Override the settings by:
.blog-nav-item > a{
margin-right:10px;
}
.blog-nav-item > .dropdown-menu{
margin-right:10px;
}
Adding these classes to the css will help
I would like to undo the changes that spree_fancy theme has made to the listing products. In the original Spree, I received products with 'columns three' when I browsed a taxon.
<div data-hook="taxon_products">
<ul id="products" class="inline product-listing" data-hook="">
<li id="product_3" class="columns three alpha" itemtype="http://schema.org/Product" itemscope="" data-hook="products_list_item">
<div class="product-image">
<a class="info" title="Ruby on Rails Baseball Jersey" itemprop="name" href="/products/ruby-on-rails-baseball-jersey">Ruby on Rails Baseball Jersey</a>
<span class="price selling" itemprop="price">$19.99</span>
</li>
However, spree_fancy theme inserted another nested unordered list and set the class to "columns four". I would like to undo these changes. My first guess was to browse through the overrides, but I couldn't find the caused file.
div data-hook="taxon_products">
<ul id="products" class="inline product-listing" data-hook="">
<li class="product-row">
<ul>
<li id="product_18" class="columns four alpha" itemtype="http://schema.org/Product" itemscope="" data-hook="products_list_item">
<div class="product-image">
<a class="info" title="Sunflower Clip Arts" itemprop="name" href="/products/sunflower-clip-arts">Sunflower Clip Arts</a>
<span class="price selling" itemprop="price">$4.00</span>
</li>
The override happens here:
https://github.com/spree/spree_fancy/blob/596d11e09343a1ce716b4c34bcd3802765728c46/app/overrides/spree/shared/_products/group_products_list_by_3_in_row.html.erb.deface
If you place an empty file at app/overrides/spree/shared/_products/group_products_list_by_3_in_row.html.erb.deface and restart your web server, this override should not longer be applied.
The example from Foundation 3 explains how to set up tabs using lists but how do you use the tabs with a div layout?
<dl class="tabs">
<dd class="active">Simple Tab 1</dd>
<dd>Simple Tab 2</dd>
<dd class="hide-for-small">Simple Tab 3</dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
<li id="simple3Tab">This is simple tab 3s content.</li>
</ul>
<div class="tabs-content">
<div class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<div id="simple2Tab">This is simple tab 2s content. Now you see it!</div>
<div id="simple3Tab">This is simple tab 3s content.</div>
</div>
Add the divs in the list item.
<ul class="tabs-content">
<li class="active" id="simple1Tab">
<div>This is simple tab 1s content. Pretty neat, huh?</div>
</li>
<li id="simple2Tab">
<div>This is simple tab 2s content.</div>
</li>
<li id="simple3Tab">
<div>This is simple tab 3s content.</div>
</li>
</ul>