JointsWP Flex Top Bar align-right not working - zurb-foundation

I'm using JointsWP with Foundation 6 in Flex mode. I'm trying to contain the top bar to the grid, which is working with "row column", but I can't align the top-bar-right to the right for some unknown reason. This is my code:
<div class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="<?php echo $breakpoint ?>">
<button class="menu-icon" type="button" data-toggle></button>
</div>
<div class="top-bar" id="top-bar-menu">
<div class="row column">
<div class="top-bar-left show-for-<?php echo $breakpoint ?>">
<ul class="menu">
<li><?php bloginfo('name'); ?></li>
</ul>
</div>
<div class="top-bar-right align-right">
<?php joints_top_nav(); ?>
</div>
</div>
</div>
And this is how it looks:
How can I make sure that the menu is aligned to the right?


This is a Foundation bug (not JointsWP specific) that is going to be addressed in the 6.2.1 release.
https://github.com/zurb/foundation-sites/issues/8409

Related

Foundation 6 Off-Canvas Button Won't Work

I am having an issue with Foundation 6 and off-canvas. I have tested multiple imports of Foundation's full JS file and even disabled all other site javascript files. For some reason, when clicking the data toggle button, no javascript is firing to open the off canvas portion. I can manually trigger it using the console just fine. Was hoping someone could look over my HTML and see if I am missing something that wasn't included in the documents.
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-right" id="offCanvasNav" data-off-canvas>
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<header class="site-header">
<div class="row">
<div class="small-10 small-order-1 medium-3 medium-order-1 columns align-middle">
<a id="header-logo" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="site-logo" src="<?php echo get_theme_mod( 'station-logo' ); ?>">
</a>
</div>
<div class="small-2 small-order-2 medium-1 medium-order-3 columns nav-icon-wrap">
<button type="button" class="button" data-toggle="offCanvasNav">Open Menu</button>
</div>
<div class="small-10 small-order-3 medium-8 medium-order-2 columns align-middle">
<div class="row">
<?php get_template_part( 'parts/header/audio-player' ); ?>
</div>
</div>
</div>
<?php get_template_part( 'parts/header/alert-bar' ); ?>
</header>

Regex capture links in a group

I need some help in order to capture all the links from this kind of source:
<div class="rc" data-hveid="64">
<h3 class="r">Exploit-ID » admin</h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">www.exploit-id.com/author/admin/page/192</cite>
<div class="action-menu ab_ctl"><a class="_Fmb ab_button" href="#" id="am-b5" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQ7B0IQjAF"><span class="mn-dwn-arw"></span></a>
<div
class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQqR8IQzAF">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:YjSqy1rHChIJ:www.exploit-id.com/author/admin/page/192+&cd=6&hl=en&ct=clnk&gl=ro" onmousedown="return rwt(this,'','','','6','AFQjCNG68C2DPiAcZmzMREpEY6Jr6vk_yA','FxEOdBFVsvQ3dMMfmjFVHA','0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQIAhEMAU','','',event)">Cached</a>
</li>
</ul>
</div>
</div>
</div><span class="st"><span class="f">Oct 4, 2011 - </span>Email : f3arm3d3ar#gmail.com Google-<em>Dork</em> : :) Guess it. <em>Tested</em> on : Ubuntu 10.04 Web-App ... <em>2</em>] The Blue Genius : My Boss. 3] str0ke ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="70">
<h3 class="r">The Script Thread - Ars Technica OpenForum</h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">arstechnica.com/civis/viewtopic.php?t=472903</cite>
<div class="action-menu ab_ctl"><a class="_Fmb ab_button" href="#" id="am-b6" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQ7B0ISDAG"><span class="mn-dwn-arw"></span></a>
<div
class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQqR8ISTAG">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:5Jwa1Yuai-UJ:arstechnica.com/civis/viewtopic.php%3Ft%3D472903+&cd=7&hl=en&ct=clnk&gl=ro" onmousedown="return rwt(this,'','','','7','AFQjCNFlNrbGfSbSV-iPPPi8IxcUqzktPw','EbLNu4w0MQUwTey84xbfNA','0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQIAhKMAY','','',event)">Cached</a>
</li>
</ul>
</div>
</div>
</div>
<div class="f slp">Jul 19, 2004 - 40 posts - ‎23 authors</div><span class="st">objResultsFile.WriteLine "<TR><TH COLSPAN='<em>2</em>'>Click Server Name For Detailed " _ ... REM - It is recommended to <em>test</em> in a lab first. REM</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="76">
<h3 class="r">Is it possible to get a page when a process is started - Ars ...</h3>
<div class="s">
<div>
<div class="f kv _SWb" style="white-space:nowrap"><cite class="_Rm">arstechnica.com/civis/viewtopic.php?f=17&t=624507</cite>
<div class="action-menu ab_ctl"><a class="_Fmb ab_button" href="#" id="am-b7" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="m.tdd;keydown:m.hbke;keypress:m.mskpe" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQ7B0ITjAH"><span class="mn-dwn-arw"></span></a>
<div
class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:m.hdke;mouseover:m.hdhne;mouseout:m.hdhue" data-ved="0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQqR8ITzAH">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:PyKSd_PhIsoJ:arstechnica.com/civis/viewtopic.php%3Ff%3D17%26t%3D624507+&cd=8&hl=en&ct=clnk&gl=ro" onmousedown="return rwt(this,'','','','8','AFQjCNG4l4bXQwnIsp196jLQbxNEql_zKQ','JZ-s6VvMPwHVE6iqZBs2HQ','0ahUKEwj3jpmq_YHLAhWFVSwKHUTjBAMQIAhQMAc','','',event)">Cached</a>
</li>
</ul>
</div>
</div>
</div>
<div class="f slp">24 posts - ‎8 authors</div><span class="st">Posted: Thu Oct 02, 2003 <em>2</em>:17 pm ... "the <em>dork</em> formerly known as Spiff" .... Also, in my brief <em>test</em> it would only send a message once and not constantly while the ...</span>
</div>
</div>
</div>
<!--n-->
</div>
<div class="g">
<!--m-->
<div class="rc" data-hveid="82">
<h3 class="r">Psychology | Akinbode Olanike - Academia.edu</h3>
<div class="s">
<div>
Sorry for the huge source. Anyways, I want to capture all the links between
<h3 class="r"><a href="
And
" onmousedown="return rwt
Can someone help me with the regex expression?

