Adding welcome user message in top bar

Post Reply
kemparajuknk
Posts: 2
Joined: 23 Jan 2013, 10:21

31 Jan 2016, 08:25

I am trying to add Welcome user message to logged in user in the top bar . In desktop it is working fine.

But in mobile version , in the top bar when i click on top menu button is not working. Welcome user message is overlapping with topmenu-button icon

My topbar template code is as below

Code: Select all

  <ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">


	<!-- TOPBAR -->
	<div id="layout-topbar">

		<!-- LOGO -->

		<a id="logo"> <h:outputText value="SIS"
				styleClass="Fs25 Gold FontBold" />
		</a>

		<!-- MENUBUTTON -->
		<a id="menu-button"> <i class="icon-chevron-down"></i>
		</a> 
		[color=#FF8000][b]<h:outputText
			value="Welcome user message"
			styleClass="Fs20 Fright Red PosAbsolute" />[/b][/color]

		<!-- TOPBAR LINKS -->
		<a id="topmenu-button"> <i class="icon-list2"></i>
		</a>

		<h:form>
			<ul id="topbar-menu">
				<li><h:commandLink value="#{msgs.changePassword}"
						action="#{userBean.changePassword}" /></li>
				<li><h:outputLink
						value="#{request.contextPath}/j_spring_security_logout">#{msgs.logout}</h:outputLink></li>
				<li><p:commandLink onclick="PF('aboutdialog').show();"
						id="sisversion" title="SIS #{sisConfigurationBean.versionInfo}"
						value="#{msgs.about}" rendered="false">
					</p:commandLink></li>
			</ul>			
		</h:form>

		<!-- MENU COVER -->
		<div id="layout-menu-cover">
			<ui:include src="layoutmenu.xhtml" />
		</div>

	</div>

	<h:form>
		<!-- TOPMENU -->
		<ul id="top-menu">
			<li><p:commandLink value="#{msgs.about}"
					action="#{leftMenuBean.about}" ajax="false" /></li>
			<li><p:commandLink value="#{msgs.tutorials}"
					action="#{leftMenuBean.tutorials}" ajax="false" /></li>
			<li><p:commandLink value="#{msgs.feedback}"
					action="#{leftMenuBean.feedback}" ajax="false" /></li>
		</ul>

	</h:form>

</ui:composition>
  
Could you suggest what changes should be done so that it works on mobile as well ?

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

01 Feb 2016, 14:59

I couldn't replicate the issue. But, for "Welcome" test, you can try padding-left: 20px / 5% or margin-left: 20px / 5%.

Also, I think you can use jsf:action with JSF2.2 instead of p:* and h:* components(p:commandButton, h:commandLink, ..) in your xhtml;
Exp;

Code: Select all

<li>
   <a jsf:action="#{...}"><i class="fa fa-sign-out"></i> Logout</a>
</li>

http://www.oracle.com/technetwork/artic ... 27136.html
http://www.beyondjava.net/blog/jsf-2-2- ... eat-sheet/

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest