I'm new in foundation for apps. I have to use tabs but i have a problem with titles. I wanna use a two line name. e.g. "Tab < br > 1". How can i do it? Thanks
<div zf-tabs="">
<div zf-tab="" title="Tab 1">
Tab content 1
</div>
<div zf-tab="" title="Tab 2">
Tab content 2
</div>
<div zf-tab="" title="Tab 3">
Tab content 3
</div>
</div>
You could modify the core file "foundation-apps-templates.js" (or the min version). There you can find the template for the zfTabs directive.
I've changed this line:
ng-click="makeActive()">{{ title }}</div>
For this:
ng-click="makeActive()" ng-bind-html="title" ></div>
This worked for me.
Good luck.
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'm using bootstrap collapse but I've a problem. The first collapse I insert work fine but when I repaste it at the bottom of the page they are interfering. The second open the first one. I think I must name them differently or doing something like this but I don't know how to do. This is my code:
<a data-toggle="collapse" href="https://www.blogger.com/blogger.g?blogID=2271780003550934014#demo">Hello</a>
<br />
<div class="collapse" id="demo" style="text-align: left;">
Hello
</div>
What should I do ?
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 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!
I have content in a Rich Text Field where the HTML view of the content looks like this
<li>
<div class="hotel">
<div class="title">Day 0 HILTON LONDON METROPOLE</div>
<div class="detail">225 EDGWARE ROAD LONDON W2 1JU<br/>
44 207 4024141<br/>
www.hiltonlondonmet.com/<br/>
</div>
</div>
</li>
The html source on the website comes out like this
<div class="hotel">
<div class="title">Day 0 HILTON LONDON METROPOLE</div>
<div class="detail">225 EDGWARE ROAD LONDON W2 1JU
<br />44 207 4024141
<br />
www.hiltonlondonmet.com/
<br /></div>
</div>
But when I click on the link (or copy the link) it comes out like this
http://www.myfakesite.com.au/full/path/to/the/item/containing/the/link/www.hiltonlondonmet.com/
Which then gives a page not found error if clicked.
The content of this field is created programmatically, do I need to use the LinkManager to create the link?
I tried creating a link via the Editor button and the source comes out like a plain link but it is handled differently when clicked on.
What you need to do is append "http://" to the href attribute on the link to tell the browser the URL is not located on your domain.
www.hiltonlondonmet.com