I would like next to my dataGrid to have another table, floating left to it. Like this, located in the main div:
| | |
| A | B |
| | |
, where A is the current dataGrid, containing all user and B will be the new content. I tried with creating a table inside the main div and putting left and right part in 2 columns inside a row, but B go out of the field of main div. I tried putting CSS for left and right col and adding two extra div but it still does not look in this way. B goes below A. Please, give me an advice how can this be done. Here is the source of the page.
The code of my page is this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<div id="container" style="min-height: 100%; position: relative;">
<div id="left"
style="background-image: url('#{resource['images/left.png']}'); background-repeat: repeat-y; height: 1800px; width: 163px; float: left;">
<br />
</div>
<div id="main" style="width: 920px; float: left;">
<f:view>
<h:form rendered="#{not empty loginBean.name}">
<h:outputStylesheet library="css" name="css.css" />
<center>
<h2>My Profile</h2>
</center>
<p:dataGrid var="user" value="#{profileBean.userList}">
<p:panelGrid columns="2">
<f:facet name="header">
<p:graphicImage value="#{profileBean.image}" alt="${user.name}"
width="150px" height="150px">
<f:param name="userId" value="#{user.id}" />
</p:graphicImage>
</f:facet>
<h:outputText value="Name: " />
<h:inputText value="#{user.name}" />
<h:outputText value="Phone: " />
<h:inputText value="#{user.phone}" required="true">
<f:validateRegex pattern="[0-9]+" />
</h:inputText>
<h:outputText value="Role: " />
<h:outputText value="#{user.userRole.roleName}">
</h:outputText>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center">
<p:commandButton id="submit" value="Save changes"
actionListener="#{profileBean.editUser()}" >
<f:attribute name="profileBean.selectedUser" value="#{user}" />
</p:commandButton>
</h:panelGroup>
</f:facet>
</p:panelGrid>
</p:dataGrid>
<hr />
</h:form>
</f:view>
</div>
</div>
<div id="right"
style="background-image: url('#{resource['images/right.png']}'); background-repeat: repeat-y; height: 1800px; width: 150px; float: right;">
<br />
</div>
</ui:define>
</ui:composition>
</html>
may be using display:table and display:table-cell will help you
here is a DEMO
Mark UP
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
.container {
display:table;
border:1px solid #000;
}
.left {
display:table-cell;
width:100px;
height:100px;
background-color:green;
}
.right {
display:table-cell;
width:100px;
height:100px;
background-color:Blue;
}
Result:
You need to set the width of "right" and "left" to fit in the width of the screen. You can do this by setting the divs width percentage wise.
e.g width=25%
Related
I was trying to center the component in jsf page, it looks sth like this:
<p:panel header="Enter your credentials:" style="vertical-align:middle;">
<h:panelGrid columns="2" styleClass="panelGridCenter">
<h:outputText value="Login: " />
<p:inplace id="Login">
<p:inputText value="Enter login" />
</p:inplace>
</h:panelGrid>
</p:panel>
I've tried to enter sth like this:
style="vertical-align:middle;"
I've tried to use a css class (I've had almost no experience with css):
.panelGridCenter {
margin: 0 auto;
vertical-align:middle;
}
But it doesn't work.
Can you give me any examples or hints how to position this component (panel) in the center of the jsf page?
p - primefaces
thx in advance
Try below code I will hope this answer be your question
<h:form>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="outer_table">
<tr>
<td>
<table width="500" height="300" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center">
<p:panel header="Login">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="username" />
<p:inputText id="username" value="#{loginBean.uname}" required="true" label="username"/>
<h:outputLabel for="password" value="password" />
<p:password id="password" value="#{loginBean.password}" required="true" label="password" />
<p:commandButton value="Login" action="#{loginBean.loginProject}" update=":growl"/>
</h:panelGrid>
</p:panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
css
<script type="text/css">
html, body
{
margin:0px;
padding:0px;
width:100%;
min-height:100%;
height:100%;
}
.outer_table
{
width:100%;
height:100%;
}
</script>
This may be irrelevant as I cannot answer your question, but a dialog (centered by default) looks pretty cool for a login-page:
<h:body>
<p:growl id="growl" life="5000" autoUpdate="true" showDetail="true" escape="false"/>
<h:form>
<p:dialog id="dialog" header="Login" footer="..." width="400" widgetVar="dlg" visible="true" closable="false" showEffect="clip" draggable="false" resizable="false" style="box-shadow: 7px 10px 5px #303030;">
<p:panelGrid columns="2" style="margin: 0 auto">
<h:outputText value="username:"/>
<h:inputText value="#{loginBean.username}" id="username"/>
<h:outputText value="password:"/>
<h:inputSecret value="#{loginBean.password}" id="password"/>
</p:panelGrid>
<p:commandButton id="button" value="Login" action="#{loginBean.doLogin}" style="float:right"/>
</p:dialog>
</h:form>
</h:body>
visible="true" makes the dialog show automatically after load.
Inspired by this article, also showing how to secure parts of the application.
I am not an expert but sharing my own experience. After putting the panel into form, try putting the form into div with style as below:
<div style="width:360px; margin: 10% auto 10% auto;">
<h:form>
....
</h:form>
</div>
How can I center/align this checkbox and text horizontally?
<h:panelGroup>
<div>
<h:selectBooleanCheckbox id="deactivate" title="select to deactivate" />
<h:outputText value="${msg['deactivate/confirm']}" for="deactivate" />
</div>
</h:panelGroup>
You simply have to apply style="width: 500px;text-align: center;" like this :
<h:panelGroup layout="block" style="width: 500px;text-align: center;">
<h:selectBooleanCheckbox id="deactivate" title="select to deactivate" style="vertical-align: middle;" />
<h:outputText value="${msg['deactivate/confirm']}" for="deactivate" />
</h:panelGroup>
Of course, you must have a width in order to see a difference. Your div is not needed so I removed it.
I'm facing an issue with the Primefaces Chat demo from the Primefaces showcase. The outputPanel component does not display a scroll bar like in the showcase demo. Here is my code and screenshot below:
<h:head>
<script type="text/javascript">
function handleMessage(data) {
var chatContent = $(PrimeFaces.escapeClientId('form:public'));
chatContent.append(data + '<br />');
//keep scroll
chatContent.scrollTop(200); <----------- have tried "chatContent.height()"
}
</script>
</h:head>
<h:body>
<p:growl id="growl" showDetail="true" />
<h:form id="form">
<p:fieldset id="container" legend="UserChat" toggleable="true">
<h:panelGroup rendered="#{chatView.loggedIn}">
<h:panelGrid columns="2" columnClasses="publicColumn,usersColumn" style="width:100%">
<p:outputPanel id="public" layout="block" styleClass="ui-corner-all ui-widget-content chatlogs" />
<p:dataList id="users" var="user" value="#{chatView.users}" styleClass="usersList">
<f:facet name="header">
Users
</f:facet>
<p:commandButton title="Chat" icon="ui-icon-comment" oncomplete="pChat.show()" update=":form:privateChatContainer">
<f:setPropertyActionListener value="#{user}" target="#{chatView.privateUser}" />
</p:commandButton>
#{user}
</p:dataList>
</h:panelGrid>
<p:separator />
<p:inputText value="#{chatView.globalMessage}" styleClass="messageInput" />
<p:spacer width="5" />
<p:commandButton value="Send" actionListener="#{chatView.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>
<p:spacer width="5" />
<p:commandButton value="Disconnect" actionListener="#{chatView.disconnect}" global="false" update="container" />
</h:panelGroup>
<h:panelGroup rendered="#{not chatView.loggedIn}" >
Username: <p:inputText value="#{chatView.username}" />
<p:spacer width="5" />
<p:commandButton value="Login" actionListener="#{chatView.login}" update="container"
icon="ui-icon-person" />
</h:panelGroup>
</p:fieldset>
<p:dialog widgetVar="pChat" header="Private Chat" modal="true" showEffect="fade" hideEffect="fade">
<h:panelGrid id="privateChatContainer" columns="2" columnClasses="vtop,vtop">
<p:outputLabel for="pChatInput" value="To: #{chatView.privateUser}" />
<p:inputTextarea id="pChatInput" value="#{chatView.privateMessage}" rows="5" cols="30" />
<p:spacer />
<p:commandButton value="Send" actionListener="#{chatView.sendPrivate}" oncomplete="pChat.hide()" />
</h:panelGrid>
</p:dialog>
</h:form>
<p:socket onMessage="handleMessage" channel="/chat" autoConnect="true" widgetVar="subscriber"/>
</h:body>
Any clues about what i'm doing wrong?
Thanks and best regards!
The issue may be you didn't specify chatlogs css class, you should add it as below:
<style type="text/css">
.chatlogs {
height: 210px !important;
max-height: 210px !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
}
</style>
And if you would like to scroll to bottom, you can try:
chatContent.scrollTop(chatContent[0].scrollHeight);
Hey can anyone help me out i am trying to display a div on screen depending on what i select on a drop-down menu
<------------DropdownDiv---------->
<div id="recordActivityDropdownDiv" style="padding: 5px">
<h:selectOneMenu id="recordActivityDropdown" style="width:200px;" value="">
<f:selectItem itemLabel="Email" itemValue="1"/>
<f:selectItem itemLabel="Letter" itemValue="2"/>
</h:selectOneMenu>
</div>
<------------Display this is letter is selected in dropdown menu Div---------->
<div style="height:100%; width:99%; float:left">
<div style="padding-top: 15px; padding-left: 5px; width: 20%; float: left;">
letter:
</div>
<div style="height:100%; width:77%; float:left">
<div style="padding: 5px; float:left;">
<h:inputText id="letterbox" style="width:200px" value="" />
</div>
</div>
As noted in the comments, your code would look a bit like this :
...
<h:selectOneMenu value="#{bean.selectValue} id="recordActivityDropdown" style="width:200px;" value="">
<f:selectItem itemLabel="Email" itemValue="1"/>
<f:selectItem itemLabel="Letter" itemValue="2"/>
<f:ajax listener="#{bean.valueChanged}" update="myGroup" />
</h:selectOneMenu>
...
...
<h:panelGroup id="myGroup" style="height:100%; width:99%; float:left">
<div style="padding-top: 15px; padding-left: 5px; width: 20%; float: left;">
letter: <h:outputText value="#{bean.selectValue}" />
</div>
...
</h:panelGroup>
...
This will update (via ajax) the now panelGroup that is your "div". It will take the value of the selectOneMenu and print it to the div.
See also :
Ajax support In h:selectOneMenu
how to get value from <h:selectOneMenu>?
I want to ask that sometimes what happen that if I use PrimeFaces Rich Text Editor then instead of showing Rich Text Editor, it shows normal inputTextArea. I want to know what can be the reasons that Rich Text Editor is not shown. Why it shows normal text Area instead of Rich Text Area? My Javascript is also enabled. Please tell me the reasons.
Thanks
Edit:
Here is my code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="title">Add City Images</ui:define>
<ui:define name="content">
<h:form id="cityDetailForm" prependId="false" >
<p:growl id="messages" showDetail="true" life="2000"> </p:growl>
<p:panel id="panel1"
style="border-color: #000000;width: 954px;position: absolute;left: 150px;height: 450px;-moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(../PIE/PIE.htc)">
<strong Class="MainHeader">
<p:spacer width="10"/> City Detail
</strong>
<h:panelGrid columns="5"
border=""
width="20%"
style="position: absolute; top: 50px;"
columnClasses="asteriskColumns, nameColumns" >
<h:outputText value="*" />
<h:outputText value="Map: " />
<p:fileUpload id="cityMap"
description="Image"
update="city messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="city"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false">
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<h:commandLink value="remove"
title="Remove Picture"
style="color: #0d5b7f;text-decoration: underline"
onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">
<f:ajax event="click"
render="city"
listener="#{cityDetail.removeImage}"/>
</h:commandLink>
.....
</h:panelGrid>
<h:panelGrid columns="1"
border=""
width="60%"
style="position: absolute; top: 40px;left: 350px;height: 410px ">
<p:editor value="#{cityDetail.CKeditorValue}" widgetVar="editor" width="600"/>
</h:panelGrid>
<h:commandButton id="preview"
value="Preview"
action="#{cityDetail.preview}"
style="position: absolute; top: 470px; left: 400px"
styleClass="ButtonStyle" />
<h:commandButton id="save"
value="Save"
actionListener="#{cityDetail.sendImagesToDatabase}"
action="#{cityDetail.save}"
style="position: absolute; top: 470px; left: 475px;"
styleClass="ButtonStyle">
</h:commandButton>
<h:commandButton id="cancel"
value="Cancel"
action="#{cityDetail.cancel}"
style="position: absolute; top: 470px; left: 550px;"
styleClass="ButtonStyle" />
<link type="text/css" rel="stylesheet" href="css/jquery.modaldialog1.css"/>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.modaldialog.js"></script>
<h:commandButton id="YesAfterSaveBtn" onclick="$(dialogmask).hide();$(dialog).hide()" action="#{cityDetail.goBack}" style="background-color: #e6eff6;border: #e6eff6"></h:commandButton>
<h:outputText value="#{cityDetail.errorScript}" escape="false"/>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</h:body>
You can see that i am using Prime Faces editor, but it is showing me inputTextArea. Although i didn't try the solution but this is what i asked for.
thanks
Try the following
set <f:view contentType="text/html"/>
as mentioned in the following thread of primefaces forum p:editor like h:inputTextArea