I'm working on a jQuery mobile app and was wondering if anyone could help with button alignment within a list divider. Here is a link to a jsFiddle I created showing the button next to the text. I was wondering if it was possible to align the button to the right. I've tried adding a div around the button with a style of style="text-align: right;", but that pushes the button down like this, which I don't want.
Is there anyway to keep the text and the button on the same line, with the button aligned to the right? Any help is appreciated.
you could do it by using a 2 column layout grid, see jsfiddle
code:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">
<div class="ui-bar ui-grid-a">
<div class="ui-block-a" style="margin-top:10px;">List Header</div>
<div class="ui-block-b" style="text-align:right;">Add</div>
</div>
</li>
<li>List item 1</li>
</ul>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
screenhsot:
Related
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
I tried to several ways to make the code below work. Now there is only one issue left and that the top-bar-title (Site Title) is having a white background when the user scrolls vertical up to the top when it should stay grey the color of the topbar. Does anybody know what is wrong?
<div data-sticky-container>
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%">
<div class="top-bar-title menu-text">Site Title</div>
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>Item 1</li>
<li>Item 1</li>
/ul>
</div>
</div>
</div>
Style your widemenu div in order to keep it from being overwritten by scrolling upward. Here is your menu div with the height added. You could also add that style in your css file.
<div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%;height:50px;">
Good luck!
I wish to create a sticky topbar in Foundation 6.
In foundation 5 this was easy; simply add the "sticky" class to the top bar.
In Foundation 6 I believe you have to use the new "sticky" attribute (http://foundation.zurb.com/sites/docs/sticky.html) like so:
<div data-sticky-container>
<nav class="top-bar sticky" data-topbar role="navigation" data-sticky>
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Website Name</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li class="active">Home</li>
<!-- ... -->
</ul>
</div>
</nav>
</div>
However the top bar looks weird as it doesn't take the full width of the webpage.
What is the correct way of creating a sticky topbar in Foundation 6?
I found a solution and i hope you will enjoy it .
what i find solution you can use this freely anywhere in page and it will work like foundation 5.
foundation 6 is just bit tricky in sticky option okay here is code.
<div id="try">
<nav class="sticky-container" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="try" data-btm-anchor="destroy:bottom" data-margin-top="0" data-margin-bottom="0">
<div class="row columns">
<div class="top-bar-left">
love
</div>
<div class="top-bar-left">
love
</div>
<div class="top-bar-left">
love
</div>
</div>
</div>
</nav>
</div>
as you can i see i add a parent div like "try" you must have to do it to tell the sticky where sticky have to start so i used data-anchor-top="try" ok but if you only add this and leave it will go on top just scroll a page just a bit . for more i added data-btm-anchor="destroy:bottom" else your settings .
for bottom anchor you just have to add a div
<div id="destroy">
finsihed
</div>
better this id you used in footer or use footer id if you want sticky have to move until end of page else anything you like hope you understand .
The bug has been fixed in the 6.2.2 update of foundation for sites
I am using wt-rotator carousel plugin with bootstrap. I have to place a menu on top of the carousel on the top left, in a fixed position. The menu should stay there even as the images fade in and fade out. Is there a way to do it using CSS?
Edit: added the code below.
So far just this code below. it is a bootstrap jumbotron, which has a wt-rotator carousel inside. On top of this carousel, I have to put a menu.
<div class="jumbotron">
<div class="container">
<div id="banner-container">
<div class="wt-rotator">
<div class="c-panel">
<div class="thumbnails">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="buttons">
<div class="prev-btn"></div>
<div class="play-btn"></div>
<div class="next-btn"></div>
</div>
</div>
</div>
</div>
</div>
You can use a outside div with position absolute and z-index superior to the slider, and put that div on front of the slider.
I am using bootstrap 3.2.0. I have some content in the tabs and I want to create an anchor link to this content in the tabs to different websites. Here is my code:
<div class="bs-docs-example">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li> Sample#1 </h1></li>
<li> Sample#2 </h1></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1A">
<li id="ndf_35"></li>
</div>
<div class="tab-pane" id="2A">
<li id="ndf_36"></li>
</div>
</div>
</div>
</div>
I create the link like this :
some text
But it's not working. Does anyone have an idea how to fix this?
Demo
Its working fine.
Check that
You have included jquery (you need jquery for bootstrap.js)
You have included bootstrap.js
open <h1> tags