I'm new to using Foundation and React. When trying to construct a Nav using the top-bar-right class, I'm experiencing a problem in which my li items(specifically for "Contractors & Businesses" and "Recreational & MotorCycle"), if they happen to be more than one word, began to drift apart vertically when I reach certain sizes. I tried giving the li items classes, and setting a max height, but this does not work. Picture and code is included. Pic of Problem
<nav className="top-bar nav-desktop">
<div className="wrap">
<div className="top-bar-left">
<h5 className="site-logo">
Insurance</h5>
</div>
<div className="top-bar-right stacked-for-large">
<ul className="menu menu-desktop">
<li>Bonds</li>
<li className="Contractors">Contractors & Businesses</li>
<li>Auto</li>
<li>Home</li>
<li>Umbrella</li>
<li>Life</li>
<li>Recreational & Motorcycle</li>
</ul>
</div>
</div>
</nav>
Related
const footer = article.querySelector('footer'); //gets the node correctly
then
comments = footer.querySelector('span[data-sigil="comments-token"]'); //doesn't capture the node
this is the fragment i'm trying to traverse (where a span element with a data-sigil="comments-token" attribite exists)
<footer class="_22rc" data-ft="{"tn":"*W"}">
<div class="_2ip_ _4b44" id="feedback_inline_2988733091416038" data-sigil="mufi-inline">
<div class="_34qc _3hxn _3myz _4b45"><a
href="/groups/2965875847035096?view=permalink&id=2988733091416038&anchor_composer=false&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=%2AW-R"
role="button" data-sigil="feed-ufi-trigger">
<div class="_rnk _77ke _2eo- _1e6 _4b44" id="u_0_3f" data-sigil="reactions-bling-bar">
<div class="_1w1k" data-sigil="reactions-sentence-container"><span class="_qfz _77kf">
<div class="_1g05 _77lc" style="z-index:3"><i class="img sp_t0F5GNpHI8g sx_bb89e7"
role="presentation"><u>Mi piace</u></i></div>
</span>
<div class="_1g06" aria-label="4 ha aggiunto reazioni, tra cui Mi piace">4</div>
</div>
<div class="_1fnt"><span class="_1j-c" data-sigil="comments-token">Commenti: 5</span></div>
</div>
</a></div>
<div class="_52jh _7om2 _15kk _15ks _15km _4b47 _4b46" data-sigil="ufi-inline-actions">
<div class="_52jj _15kl _3hwk _4g34"><a class="_15ko _77li touchable"
data-store="{"reaction":0,"feedbackTarget":2988733091416038,"kaiOSReactions":false}"
aria-pressed="false" role="button" data-ft="{"tn":">"}" id="u_0_3g"
data-sigil="touchable ufi-inline-like like-reaction-flyout" data-autoid="autoid_40"
data-uri="https://m.facebook.com/ufi/reaction/?ft_ent_identifier=2988733091416038&reaction_type=1&story_render_location=group&feedback_source=2&is_sponsored=0&ext=1598970363&hash=AeQxJKCaVFJm_BkK&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=%3E%2AW-R">Mi
piace</a>
<div class="_1ekf" role="link" tabindex="-1" data-sigil="screenreader-reactions-trigger">Vedi altre
reazioni</div>
</div>
<div class="_52jj _15kl _3hwk _4g34"><a class="_15kq _77li"
data-click="{"event":"click_comment_ufi","target_id":2988733091416038}"
href="/groups/2965875847035096?view=permalink&id=2988733091416038&fs=2&focus_composer=0&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=S%2AW-R"
data-ft="{"tn":"S"}"
data-sigil="feed-ufi-focus feed-ufi-trigger ufiCommentLink mufi-composer-focus">Commenta</a></div>
</div>
</div>
</footer>
The examples you gave work. See https://jsfiddle.net/zmg8sc7h/
Perhaps the article.querySelector('footer'); is finding another footer section and not the one you're expecting. Try article.querySelectorAll('footer'); or document.querySelectorAll('footer'); to see how many results you get, or try making that part more specific like document.querySelector('footer._22rc');
You might as well just select what you want directly though instead of going through two queries.
document.querySelector('footer span[data-sigil="comments-token"]');
Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...
<div class="list-group bg-light no-border list-group-opt no-radius m-b-none">
<a class="list-group-item" on-tap="enterIndividual">
<div class="primary-info"
<div class="pull-left w-1x">
<img src={{avatar}} class="w-full r-3x"/>
</div>
<div class="pull-left m-l intro">
<span class="text-lg font-bold text-black m-b-sm">{{name}}</span>
<i class="fa fa-user"></i>
<div class="text-muted long-intro">
<span>{{detail}}</span>
</div>
</div>
</div>
</a>
</div>
It works well in computer,but when I tested it in my mobile,it had no react for touching.But if I use on-click instead of on-tap,it performs pretty well.So I am puzzled with this problem.Are there any requirement to use on-tap.Oh,it still has a strange point.If I touch it above a half of the div,it can work.What's the problem?
First, there are some errors in the code:
close the div.primary-info tag
a-tags are not allowed (HTML5) to contain block elements (div) - usually not a problem, but can cause some and will definitely not validate.
I guess your problem is, that the a-tag enclosing everything does not have the proper height and width. Try to give it a background and u'll see how large the a-tag is actually rendered as the tappable area.
U can simply skip the a-tag and move your event on-tag to the div.primary-info
I'm learning AngularJs and I got to a small brick wall...
when I want to split items into tabs, my template is exactly the same for all the tabs, the only small change if the model used in the ng-repeat, as an example:
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tier6">
<div ng-include="'partials/vehicles-6-details.html'"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tier8">
<div ng-include="'partials/vehicles-8-details.html'"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tier10">
<div ng-include="'partials/vehicles-10-details.html'"></div>
</div>
</div>
This way I have to create 3 exact files, where the template is:
<ul class="list-unstyled list-inline list-tier">
<li ng-repeat="tank in tankInfoLevel6" data-sortby="{{playersByTankId[tank].length}}">
<span class="badge">{{playersByTankId[tank].length}}</span>
<img ng-src="{{tankInfo[tank].image}}" alt="" class="tank-img"
pop-over title="Tank fans" fans="tanksFans[tank]" />
<br><b>{{tankInfo[tank].name_i18n}}</b>
<br>({{tankInfo[tank].type_i18n}})
</li>
</ul>
and the only change is tankInfoLevel6 by tankInfoLevel8 and tankInfoLevel10 respectively.
How can I use a simple file?
I've tried:
<div ng-include="'partials/vehicles-details.html'"
ng-init="tierTanks = tankInfoLevel6"></div>
and also with onLoad and onInclude without any good results.
The output is showing the last tab contents in all tabs, so it seems that it loads all but the last call with tankInfoLevel10 is the one that overrides all the tabs.
Is there a way to make this work neatly?
What about ng-repeat?
<div ng-repeat="tankItem in tankItems">
<div ng-include="'partials/vehicles-details.html'"></div>
</div>
In template use tankItem.
Wouldn't a directive work better here, using an attribute to pass/reference the tankItems list?
Hi all I am making my first responsive website.
I am doing it mobile first.
In my html I have given some elements which I do not want to be shown on mobile a class of mobile and those I don't want showing class of desktop
This is working brilliantly.
When I get to my tablet / desktop breakpoint and I reverse these to show the desktop menu for example, it is not working.
.desktop {visibility:visible;} .mobile {display:none;}
<div id="topbar">
<!--Mobile Nav-->
<section>
<div class="mobile container">
<div class="col12">
<div class="click">Menu</div>
<nav id="menu">
<li>home</li>
<li>club information</li>
<li>club kit</li>
<li>membership</li>
<li>event news</li>
<li>calendar</li>
<li>advice</li>
<li>gallery</li>
</nav>
</div>
</div>
</section>
<!--Desktop Nav-->
<section>
<div class="desktop container">
<div class="col12">
<nav id="menu">
<li>home</li>
<li>club information</li>
<li>club kit</li>
<li>membership</li>
<li>event news</li>
<li>calendar</li>
<li>advice</li>
<li>gallery</li>
</nav>
</div>
</div>
</section>
</div>
All you need to do is alternate the .mobile and .desktop classes to be display: block or display: none as and when you need things to be shown/hidden through out your break points.
You're confusing the use of display and visability in your current example