Foros de discusión

Liferay 6.2 bootstrap theme and navigation

Sebastian Wikholm, modificado hace 10 años.

Liferay 6.2 bootstrap theme and navigation

Regular Member Mensajes: 104 Fecha de incorporación: 10/03/11 Mensajes recientes
I´ve got at problem with getting a collapsed bootstrap navbar to work in a liferay 6.2 theme. The navbar is working ok when not collapsed, when the screen gets smaller and the navbar menu collapses to a button, the button does not work.

I´ve been unable to debug why this would happen, what i do know is liferay seems to put css classes like 'id="yui_patched_v3......."' on everything and im thinking this might have something to do with it.

Its easy to test with just adding an article with a navbar, can anybody help me getting a custom menu working? Thanks in advance
Sebastian Wikholm, modificado hace 10 años.

RE: Liferay 6.2 bootstrap theme and navigation

Regular Member Mensajes: 104 Fecha de incorporación: 10/03/11 Mensajes recientes
Ok, ive debugged this far:

-Other bootstrap js things are working, bootstrap dropdwon and carousel tested
-Bootstrap collapse is loaded and fired, tested with chrome developer tools and putting some breakpoints in the javascript
-It should be adding and removing css classes in two divs and change a div style, it only changes the classes partially

All the bootstrap code is tested without liferay first, and are all working, they only stop working when put in liferay, ie there seems to be some sort of conflict that disabled the correct functionality of a bootstrap navbar
Fernando Cabrera, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

Junior Member Mensajes: 47 Fecha de incorporación: 1/08/14 Mensajes recientes
Hi Sebastian

Did you find a solution? I have the same problem you described and my tests are quite similar to yours.
I'm working with Liferay 6.2.1 and first I tried whith Boostrap 3.1.1 but now I'm trying with version 2.3.2 but still not working

Any help or clue would be very welcome
Sebastian Wikholm, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

Regular Member Mensajes: 104 Fecha de incorporación: 10/03/11 Mensajes recientes
Yes i did, it was a simple css problem which i cant seem to remember what it was. Ill see if i can find it. The problem was in the default classic theme, which i then changed in my theme
Fernando Cabrera, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

Junior Member Mensajes: 47 Fecha de incorporación: 1/08/14 Mensajes recientes
Thanks, finally I have a progress with the Bootstrap 2.3.2 and this minimum HTML structure:

<nav class="navbar">
	<div class="navbar-inner">
		<div class="container">
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	            <span class="icon-reorder"></span>
	        </a>
		</div>
		<div class="collapse nav-collapse">
			<ul class="nav">
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
			</ul>
		</div>
	</div>
</nav>

It's important remove the id from the nav element (id="navigation")

Still have some issues, for example, multilevel is not working to me, and there is an useless button on the dockbar, but with a hook, CSS style or hidding all the hole dockbar is not big problem
Ali Elderov, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

Robert Rayas, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

New Member Mensajes: 21 Fecha de incorporación: 28/11/14 Mensajes recientes
I have the same issue with non-functional buttons when shrunk down to small size. I think the problem comes from Liferay and Bootstrap having a div with class="navbar-collapse". What I've found is including the bootstrap breaks the portlet cog dropdowns and the top user bar. I haven't tried Jorge's fix though.
Robert Rayas, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

New Member Mensajes: 21 Fecha de incorporación: 28/11/14 Mensajes recientes
I never found a workaround and had to go with straight css. THANKS LIFERAY! I get (hours of) valuable experience by working around your shortcomings.
thumbnail
Achmed Tyrannus Albab, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

Regular Member Mensajes: 158 Fecha de incorporación: 5/03/10 Mensajes recientes
Robert Rayas:
I never found a workaround and had to go with straight css. THANKS LIFERAY! I get (hours of) valuable experience by working around your shortcomings.



Now please someone from LIFERAY say something.
I have recommended Liferay for the latest project for my company.
And big mistake, otherwise you guys say something.

I have 3 weeks for this project and have finished 1 week trying to solve these kind of issues.
Lots of potential but crappy docs and crappy everything else.
thumbnail
Juan Gonzalez, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

Liferay Legend Mensajes: 3089 Fecha de incorporación: 28/10/08 Mensajes recientes
Achmed Tyrannus Albab:

I have 3 weeks for this project and have finished 1 week trying to solve these kind of issues.
Lots of potential but crappy docs and crappy everything else.


Hi Achmed, I can understand your frustation until some extent, but here in the forums are for helping and been constructive.

So please explain your problem and your env. (Liferay version etc).
Jorge Pineda, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

New Member Mensajes: 9 Fecha de incorporación: 16/12/14 Mensajes recientes
Hi
Try to use this for fix it
I used it and it works very well.

https://gist.github.com/randombrad/b5ffb95519eee2c56d87

Regards.
thumbnail
Achmed Tyrannus Albab, modificado hace 9 años.

RE: Liferay 6.2 bootstrap theme and navigation

Regular Member Mensajes: 158 Fecha de incorporación: 5/03/10 Mensajes recientes
Jorge Pineda:
Hi
Try to use this for fix it
I used it and it works very well.

https://gist.github.com/randombrad/b5ffb95519eee2c56d87

Regards.


Thanks to Jorge Pineda... oh my hero.
I have used his to somehow make a work around.
Which some what was easier.

Just had to tweaked CSS a little to hide the dockbar toggle. In custom.css :
#_145_navSiteNavigationNavbarBtn {
	display:none;
}