This should work to capture all strings inside href attribure: href="([^"]+)"

Foundation 5: removing a gap at the left of my column

I want to get rid of the gap at the left of my green button on this screenshot. I can't seem to find any way to remove it.
Markup:
<div class="row">
<div class="small-4 medium-5 large-4 columns">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>
aa

By default, Foundation applies a right and left padding to columns. I've created a snippet with a couple of options. You can target the column; or simply create a class and add a rule for left-padding.
/* -- target the first-child column -- */
.row .columns:first-child {
padding-left: 0;
}
/* -- create a class ('button-enroll' for example ) -- */
.button-enroll {
padding-left: 0;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="small-4 medium-5 large-4 columns button-enroll">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>

Foundation spacing issue

I'm using foundation 5 and trying to put some smaller controls together on one line and having some issues. I'm using offset in the main grid to center the form. That needs to stay the same. The real question is how do I get the 6 controls to look decent together on the same line (3 labels, 3 textboxes)? I'd be very happy with a little extra spacing separating Servings and the Prep and Cook time controls.
Code:
<div class="row">
<div class="small-3 large-1 large-offset-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Servings:</span></div>
<div class="small-2 large-1 columns left"><input type="text" id="servings" name="servings" value="<? echo $servings ?>" /></div>
<div class="small-7 large-3 columns">
<div class="row">
<div class="small-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Prep (min):</span></div>
<div class="small-2 columns"><input type="text" id="prep_min" name="prep_min" value="<? echo $prep_min ?>" /></div>
<div class="small-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Cook (min):</span></div>
<div class="small-2 columns"><input type="text" id="cook_min" name="cook_min" value="<? echo $cook_min ?>" /></div>
</div>
</div>
<div class="large-4 columns"> </div>
</div>
I've attached a screenshot of how it looks on the page. As you can see it's overlapping.

Remove "right" class and give them some space.

Log In form for different screens

Here is my form:
<form>
<div class="row">
<div class="small-12 medium-6 small-centered columns">
<div class="row">
<div class="medium-3 columns">
<label for="right-label" class="right inline">Username:</label>
</div>
<div class="medium-9 columns">
<input type="text" id="right-label" placeholder="Username">
</div>
</div>
<div class="row">
<div class="medium-3 columns">
<label for="right-label" class="right inline">Password:</label>
</div>
<div class="medium-9 columns">
<input type="text" id="right-label" placeholder="Password">
</div>
</div>
<div class="row">
<div class="columns">
<input id="checkbox1" type="checkbox" class="right"><label for="checkbox1" class="right">Remember Me</label>
</div>
</div>
<div class="row">
<div class="columns">
<input type="submit" class="button right" value="Log In">
</div>
</div>
</div>
</div>
I have two questions:
The username and password labels sit to the left of the inputs using the right class, how can I switch this off when the screen size is small? I would like the labels to be centered at this break point.
I would like the button to be it's regular size apart from on small, where it should expand to fill the row. how can I do this?

Visibility classes let you show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements users see depending on their browsing environment.
<p class="panel">
<strong class="show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>
http://foundation.zurb.com/docs/components/visibility.html