I'm using a p:dialog with some p:fieldset in it. This p:fieldset are toggeable, so when I toggle on them, the Dialog should arrange its position, because on resize the dialog gets out of the page.
Is there any tip to do this ?
I have tried whit the onToggleUpdate="myDialogWidgetVar" but it doesnt work.
Thanks
arrange p:dialog position onToggleUpdate
-
maximiliano
- Posts: 18
- Joined: 27 Apr 2011, 08:52
AnyOne could help me with this ?
Please, thanks !
Please, thanks !
-
cagatay.civici
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
There is initPosition client side api, you can try. It should reset to initial position.
-
maximiliano
- Posts: 18
- Joined: 27 Apr 2011, 08:52
hello Optimus, thank for your reply. I've been trying to use client side api, but i cant found an example of this. could you give me one ?
how may i use initPosition() ?
i was trying this but doesnt work for me (see bold )
thanks
how may i use initPosition() ?
i was trying this but doesnt work for me (see bold )
Code: Select all
<p:dialog
header="Detalle de Asunto"
widgetVar="dlgViewAsunto" // the dialog i want to arrange its position
id="dlgDetAsun"
showEffect="clip"
hideEffect="explode"
closeOnEscape="true"
resizable="true"
draggable="true"
modal="true"
appendToBody="true"
position="left top"
styleClass="ui-widget-container"
>
<h:form id="frmViewAsunto">
<h:panelGrid id="previewAsunto">
<h:panelGrid id="pnlDatosAsunto" columns="2" styleClass="maxicolumn">
<f:facet name="header">
<h:outputText value="Asunto #{beanAsuntos.asuntoSelected.id}" />
</f:facet>
<p:column>
<h:panelGrid
columns="2"
id="pnlDatos1"
footerClass="ui-widget-footer ui-widget-header ui-corner-bl ui-corner-br textCenter"
columnClasses="textCenter"
style="float:right"
>
<p:column >
<h:outputText value="Nombre:" styleClass="label_inputText"/>
</p:column>
<p:column>
<h:outputText
id="txtiNomAsuView"
value="#{beanAsuntos.asuntoSelected.nombre}"
rendered="#{!beanAsuntos.editMode}"/>
<p:inputText
id="txtiNomAsu"
rendered="#{beanAsuntos.editMode}"
requiredMessage="Debe ingresar el nombre del Asunto !"
required="true"
value="#{beanAsuntos.asuntoSelected.nombre}"/>
</p:column>
<p:column>
<h:outputText value="Fecha inicio:" styleClass="label_inputText"/>
</p:column >
<p:column>
<h:outputText
id="txtoFecAsuView"
value="#{beanAsuntos.mostrarFecha()}"
rendered="#{!beanAsuntos.editMode}"/>
<p:calendar id="calIniAsuView"
required="true"
pattern="dd/MM/yyyy"
value="#{beanAsuntos.asuntoSelected.fechaInicio}"
converterMessage="Fecha inválida"
rendered="#{beanAsuntos.editMode}"/>
<p:message for="calIniAsuView" display="true" rendered="#{beanAsuntos.editMode}"/>
</p:column>
<p:column>
<h:outputText value="Tipo de asunto:" styleClass="label_inputText"/>
</p:column>
<p:column>
<h:outputText id="txtoCatAsuView"
value="#{beanAsuntos.asuntoSelected.categorizacion.nombreTipo}"
rendered="#{!beanAsuntos.editMode}" />
<h:selectOneMenu id="cmbCategoriasView" value="#{beanAsuntos.categoriaAsunto}" rendered="#{beanAsuntos.editMode}" >
<f:selectItems value="#{beanAsuntos.selectCategorias}"/>
</h:selectOneMenu>
</p:column>
<p:separator /><p:column />
<p:column>
<h:outputText value="Cliente:" />
</p:column>
<p:column>
<h:outputText value="#{beanAsuntos.asuntoSelected.cliente.documento} #{beanAsuntos.asuntoSelected.cliente.nombre}"
id="nombreClienteSelected"
/>
</p:column>
<p:column>
<h:outputText value="Escribano asignado: " />
</p:column>
<p:column>
<h:outputText value="#{beanAsuntos.asuntoSelected.escribano.rut} #{beanAsuntos.asuntoSelected.escribano.nombre} #{beanAsuntos.asuntoSelected.escribano.apellido1}"
id="nombreEscribanoSelected"
/>
</p:column>
<p:separator /><p:column />
<p:column>
<h:outputText value="Descripción:" styleClass="label_inputText"/>
</p:column>
<p:column>
<p:inputTextarea
autoResize="false"
effectDuration="200"
maxHeight="100"
id="txtiDescAsuNew"
style="height:40px;"
value="#{beanAsuntos.asuntoSelected.descripcion}" disabled="#{!beanAsuntos.editMode}" />
</p:column >
</h:panelGrid>
</p:column>
<p:column colspan="2" styleClass="maxicolumn">
<p:fieldset id="selectedTareas"
legend="Tareas seleccionadas"
style="margin-top:20px; border: transparent" >
<h:outputText value="!!!Arrastre tareas aquí !!!"
rendered="#{empty beanAsuntos.droppedTareas and beanAsuntos.editMode}"
style="font-size:24px;" />
<p:dataTable id="tareasArrastradas"
style="border: 1px;"
var="tarea" value="#{beanAsuntos.asuntoSelected.tareas}"
widgetVar="selTareas">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Busque una tarea: " />
<p:inputText id="globalFilter" onkeyup="selTareas.filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column style="width:24px">
<h:outputText id="dragIcon2"
styleClass="ui-icon ui-icon-arrow-4" />
<p:draggable for="dragIcon2" revert="true" />
</p:column>
<p:column headerText="Nombre" filterBy="#{tarea.nombre}">
<h:outputText value="#{tarea.nombre}" />
</p:column>
<p:column headerText="Descripcion" filterBy="#{tarea.descripcion}" style="width:150px">
<h:outputText value="#{tarea.descripcion}" />
</p:column>
<p:column style="width:32px" >
<p:commandButton update="tareaForm:display"
oncomplete="tareaDialog.show()"
image="ui-icon ui-icon-search">
<f:setPropertyActionListener value="#{tarea}"
target="#{beanAsuntos.tareaSelected}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:droppable for="selectedTareas" tolerance="touch"
activeStyleClass="ui-state-highlight"
datasource="availableTareas"
dropListener="#{beanAsuntos.onTareaDroppedModif}"
onDropUpdate="availableTareas selectedTareas tareasArrastradas"
/>
</p:fieldset>
<!-- fin... prueba panel donde dropear tareas -->
</p:column>
</h:panelGrid>
<p:separator />
<h:panelGrid id="pnlRight" columns="5" rendered="#{beanAsuntos.editMode}" >
<p:column>
<p:fieldset
legend="Tareas disponibles"
id="tareasDisponibles"
toggleable="true"
toggleSpeed="500"
collapsed="true"
style="border-style: double;"
>
<p:dataTable id="availableTareas"
var="tarea"
value="#{beanAsuntos.listaTareasModif}"
widgetVar="avTareas"
paginator="true" rows="5"
paginatorPosition="bottom"
>
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Busque una tarea: " />
<p:inputText id="globalFilter" onkeyup="avTareas.filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column style="width:24px">
<h:outputText id="dragIcon1"
styleClass="ui-icon ui-icon-arrow-4" />
<p:draggable for="dragIcon1" revert="true" />
</p:column>
<p:column headerText="Nombre" filterBy="#{tarea.nombre}">
<h:outputText value="#{tarea.nombre}" />
</p:column>
<p:column headerText="Descripcion" filterBy="#{tarea.descripcion}" style="width:150px">
<h:outputText value="#{tarea.descripcion}" />
</p:column>
</p:dataTable>
<p:droppable for="tareasDisponibles" tolerance="touch"
activeStyleClass="ui-state-highlight"
datasource="tareasArrastradas"
dropListener="#{beanAsuntos.onTareaDevueltaModif}"
onDropUpdate="availableTareas selectedTareas tareasArrastradas"
/>
<!-- fin panel origen tareas -->
</p:fieldset>
</p:column>
<p:column >
<p:fieldset
legend="Clientes "
id="clientesDisponibles"
toggleable="true"
toggleSpeed="500"
collapsed="true"
style="border-style: double;"
onToggleUpdate="dlgViewAsunto.initPosition()" // the way i'm using initPosition(). doesnt do anything.
>
-
cagatay.civici
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Try using position utility;
http://jqueryui.com/demos/position/
or
http://jqueryui.com/demos/position/
Code: Select all
dialogWidgetVar.getJQ().position({
//your settings here
});
Code: Select all
dialogWidgetVar.initPosition();
-
- Information
-
Who is online
Users browsing this forum: No registered users and 57 guests