How to hide right caret on dropdown menu liferay 6.2 - css

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.

Related

how to pass the current tag instance to the events in angular2

I have a left sidebar menu which is populated by <li> and <ul> tag elements. I have handled the menu click event to expand/collapse the sub-menu items.
The problem I am facing here is I am not able to pass/identify the current instance of the tag element to do the expand/collapse i.e. If i expand a particular menu item all the other menus items are also getting affected. How do i handle this issue by identifying the current instance to do the required changes.
Please refer the snapshot about the issue
my HTML looks like below
<li [class.active]="menuLinkActive" (click)="MenuLinkToggle($event)">
<a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" [style.display]="subMenuDisplay">
<li>
Dashboard
</li>
<li>
Dashboard2
</li>
<li>
Dashboard3
</li>
</ul>
</li>
<li [class.active]="menuLinkActive" (click)="MenuLinkToggle($event)">
<a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" [style.display]="subMenuDisplay">
<li>
General Form
</li>
<li>
Advanced Components
</li>
</ul>
</li>
my component where i have handled the events
export class Layout {
menuLinkActive: any;
subMenuDisplay: any;
isSubMenuExpanded: any;
isMenuVisible: any;
MenuLinkToggle(event) {
if (this.isSubMenuExpanded) {
console.log("if (this.isMenuExpanded) {");
this.menuLinkActive = "";
this.subMenuDisplay = "none";
this.isSubMenuExpanded = false;
}
else {
console.log("else (this.isMenuExpanded) {");
this.menuLinkActive = "active";
this.subMenuDisplay = "block";
this.isSubMenuExpanded = true;
}
}
}
<li [class.active]="menuLinkActive" #li1 (click)="MenuLinkToggle($event, li1)">
MenuLinkToggle(event, element) {
or
MenuLinkToggle(event) {
event.target...

CSS: How to position elements in ng-for loop using position : "fixed"

<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>

Navigation styling - selecting child li only

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

Boostrap: .affix-bottom doesn't move to the bottomĀ of its parent

I am using Bootstrap's affix side-navigation. When you scroll down to the bottom of the element which the navigation refers to, the class .affix-bottom is applied to the navigation element and it should scroll (exactly in the way the side navigation in the Boostrap documentary works).
However, when the class changes to affix-bottom and the following styles are applied, the affix-navigation moves to the top of the page (and out of the viewport).
affix-bottom {
position: absolute;
top: auto;
bottom: 200px;
}
I am not sure wether the issue is related to Bootstrap. I have compared the styles Bootstrap natively uses and the styles I use and they are exactly the same.
This is the html I use:
<div class="row">
<div class="span3 bs-docs-sidebar" id="navfaq">
<ul class="nav nav-list bs-docs-sidenav affix-top">
<li class="">
<a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go to anchor1</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go to anchor2</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go to anchor3</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go to anchor4</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go to anchor5</a>
</li>
<li class="active">
<a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">Go to anchor6</a>
</li>
<li>
<a>
<button class="btn pull-center">Contact</button>
<button class="btn pull-center">Call</button>
<p class="caption">on weekdays</p>
</a>
</li>
</ul>
</div>
<div class="span9">
...
</div>
As Bootstrap's Affix is having some issues, I wrote my own script which changes the classes of the affix from .affix-top to .affix when you scroll further than the top-position of the .row element and when you scroll to the bottom of the .row element, it will add the class .affix-bottom.
$(document).ready(function() {
$(window).scroll(function(){
if( $('.nav.nav-list.bs-docs-sidenav').height() >= (($('#anchor1').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40 ) ) ) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom');
}
else {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');
if( $(window).scrollTop() >= (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
}
else if( $(window).scrollTop() < (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
}
}
});
});
This keept my up all night and any help would be greatly appreciated.
Edit: Ok, I finally fixed it. However, it's more of a workaround. I changed the JS to the following:
$(document).ready(function() {
$(window).scroll(function(){
if( $('.nav.nav-list.bs-docs-sidenav').height() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40 ) ) ) {
$(".span3.bs-docs-sidebar").css({
'position': 'relative',
'height': $('.row .span9').height()
});
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom');
}
else {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');
if( $(window).scrollTop() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
}
else if( $(window).scrollTop() < (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
}
}
});
});
I have no idea why it's working in Bootstrap without the position:relativ and the equivalent height for the span3.
try this
just add class affix to div
<div class="span3 bs-docs-sidebar affix affix-top" id="navfaq">
<ul class="nav nav-list bs-docs-sidenav ">
<li class=""><a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go
to anchor1</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go
to anchor2</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go
to anchor3</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go
to anchor4</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go
to anchor5</a> </li>
<li class="active"><a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">
Go to anchor6</a> </li>
<li><a>
<button class="btn pull-center">
Contact</button>
<button class="btn pull-center">
Call</button>
<p class="caption">
on weekdays</p>
</a></li>
</ul>
</div>

CSS tabs not working with anchors on bootstrap?

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!

Resources