I can't seem to figure out how to change the height of list items in a jquery mobile navbar. I've looked through all the css and tried changing everything I've found but nothing has worked so far. Hope someone can help!
Here's the code:
<div data-role="page" data-theme="a">
<div data-role="header" style="background: url('../images/stripe.gif') repeat top left;">
<div data-role="navbar">
<ul class="custom-navbar">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
Here's a link to see how it's rendering. The 7 items at the top (the days of the week), as you can see have lots of space above and below them inside their borders. I want much less space there.
<ul class="custom-navbar ui-grid-f">
<li class="ui-block-a"><span class="ui-btn-inner"><span class="ui-btn-text">Sun</span></span></li>
<li class="ui-block-b" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Mon</span></span></li>
<li class="ui-block-c" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Tue</span></span></li>
<li class="ui-block-d" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Wed</span></span></li>
<li class="ui-block-e" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Thu</span></span></li>
<li class="ui-block-c ui-block-f" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Fri</span></span></li>
<li class="ui-block-g" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Sat</span></span></li>
</ul>
There is your initialized grid. You can see that I added padding-left: -5px to all but the first <li> element to take away the space between them. I would either use a class to add the margin to the elements or if you are targeting browsers that support CSS3 then you can use the :nth-child() selector to get all but the first <li> element.
Update
Here is how to change your code so that it will look like the above code after jQuery Mobile initializes it:
<ul class="custom-navbar">
<li>Sun</li>
<li style="margin-left: -5px;">Mon</li>
<li style="margin-left: -5px;">Tue</li>
<li style="margin-left: -5px;">Wed</li>
<li style="margin-left: -5px;">Thu</li>
<li style="margin-left: -5px;">Fri</li>
<li style="margin-left: -5px;">Sat</li>
</ul>
Related
On my aspx page I have the following list items/divs. Is there a way to make the tab in position 1 (divReferralTab) the selected tab on page load by referencing the div or the list item?
<div id="mainTabs" class="povMainTabs">
<ul id="ulMainTabs" runat="server">
<li id="liRDCTab" runat="server"><asp:Label runat="server" ID="lblRDC" /></li>
<li id="liReferralTab" runat="server">Referral</li>
<li id="liContactsTab" runat="server">Holistic/Contact</li>
</ul>
<div id="divRDCTab"></div>
<div id="divReferralTab"></div>
<div id="divContactsTab"></div>
</div>
If I understand you right, you can try setting the z-index of the control you need first.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
If you want the referral "bullet" first then try just listing it first:
<div id="mainTabs" class="povMainTabs">
<ul id="ulMainTabs" runat="server">
<li id="liReferralTab" runat="server">Referral</li>
<li id="liRDCTab" runat="server"><asp:Label runat="server" ID="lblRDC" /></li>
<li id="liContactsTab" runat="server">Holistic/Contact</li>
</ul>
<div id="divRDCTab"></div>
<div id="divReferralTab"></div>
<div id="divContactsTab"></div>
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
I am using jquery mobile and I have a question on how to apply css. I have the image below and I would like the $10 on the same line as the other text, except aligned to the right.
I am used to twitter bootstrap where I would have all of the text on the same row and then have the content sit in different spans (span10 and span2, perhaps). Any advice on how to do this using jquery mobile?
Code:
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal">
<a class="changePageButton" data-transition="slide">
<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top"><h2>Himalayan Flavors<small> (0.5 mi)</small></h2>
<span style="float:right"><label for="province">$10</label></span>
<right><p>$40 for $20</p></right></li>
<li class="custom_listview_img" style = "background-image:url('http://c.yipitcdn.com/thumbor/SOWRPRFYvkagojw-sA_VPeSKK_k=/408x357/smart/c.yipitcdn.com/deal/20-to-spend-on-food-and-drink-3761-1374483321.jpg');"></li>
</a>
</ul>
<style>
.custom_listview_img {
margin:0px;
padding:0px;
background-repeat:no-repeat;
background-size:100%;
height:150px;
}
</style>
if you are using jquery mobile, you can use
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal">
<a class="changePageButton" data-transition="slide">
<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top">
<h2>Himalayan Flavors<small> (0.5 mi)</small></h2>
<p class="ui-li-aside"><strong>$10</strong>PM</p>
<p>$40 for $20</p>
</li>
</a>
</ul>
http://jsfiddle.net/4ZbnZ/
OK, i have no idea how it append, this form : http://xquives.kiaistudio.com/new-form/index.php have a two column field. But in IE7 it's in one column, but not in ie8 or 9 or FF of chrome. Can you please tell me what BAD i have done, or how to make IE behave like normal browser. I have take more that 2 hours testing... and i have NO IDEA where to look !
You're markup doesn't lend itself well to crappy ie7. You're markup looks generally like this:
<ul>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
</ul>
This is pretty error prone.
You'd be better off with parent containers that drive the columns like so:
<div style="width: 50%; float: left">
<ul>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
</ul>
</div>
<div style="width: 50%; float: left">
<ul>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
</ul>
</div>
EDIT: if you're married to this markup structure, you can hack ie7 by adding:
UL{*overflow:visible;}
.autocolumn LI {*width: 48%;}
The better thing to do is layout your columns in a way like i've described above
The page footer added as fixed icon based navbar. but when it come to display, naevbar converted to a grid layout. that is, three columns and two rows grid layout.
Following script I have used for footer nevBar,
<div data-role="footer" class="nav-footer" data-position="fixed">
<div data-role="navbar" class="nav-footer" data-grid="d">
<ul>
<li>H</li>
<li>M</li>
<li>A</li>
<li>T</li>
<li>S</li>
</ul>
</div>
</div>
but it render as follows.
<div class="nav-footer ui-bar-a ui-footer ui-footer-fixed fade ui-fixed-overlay" data-position="fixed" data-role="footer" role="contentinfo">
<div class="nav-footer ui-navbar" data-grid="d" data-role="navbar" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-a">...</div>
<li class="ui-block-b">...</div>
</ul>
</div>
</div>
Content of each li as follows.
XXX ==>
<li class="ui-block-a">
<a id="home" class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="custom" href="#" data-theme="a">
<span class="ui-btn-inner">
<span class="ui-icon ui-icon-custom"></span>
<span class="ui-btn-text">H</span>
</span>
</a>
</li>
My output shows as two rows and three colomns grid. Please can you find the reason.
Check this out: http://jquerymobile.com/test/docs/buttons/buttons-grouped.html
<div data-role="controlgroup" data-type="horizontal"> your items </div>
You have specify the classes on your li elements to tell how many columns you want
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-D">...</div> <--D here, column 4
<li class="ui-block-E">...</div> <--E here, column 5
</ul>
Default number of columns is three I guess, which is why the last two were pushed to the next row.