<ul class="nav nav-pills nav-stacked" style="list-style: none">
<li *ngFor = "#el of dragZoneElems; #idx = index">
<h4 style = "position: fixed; top : 'idx'* 10" [dragResponder] = "el">{{el.first}} {{el.last}}</h4>
</li>
</ul>
I need the position to be fixed for the h4 elements and still order them top down. I am creating a drag directive that requires these elements to have position fixed in order to be dragged. How can I achieve this. The above code does not work.
Relevant Demo
<ul class="nav nav-pills nav-stacked" style="list-style: none">
<li *ngFor = "#el of dragZoneElems; #idx = index">
<h4 [style.position]="'fixed'" [style.top.px]="idx*10" [dragResponder] = "el">{{el.first}} {{el.last}}</h4>
</li>
</ul>
Use ngStyle
<h4 [ngStyle]="{'position': 'fixed', 'top' : 'idx'* 10}" > ... </h4>
or
<h4 [style.position]="'fixed'" [style.top]="'idx'* 10" > ... </h4>
Related
I have a created a second level submenu on my navbar on Liferay 6.2
I have tried to hide the right arrow caret that is shown always on dropdown menu, when it has a child. You can see it here:
https://s10.postimg.org/67vbfzu7d/caret.jpg
<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
<div class="navbar-inner">
<div class="collapse nav-collapse">
<ul class="nav navbar-nav sf-menu" >
#foreach ($nav_item in $nav_items)
#set($nav_li_css_class = "")
#if ($nav_item.isSelected())
#set($nav_li_css_class = $nav_li_css_class+" selected")
#end
#if ($nav_item.hasChildren())
#set($nav_li_css_class = $nav_li_css_class+" dropdown")
#end
<li class="$nav_li_css_class">
#if ($nav_item.hasChildren())
<a href="$nav_item.getURL()" $nav_item.getTarget() data-hover="dropdown" data-delay="100" data-close-others="false">
<p>$nav_item.icon() $nav_item.getName()</p>
</a>
#else
<a href="$nav_item.getURL()" $nav_item.getTarget()>
<p>$nav_item.icon() $nav_item.getName()</p>
</a>
#end
#if ($nav_item.hasChildren())
<ul class="dropdown-menu">
#foreach ($nav_child in $nav_item.getChildren())
#set($nav_li_css_class = "")
#if ($nav_child.isSelected())
#set($nav_li_css_class = " selected")
#end
#if ($nav_child.hasChildren())
#set($nav_li_css_class = " dropdown-submenu")
#end
<li class="$nav_li_css_class">
#if ($nav_child.hasChildren())
<a href="$nav_child.getURL()" $nav_child.getTarget() data-hover="dropdown" data-delay="100" data-close-others="false">
<span>$nav_child.icon() $nav_child.getName()</span>
</a>
#else
<a href="$nav_child.getURL()" $nav_item.getTarget()>
<span>$nav_child.icon() $nav_child.getName()</span>
</a>
#end
#if ($nav_child.hasChildren())
<ul class="dropdown-menu">
#foreach ($nav_child_child in $nav_child.getChildren())
#if ($nav_child_child.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_child_child.getURL()" $nav_child_child.getTarget()>
<p style="word-wrap:break-word; white-space:pre-line; text-align:left; display:block; ">$nav_child_child.getName()</p>
</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
#end
</li>
#end
</div>
</div>
</ul>
</nav>
<script>
Liferay.Data.NAV_LIST_SELECTOR = '.navbar-inner .nav-collapse > ul';
</script>
This is a requirement from the company. they want to hide the caret. I have been looking everywhere on my code, but cannot find the way to hide it. I have opened the navigation css and scss styles to try to hide it but can't find the solution. the ugly part is that the caret is not detected in firefox or chrome element inspector so, can't find a route.
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
Attempt 1
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active">Homeaaa</li>
<li>Profilefff</li>
<li>Messagesbbb</li>
</ul>
</div>
JSfiddle
I have also tried setting a data-toggle attribute to "tab", but that only allowed me to click between tabs, it didn't separate the aaa/fff/bbb into different tabs.
This should be possible to be done without any JavaScript.
Attempt 2
The closest I've gotten to a working one is:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JSfiddle
But this didn't change the URL of the viewer to /#ter or /#gin on click. Also it doesn't seem to work normally in the fiddle...
Your jsFiddle works as expected -- anchor links take you to #gin and #ter. On the other hand, I believe you need to use some JavaScript to actually change the active tab. Here's a try that uses a bit of jQuery:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
$(".nav-tabs li a").click(function() {
var li = $(this).parent("li");
var wch = this.getAttribute("href");
$(li).addClass("active"); //make current li active
$(li).siblings("li").removeClass("active"); //make others inactive
$(".tab-content div").removeClass("active"); //make all tabs inactive first
$(wch).addClass("active"); //activate our tab;
return false; //don't change URL
});
});
And a little demo: little link. Note that the use of jQuery isn't needed; you can easily convert to vanilla JavaScript if you want to avoid using it.
Hope that helped!
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>
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.