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!
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.
Hej all !
As the title of the subject suggest, I wonder if it's possible to have deep linking that works on nested tabs.
I mean, if I use only one tabs container, it works fine, but I don't know how to deep link to a tab inside a parent tab. It should first open the parent tab and then display the goal child tab.
Is it possible using Foundation 6 deep-linking please (without hacks) ?
Let's say we have this code :
<div>
<ul class="tabs" data-tabs id="tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 1</li>
<li class="tabs-title">Content 2</li>
</ul>
</div>
<div class="tabs-content" data-tabs-content="tabs">
<div class="tabs-panel is-active" id="tab1">
My Content 1
</div>
<div class="tabs-panel" id="tab2">
<ul class="tabs" data-tabs id="tab2-tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 2-1</li>
<li class="tabs-title">Content 2-2</li>
</ul>
<div class="tabs-content" data-tabs-content="tab2-tabs">
<div class="tabs-panel is-active" id="tab2-tab1">
My Content 2-1
</div>
<div class="tabs-panel" id="tab2-tab2">
My Content 2-2
</div>
</div>
</div>
</div>
How can I open "My Content 2-2" using deep-linking please ?
I'm following Foundation 6 documentation to create an off canvas menu : http://foundation.zurb.com/sites/docs/off-canvas.html
Here is what I did :
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
data-position="right"></div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
<span class="title-bar-title">Zurb</span>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
</div>
</div>
</div>
</div>
</div>
</body>
But when I open the menu, here is what I get :
I can scroll it and see my test1/2/3/4, but why do I have this result?
What I want is the same as what we can see on foundation documentation when you click on 'Toggle Off-canvas'
Did I put my list in the wrong place?
I'm pretty sure my framework is up to date, and I've been following the documentation step by step, but it does not give as much informations as I would like to have
You have the menu in the right place and your example is equivalent to the examples provided in the Foundation 6 documentation.
This seems to be a bit of a design issue where the length of the Off Canvas menu is dependant on the size of the content. Because you have no content on the page, the menu is equal in height to the menu bar.
As soon as you populate off-canvas-content, the menu should appear as expected.
Click Here for a Demo.
Thank you for sharing your code. It is slightly different than the examples by ZURB for the Foundation 6 starter pages. ZURB uses "wrap" instead of "wrapper". I changed my code to match yours and voila! Their tutorial is at:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html
Yours:
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
ZURB:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file
I am trying to use getResources to display multiple resources withing one resource, including their Templates and TVs.
The code I have in the page I want to display them is:
[[!getResources? &parents=`50` &sortdir=`ASC` &sortby=`menuindex` &limit=`100` &includeTVs=`1` &processTVs=`1` &tpl=`gigtemp` ]]
Where &tpl=gigtemp is a chunk I have created where all my template HTML and TVs are.
However, nothing is showing on the page.
Can anyone help me out?
Please let me know if I need to explain more.
Update:
Some of the info is showing, but a lot of the html is broken.
My HTML on the Chunk is:
<div class="gig-guide">
<div class="gig-info">
<h2>[[+tv.gigname]]</h2>
<strong>[[=tv.gigcity]]</strong>
<img src="[[+tv.gigthumb]]" alt="Contra Clave Contra Event: [[+tv.gigname]" /></div>
<div class="gig-info">
<h2>[[+tv.gigdate]]</h2>
[[+tv.gigtime]]</div>
<div class="gig-info">
<h2>[[+tv.gigvenue]]</h2>
[[+tv.gigaddress]]</div>
<div class="gig-info">
<h2>[[+tv.gigcost]]</h2>
</div>
<div class="gig-bottom">
<div class="fb-like" data-href="[[+tv.gigfbevent]]" data-send="false" data-width="300" data-colorscheme="dark" data-show-faces="false"> </div>
<div class="gigsocialmedia"><img src="assets/images/ccc-fb.png" alt="This event on Facebook" /> <a class="twitter-share-button" href="https://twitter.com/share?text=[[+tv.gigtwitter]]" target="_blank" data-lang="en"><img src="assets/images/ccc-twiter.png" alt="Tweet this event" /></a> <img src="assets/images/ccc-email.png" alt="Email this event to a friend" /></div>
</div>
<!--END GIG BOTTOM DIV-->
<!--END GIG GUIDE DIV-->
Again, any help is appreciated!
Your code is valid and as far as I can see, without errors. That means that there is something else wrong, I would guess one of the following:
You have not cleared your cache, which is not necessary but could solve weird problems
The children of resource 50 is not published or is hidden
There is something else wrong around your code, making Modx not parsing it correctly.
Edit: You had several errors in your chunk. Try replacing it with this:
<div class="gig-guide">
<div class="gig-info">
<h2>[[+tv.gigname]]</h2>
<strong>[[+tv.gigcity]]</strong>
<img src="[[+tv.gigthumb]]" alt="Contra Clave Contra Event: [[+tv.gigname]]" /></div>
<div class="gig-info">
<h2>[[+tv.gigdate]]</h2>
[[+tv.gigtime]]</div>
<div class="gig-info">
<h2>[[+tv.gigvenue]]</h2>
[[+tv.gigaddress]]</div>
<div class="gig-info">
<h2>[[+tv.gigcost]]</h2>
</div>
<div class="gig-bottom">
<div class="fb-like" data-href="[[+tv.gigfbevent]]" data-send="false" data-width="300" data-colorscheme="dark" data-show-faces="false"> </div>
<div class="gigsocialmedia"><img src="assets/images/ccc-fb.png" alt="This event on Facebook" /> <a class="twitter-share-button" href="https://twitter.com/share?text=[[+tv.gigtwitter]]" target="_blank" data-lang="en"><img src="assets/images/ccc-twiter.png" alt="Tweet this event" /></a> <img src="assets/images/ccc-email.png" alt="Email this event to a friend" /></div>
</div>
<!--END GIG BOTTOM DIV-->
<!--END GIG GUIDE DIV-->
Are your resources you are trying to display hidden? then you need the &showHidden=1 .
Are they unpublished? then you also need the &showUnpublished=1
You may also need the &includeContent=1 ~maybe~
See if you can get away without using the &processTVs
If you are still having issues - leave out the &tpl=``, getResources will just dump it's output to the page so you can see what is actually being returned. Might give you another clue as to what is not happening..