Also in navigation.vm to avoid confusion on toggling :

I had to do it this way as I have no idea nor the time to study to edit by hook. Poor mans coding emoticon


Hi Achmed, I can understand your frustation until some extent, but here in the forums are for helping and been constructive.

So please explain your problem and your env. (Liferay version etc).


Hi sweethut,
I'm sorry for bursting out earlier but still I am quite frustrated with the documentation of Liferay since 5.x.x.
It has gotten better but no where close to accommodating imho. But that is just me, I'm more of a designer than a coder.

What pissed me off more are these AUI/jQuery/BootStrap/etc. restrictions and complications especially when I am working in such a short time frame. I was under the impression that Bootstrap would be able to be implement without any problems or tweaks...but I spoke too soon.

I am using Liferay 6.2 GA3 with Tomcat bundle. Now developing themes using Liferay IDE with Ant and Liferay Plugins SDK 6.2.
And I wish you could make it less confusing to apply bootstrap to the themes in version 7.

Peace and thanks Jorge Pineda.
Kartik Rao, modificado hace 7 años.

RE: Liferay 6.2 bootstrap theme and navigation

New Member Mensajes: 2 Fecha de incorporación: 12/01/16 Mensajes recientes
I am using the default dockbar which comes with Liferay.
Currently, the dockbar/navbar collapses when screen width is less than 979px.
I want the dockbar/navbar to collapse on screen sizes less than 768px.
I made changes in _variables.scss file as below:

$navbarCollapseWidth: 768px !default;
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;

Copied this file inside diff folder. Deployed the code.
But, still the dockbar collapses on screen size less than 979px.

Am I supposed to make changes in any other files ?
Cristina C.S., modificado hace 6 años.

RE: Liferay 6.2 bootstrap theme and navigation

New Member Mensajes: 11 Fecha de incorporación: 21/05/09 Mensajes recientes
Hello Kartik,

we have the some problem with the dockbar. Could you solve this?

Regards.
Fernando Cabrera, modificado hace 6 años.

RE: Liferay 6.2 bootstrap theme and navigation

Junior Member Mensajes: 47 Fecha de incorporación: 1/08/14 Mensajes recientes
And many years later I came back to this thread, but this time with a code snippet that worked for me and hope that will be helpful for somebody else.

This is my navigation.vm

<div id="navegacion" class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" onclick="jQuery('#menu-nav').show();" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
            </button>
	        <a class="brand" href="$site_default_url" title="#language_format (" go-to-x", [$site_name])">
				<img alt="$site_name" src="${images_folder}/logo.png">
			</a>
	        <div id="menu-nav" class="collapse nav-collapse">
        		<ul aria-label="#language (" site-pages")" class="nav" role="menubar">
	                #foreach ($nav_item in $nav_items)
	                	#if($velocityCount != 1)
							#set ($nav_item_attr_selected="")
							#set ($nav_item_attr_has_popup="")
							#set ($nav_item_caret="")
							#set ($nav_item_css_class="lfr-nav-item")
							#set ($nav_item_link_css_class="")
							#set ($nav_item_data_toggle="")
		
							#if ($nav_item.isSelected())
								#set ($nav_item_attr_selected="aria-selected='true'")
								#set ($nav_item_css_class="$nav_item_css_class selected active")
							#end
		
							#if ($nav_item.hasChildren())
								#set ($nav_item_attr_has_popup="aria-haspopup='true'")
								#set ($nav_item_caret='<span class="lfr-nav-child-toggle"><i class="icon-caret-down"></i></span>')
								#set ($nav_item_css_class="$nav_item_css_class dropdown")
								#set ($nav_item_link_css_class="dropdown-toggle")
								#set ($nav_item_data_toggle='data-toggle="dropdown"')
							#end
		
							<li class="$nav_item_css_class" id="layout_$nav_item.getLayoutId()" $nav_item_attr_selected role="presentation">
								<a aria-labelledby="layout_$nav_item.getLayoutId()" $nav_item_attr_has_popup class="$nav_item_link_css_class" href="$nav_item.getURL()" $nav_item.gettarget() role="menuitem" $nav_item_data_toggle>
									<span>$nav_item.icon()<div><span>$nav_item.getName() $nav_item_caret</span></div></span>
								</a>
		
								#if ($nav_item.hasChildren())
									<ul class="dropdown-menu child-menu" role="menu">
										#foreach ($nav_child in $nav_item.getChildren())
											#set ($nav_child_attr_selected="")
											#set ($nav_child_css_class="lfr-nav-item")
		
											#if ($nav_child.isSelected())
												#set ($nav_child_attr_selected="aria-selected='true'")
												#set ($nav_child_css_class="selected")
											#end
		
											<li class="$nav_child_css_class" id="layout_$nav_child.getLayoutId()" $nav_child_attr_selected role="presentation">
												<a aria-labelledby="layout_$nav_child.getLayoutId()" href="$nav_child.getURL()" $nav_child.gettarget() role="menuitem">$nav_child.icon() $nav_child.getName()</a>
											</li>
										#end
									</ul>
								#end
							</li>
						#end
					#end
	            </ul>
	        </div>
        </div>
    </div>
</div>

Two important things:
<div id="navegacion"... Define a new id value to avoid some CSS rules related to id "navigation"
<button type="button" onclick="jQuery('#menu-nav').show();" ... Include JQuery, version 1.11.1 works fine for me.