Is it possible, using Foundation Framework, to make a scrollable sticky div like this (StyckyScroll)?
For example:
<div class="row">
<div class="eight columns">
Very long content here
</div>
<div class="four columns">
Small but SCROLLABLE CONTENT here
</div>
</div>
The problem is that the sticky div gets out of the parent container.
Thank you in advance.
Foundation supports a couple types of sticky navigation. If you're looking for a navbar-type implementation, check out the docs on their top bar module (docs and example at: http://foundation.zurb.com/docs/components/topbar.html)
You can implement a sticky navbar in foundation by wrapping the normal top bar module like so:
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
YOUR NAVBAR MARKUP HERE
</nav>
</div>
If you're looking for sticky navigation that's less omnipresent than the top-bar, you can also use their Magellan plugin (docs and example at: http://foundation.zurb.com/docs/components/magellan.html)
Related
I experience an issue with nested views in my Ionic app. I have a custom tab
navigation which is placed within my parent ion-view. The tab navigation is intended to scroll together with the content, which is located in an ion-nav-view underneath. For that I put the scroll="false" onto the child's ion-content.
The problem is, that my content won't expand the parent's height to fit the content's height. It has a height of 100%, which is fixed to the view's initial height. So at the end of the page there is content left, which is never displayed. Here is the template code (I am sorry, I cannot provide a plunkr example):
<ion-view>
<ion-content on-swipe-left="tabs.goToNext()" on-swipe-right="tabs.goToPrevious()">
<div class="tabbed-slidebox">
<div class="tsb-icons">
<div class="tsb-ic-wrp" style="">
Was
Wer
Wo
Wann
</div>
</div>
</div>
<ion-nav-view name="stepContent">
<!-- For illustration I copied ion-view from the template which will be rendered into this ion-nav-view -->
<ion-view view-title="Schadenmeldung">
<ion-content class="step step-what padding" scroll="false">
<!-- CONTENT -->
</ion-content>
</ion-view>
</ion-nav-view>
</ion-content>
<div class="fab-sticky">
<!-- some sticky button here -->
</div>
</ion-view>
See a demo here
My view hierarchy looks somehow like this:
app view (mainly ion-nav-bar)
tabs view (mainly tab navigation)
content view (content intended to expand the ion-view's height)
(I can provide the state config if that helps)
I already played around with the CSS a lot. But since I am no CSS Mastermind, I did not find a solution.
The problem seems to come from the position: absolute of the ion-nav-view. It prevents the height to
adapt to the content.
Can anyone help?
you can add style into ion-nav-view
for example：
<ion-nav-view name="stepContent" style="height: 380px"></ion-nav-view>
In Ionic, we can do something like this for the list view:
<ion-list>
<ion-item href="#">
Butterfinger
</ion-item>
</ion-list>
And also like this:
<div class="list">
<a class="item" href="#">
Butterfinger
</a>
</div>
These 2 basically output the same layout. What is the difference between these 2? Will do it with the div method will result in better performance? If so, then why ion-list?
There is not any differences from CSS styling point of view (except some color styling on child text) between using <ion-list> and <div class="list"> because <ion-list> is a directive and it will render <div class="list"> inside it. If you inspect element you will see this
(rendered html picked from browser element inspection)
<ion-list>
<div class="list">
<ion-item href="#" class="item item-complex">
<a class="item-content" ng-href="#" href="#">
Butterfinger
</a>
</ion-item>
</div>
</ion-list>
As you can see in above code ion-list generate a div with list class.
Plus see the source code of ion-list it will make things more clearer. I am just sharing a line from source code to show what template this directive render
var listEl = jqLite('<div class="list">')
There will be no performance difference between both, but i will suggest you to use <div class="list"> if you do not want to use apis of ion-list and want to have more control over element while doing customization.
As far as your question "why ion-list" is concerned, the directive gives you access to many options in the API. The API methods listed in the bottom of the docs pages (like here for example) gives you a sense of what the directive allows you to do, instead of just using the CSS associated with the class.
Quoting from documentation
However, using the ionList and ionItem directives make it easy to
support various interaction modes such as swipe to edit, drag to
reorder, and removing items.
Conclusion: So it totaly depends upon your requirement, whether to use directive or use simple class on div.
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit
Using
<div class="lift:Menu.builder"/>
menu on website is vertically, any ideas because i cant found anywhere, how to make menu across ?
This is more a CSS question than a Lift question. The HTML produced for the menu looks something like this:
<div class="column span-6 colborder sidebar">
<hr class="space" />
<ul>
<li> <span>Home</span></li>
<li> Login</li>
<li> Sign Up</li>
<li> Lost Password</li>
<li> Search</li>
</ul>
...
</div>
I.e., about as vanilla as possible, so it's very easy to add some CSS to create a horizontal menu out of the list—see for example the "Horizontal lists" examples on Listamatic.
It would be simplest just to add the CSS code to the header in src/main/webapp/templates-hidden/default.html, but you could also use your own separate CSS file without too much fuss.
I have a button, by default it adds the class ui-btn-corner-all. How can I tell it not to use that, as I just want square edges or force another style on there I've created?
<div data-role="content" data-theme="home">
Content
</div>
Live Example:
http://jsfiddle.net/SCw8e/3/
HTML:
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Button w/ jQM Style
Button wo/ rounded corners jQM Style
Button wo/ icon jQM Style
Button wo/ icon/rounded corners jQM Style
</div>
</div>
JS:
$('#default-button-style-1').removeClass('ui-btn-corner-all');
$('#default-button-style-2').removeClass('ui-btn-icon-left');
$('#default-button-style-3').removeClass('ui-btn-icon-left ui-btn-corner-all');
You can use jQuery function removeClass('ui-btn-corner-all'). There are no other ways to do what you want.