FontAwesome: 4.7 (newest version)
Foundation 6.4.2 (newest version)
Whenever I put two or more FontAwesome icons next to each other horizontally, they are not vertically aligned. I've tried various vertical-align CSS styles and cannot get it to work. Please help!
Screenshot:
Code:
<div class="row callout">
<div class="small-2 columns">
<i class="fa fa-2x fa-sort-asc"></i>
<i class="fa fa-2x fa-sort-desc"></i>
</div>
<!-- another div with more columns here, totaling 12 -->
You should use a:{display: inline;}
Interestingly, this example has nothing really to do with Foundation, but everything to do with FontAwesome. The particular icons you've chosen happen to only take up part of the space of the font, and be placed at the top and bottom of the line. Full height icons line up just fine. You can see this illustrated in this code example (linked in this pen: https://codepen.io/kball/pen/mMNyrZ) where I add 2 full-height icons to the 2 half-height icons from your example.
<i class="fa fa-2x fa-sort-asc"></i>
<i class="fa fa-2x fa-sort-desc"></i>
<i class="fa fa-2x fa-snowflake-o"></i>
<i class="fa fa-2x fa-soccer-ball-o"></i>
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've made use of an off-canvas menu that comes in from the left without any trouble. At the bottom of the off-canvas menu there's a close button. Is there anyway to make the close button on an off canvas menu sticky?
For users, it is awkward (and not obvious) to have to scroll to the bottom to find the bottom, especially on long menus.
EDIT: Added some sample code: On the live site there might be 80 links (rather than 3), and I want the div with the close button to always be visible at the bottom of the current screen when the off-canvas menu is visible.
<div class="row">
<button type="button" class="button hide-for-large" data-toggle="filterCanvas">Filters</button>
</div>
<div class="row">
<div class="off-canvas-wrapper">
<div class="off-canvas off-canvas in-canvas-for-large position-left float-left" id="filterCanvas" data-off-canvas>
<div class="sidebar">
<p><strong>List of options</strong></p>
<div class="clearfix">
Link1
Link2
Link3
</div>
<div class="buttons hide-for-large text-center">
<button class="button expanded" data-toggle="filterCanvas">Close</button>
</div>
</div>
</div><!-- /filterCanvas -->
<div class="off-canvas-content float-left" style="min-height: 300px;margin-left:15px;" data-off-canvas-content>
<div class="view-content" style="margin-bottom: 20px;">
Page content here
</div>
</div><!-- /off-canvas-content -->
</div><!-- /off-canvas-wrapper -->
</div><!-- /row -->
Would be easier if you posted some code...
But, saying that, you could position the open/close button relative to the viewport, that way you could just have it fixed to the bottom left, and just adjust it when open.
As said, we would need some code though for this to be useful.
Edit: Based upon code sample provided
So given your example, you could do something as simple as the below, and just toggle the 'activated' class when opening/closing the menu.
<!-- The below button doesnt need to be in a row, as will be fixed,
the activated class will only be present when the sidebar is
open and not by default -->
<button type="button"
class="button hide-for-large off-canvas-button activated"
data-toggle="filterCanvas">Filters</button>
<div class="row">
<-- example code removed for brevity -->
</div><!-- /off-canvas-content -->
.off-canvas-button {
position: fixed;
left: 2em; // change to desired space from edge
bottom: 2em; // change to desired space from edge
}
.off-canvas-button.activated {
left: 6em; // adjust to suit with of sidebar (example is 4em)
}
I have a ember template with 2 sections, where one section is visible by default and other one is hidden until I hit a button.
I am using liquid-fire, most specifically the liquid-if helper to do a simple fade in / fade out of the 2 sections. This works however there is a slide up / slide down that occurs between toggling the 2. As anyone seen this behavior before? I would to prevent this slide effect from happening
Here's sample how template looks like:
{{#liquid-if isPasswordResetLinkConfirmVisible class="lf-fade"}}
<h1 class="text-center">{{t 'reset_password.text.resend_email_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.resend_email_line_1'}}<br/>
{{t 'reset_password.text.resend_email_line_2'}}
<i class="fa fa-envelope-o email-icon"></i>
</p>
{{/liquid-if}}
{{#liquid-if isPasswordResetLinkVisible class="lf-fade"}}
<h1 class="text-center">{{t 'reset_password.text.expired_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.expired_line_1'}}<br/>
{{t 'reset_password.text.expired_line_2'}}
</p>
{{mx-button action=(action "sendNewPasswordResetLink") size="large" label=(t 'action.send_new_link') block=true}}
{{/liquid-if}}
Here's a sample of my transition
this.transition(
this.hasClass('lf-fade'),
this.toValue(true),
this.use('fade', {
duration: 600
})
);
Thanks, I was able to find a solution looking at the code. Seems what Im experience is related to fact my content is different size and doing slide animation to resize you can deactivate that by doing by using the enableGrowth param
{{#liquid-if isPasswordResetConfirmVisible class="lf-fade" enableGrowth=false}}
You want to put the two templates into an if/else like this:
{{#liquid-if isPasswordResetLinkConfirmVisible use="fade"}}
<h1 class="text-center">{{t 'reset_password.text.resend_email_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.resend_email_line_1'}}<br/>
{{t 'reset_password.text.resend_email_line_2'}}
<i class="fa fa-envelope-o email-icon"></i>
</p>
{{/else}}
<h1 class="text-center">{{t 'reset_password.text.expired_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.expired_line_1'}}<br/>
{{t 'reset_password.text.expired_line_2'}}
</p>
{{mx-button action=(action "sendNewPasswordResetLink") size="large" label=(t 'action.send_new_link') block=true}}
{{/liquid-if}}
Notice too I used use="fade" in the liquid-if which means I don't have to create a transition.
#jpoiri you can read more about the transitions here
I'm new to Foundation and I'm trying to mix several components of Foundation into one nav bar just by using their classes and data attributes they've provided and demoed in their html.
I followed instructions for Responsive Toggle Dropdown at: http://foundation.zurb.com/sites/docs/responsive-navigation.html
And I want to make that Sticky. See: http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation , 'Creating a sticky Nav Menu with Title Bar, DropdownMenu, and Sticky!'
They left out the toggle part so I don't know if this is even feasible by using just the classes and data attributes they provide for the html.
I can get them both to work separately but not together. It seems buggy but it could be me. I'd love to hear from anyone out there who might have succeeded in doing this!
This is what I have so far. The wider window is sticky and responsive. The dropdown initially falls behind the jumbotron until you scroll up a bit.
The narrow window's responsive toggle works but the sticky does not. And initially the dropdown falls beneath the jumbotron until you widen the window a bit. The drilldown works fine.
This is the code:
<div class="row">
<div data-sticky-container>
<div class="top-bar" data-responsive-toggle="main-menu" data-hide-for="medium" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1">
<button class="menu-icon" type="button" data-toggle></button>
<div class="top-bar-title">Fruit Is Good</div>
</div>
</div>
<div data-sticky-container>
<nav class="top-bar" id="main-menu" data-sticky data-options="marginTop:0;" style="width:100%" >
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
<li class="menu-text">Fruit Is Good</li>
<li class="active">Home</li>
<li>Apples</li>
<li>Citrus
<ul class="vertical menu">
<li>Oranges</li>
<li>Limes</li>
<li>Lemons</li>
</ul>
</li>
<li>Bananas</li>
<li>Gallery</li>
</ul>
</div>
</nav>
</div>
</div>
And you can find the demo here: http://lucillekenney-demos.com/fruit/home.html
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">