foundation 4, clearing lightbox thumbs not displaying correctly - zurb-foundation

I posted a test site at http://jobajoba.org that shows some foundation 4 elements.
I am using vanilla out-of-box foundation 4 framework but having trouble with lightbox thumbs showing up as bullet items in a list (they should be in row similar to "block grid" example shown on the page).
I can't figure out what I am doing wrong... note that everything else on page seems to work out of box.
On edit:
I forgot about this question, but about a month after I posted this, Zurb indicated to me that they used a block-grid to create the effect. Something like this worked for me:
<div>
<ul class="large-block-grid-4 small-block-grid-2" data-clearing>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo1.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo1-th.jpg" data-caption="THIS IS CAPTION 1">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo2.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo2-th.jpg" data-caption="THIS IS CAPTION 2">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo3.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo3-th.jpg" data-caption="">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo4.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo4-th.jpg" data-caption="">
</a>
</li>
</ul>
</div>

Foundation's documentation examples uses a custom docs.css file:
http://foundation.zurb.com/docs/assets/docs.css
The styles for the Clearing Lightbox found under the heading /* Clearing Styles */ are exactly the same as those included in the vanilla download. However, the file also has an extra section specifically for the documentation example.
/* Clearing Docs */
.clearing-thumbs { list-style: none; }
.clearing-thumbs li { float: left; margin-right: 10px; }
Adding these rules to your own css file should provide the layout you're looking for.

Related

Zurb Foundation Accordion not expanding

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.

Aurelia is emitting different css code in Foundation using a dropdown menu when compared to the same page when using the regular method

System Info:
Windows 7 x64
aurelia-framework: "^1.0.0-beta.1.1.3"
"foundation-sites": "^6.2.1"
skeleton-navigation-webpack
How do I get the css code emitted when using aurelia and foundation together to be the same as when using foundation alone in a standard web page? This is causing the dropdown to work incorrectly.
I am using the skeleton-navigation-webpack and just substituting foundation html and css for nav-bar and a empty welcome page
Aurelia Code
main.js to initialize foundation framwork
aurelia.start().then(a => a.setRoot('app', document.body))
.then(a => {
// Initialize any frameworks you want to use
$(document).foundation();
console.log('foundation loaded')
});
The initialization of foundation $(document).foundation(); seems to work as the dropdown menu is displayed and working but the css is slightly different
nav-bar.html snippet before code is emitted
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li repeat.for="row of router.navigation">
<a href.bind="row.href">${row.title}</a>
</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
Importing the foundation css in Aurelian and link in standard html page. The only difference is in the html page in using the repeat.for for <li> via Aurelia
emitted code in Aurelia
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="x96kho-dropdown-menu">
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
<!--<view>--><li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
<a href.bind="row.href" class="au-target" au-target-id="1" href="#/">Welcome</a>
</li><!--</view>--><!--<view>-->
Standard html page
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdownmenu="nfmerw-dropdownmenu" data-responsivemenu="8q9bqc-responsivemenu">
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub js-dropdown-active" data-submenu="" aria-hidden="false" tabindex="-1" role="menu">
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" tabindex="0">One</li>
One specific is the open-left class in the first <li>
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
Verse the is-down arrow is active
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
'reflow' is not Foundation 6, I instead use
attached(){
// refresh JS after DOM is loaded
$(document).foundation();
}
I can't test if this works better helping you out on the different CSS, but I do know this is the new reflow.
Answer found here: Foundation 6 & Reflow. I tested the reflow functionality, it works.
Aurelia as a "Single Page Application" framework loads page content dynamically all the time. I don't have tested it, but I think you have to re-apply foundation after ajax content is loaded.
You can do it calling foundation 'reflow' in the attached view-model method:
attached() {
$(document).foundation();
}

Jquery Mobile - Several items from listview on same line

I am encountering an issue with Jquery Mobile :
I want to display a grid of items using three columns. Each new item must be displayed next to the previous one and begin a new line after the third column.
To give you an example, I want something like this : JSFiddle
But my items have to be items from a splitButtonList (an icon with labels on the left and a clickable button on the right) instead of the blocks from the previous example.
The problem is : when I use the kind of code shown below, each new item is display at the bottom of the previous one, like in a list. I cannot manage to display it using my three columns grid pattern JSFiddle.
<body>
<div data-role="page" data-theme="c" id="projets">
<div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false" id="banniere">
</div>
<div data-role="content" id="content">
<div class="ui-grid-b">
<ul data-role="listview" data-split-icon="star" data-split-theme="a" class="listview">
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
</ul>
</div><!-- /grid-b -->
</div>
<div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
</div>
</div>
</body>
Do you have any idea of what to do ? Using CSS maybe ? Any clue would be very precious for me. Thank you
How about this? JSFiddle
You were basically missing the 3 child containers of the grid:
<div class="ui-grid-b">
<div class="ui-block-a">Listview 1 goes here...</div>
<div class="ui-block-b">Listview 2 goes here...</div>
<div class="ui-block-c">Listview 3 goes here...</div>
</div><!-- /grid-b -->
So, as you can see you will need three different listview.
Hope this helps!

Undoing the changes Spree_fancy has done to listing products

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.

How to size links to content instead of 100% container width using zurb foundation side nav

I'm using foundation as a basis for the site design and developing a nav bar for the side of the screen. I want to use Foundation's side nav because it has dividers and nice method for graying out or marking nav links as 'active'. The problem I'm having is that the clickable area for the link extends the width of the container instead of the text content of the link. I feel that is confusing and I don't want that experience for my users.
Zurb Foundation Code:
<section class="section">
<ul class="side-nav no_padding_top">
<h5 >What can I do here?</h5>
<li class="">
<a href="#" >View Popular</a>
</li>
<li class="">
<a href="#" >View Top Rated</a>
</li>
<li class="">
<a href="#" >Browse Categories</a>
</li>
</ul>
</section>
In the picture below I show the way the zurb site nav is rendered (bottom) with a border around the clickable area. I want to limit the click area around the link text (top), ie. the clickable link is the size of the text, not the container. How can I override the default zurb foundation behavior to do that?
It is because the link is set to display:block. Override it with:
.side-nav li a {
display: inline-block;
}