I need to center my OverlayPanel in my screen.
-----------
| Button |
-----------
-------------------
| OverlayPanel |
-------------------
Here's my code:
<p:overlayPanel id="overlayPanelId" for="panelBtnId" hideEffect="fade" dynamic="true" dismissable="true">
<ui:include src="/faces/OverlayMiniSearch.xhtml"/>
</p:overlayPanel>
Related
How to fix datalist style/formating
I am using html, css, bootstrap, asp vb.net and datalist
I have a datalist, which had 3 cols and 2 rows.
Each col has a image, name, price.
Issue is that name can be in 1 line or in 2 lines or 3 lines for long names.
Becuase of this it is ruining the datalist format. any idea how can i fix this?
below is an example:
|-------|-------|-------|
| Image | Image | Image |
| Name | Name | Name |
| Line1 | Line2 | 120 |
| 120 | 120 }--------|
|-------|-------|
|-------|
| Image |
| Name |
| Line3 |
| 122 |
|-------|
|-------|-------|
| Image | Image |
| Name | Name |
| 120 | 120 }
|-------|-------|
below if my datalist code with bootstrap
<asp:DataList ID="repeaterGrid" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" cssClass="row">
<ItemTemplate>
<div class="text-center col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/" + Eval("Picture_Path").ToString().Trim() %>' style="width:245px;height:400px;"/>
<h4 class="Text-Spacing"><%# Eval("Name")%></h4>
<h5><strong>$<%# Eval("Price") %></strong></h5>
</div>
</div>
</ItemTemplate>
</asp:DataList>
I want to have a p:datatable which contains one column having a treenode in each cell. How should I implement this? I'm new to jsf/primefaces. Any example is really appreciated. Thanks for any help!
col1 | col2
-------------------------------------------
data1 | node1
| |--- node2
| |--- node3
| |--- node4
------------------------------------------
data2 | node5
| |--- node6
---------------------------------------------
Here is my original datatable with all String columns:
<p:dataTable id="datatable" value="#{userData.dataList}" var="data">
<p:columns value="#{userData.dataTableColumns}" var="column">
<f:facet name="header">
<h:outputText value="#{column.header}" />
</f:facet>
<h:outputText value="#{data[column.property]}" />
</p:columns>
</p:dataTable>
Let's as is that I have a bootstrap modal, in the body of the modal. I have two <div> the <div> from the left contains an image while the <div> from the right contains the caption of the image.
Target Output!
Let's assume that this is a bootstrap modal body:
-------------- ----------------
| | | |
| | |Name: |
| <image> | |Description: |
| | |Price: |
| | | |
-------------- ----------------
Nevermind of the space in between the two divs, let's just assume that it is just a small space. So the question is how can I put two <div> in a same alignment where the first <div> is on the left and the other one is on the right?
As of now, this is what I have done.
---------------
| |
| |
| <image> |
| |
| |
---------------
---------------
| |
| |
|Name: |
|Description: |
|Price: |
| |
---------------
The other <div> goes down instead to the right.
Here is my code for the above wrong output.
CSS
#divforimg{
position: left;
}
#divforinfo {
position: right;
}
HTML
<div class="modal-body">
<div id = 'divforimg'>
<img style="height:50%; width:50%;" id = 'appimage'>
</div>
<div id = "divforinfo">
<i><p id = "appdesc"></p></i>
<strong>Price: </strong><label id = "appprice"></label><br>
<strong>Brand: </strong><label id = "appbrand"></label><br>
<strong>Color: </strong><label id = "appcolor"></label><br>
<strong>Model: </strong><label id = "appmodel"></label><br>
<strong>Available Quantity: </strong><label id = "appqty"></label><br>
<strong>Date Posted: </strong><label id = "appposted"></label><br>
</div>
</div>
Nevermind of the image source above, and other fields included. Thank you!
Should be a simple matter of giving them both a width and floating them:
CSS
#divforimg{
width:200px;
float:left;
}
#divforinfo {
width:200px;
float:left;
}
To get it more like your example, change the second to float:right; and it'll stick to the right side of its container.
Is it possible to do this using css (and how)?
------------------------------------------
| ---------- ---------- ---------- |
| | Child 1 | | Child 3 | | Child 5 | |
| ---------- ---------- ---------- |
| ---------- ---------- ---------- |
| | Child 2 | | Child 4 | | Child 6 | |
| ---------- ---------- ---------- |
| ---------- |
| | Child 7 | |
| ---------- |
| ---------- |
| | Child 8 | |
| ---------- |
------------------------------------------
using the following :
<div class="parent">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
<div class="child">Child4</div>
<div class="child">Child5</div>
<div class="child">Child6</div>
<div class="child">Child7</div>
<div class="child">Child8</div>
</div>
.parent {width:100%}
.parent div {width:100px; margin:2px;}
Edit:
Maybe I didn't explain clearly what i want...so
There can be more than 8 children.....but always an even number (10,12,14 etc)
A div with an even number must be always under his preceding odd div (2 under 1, 4 under 3....8 under 7, 10 under 9)
When parent's width is not enough to hold pairs of childer: it expands its height (like starts a new line)
Edit2:
The correct result is here:
http://jsfiddle.net/97ZpN/3/
but in this solution i had to put every pair of divs into a sub-container. Is it posiible to do it with the original html?
hope it will help you
.parent {width:100%}
.parent div {float:left; margin:2px;width:30%}
.parent div.child:nth-child(7),.parent div.child:nth-child(8){
float:none;
clear:both;
}
demo: http://jsfiddle.net/97ZpN/
Explanation:
.parent div {float:left; margin:2px;width:30%}
This line in the CSS will make all the child elements to float towards the left. So the elements will automatically stack one after other.
.parent div.child:nth-child(7),.parent div.child:nth-child(8){
float:none;
clear:both;
}
The clear:both does the trick here. clear:both means there cannot be any elements on the left or right side of the referenced element.
I've got some hierarchical data that I would like to show in a Flex Spark DataGrid, looking something like this:
|------|---------------------------|
| row1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| in | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| outer|---------------------------|
| grid | a component that spans |
| | over multiple columns here|
|----------------------------------|
| row2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| in | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| outer|---------------------------|
| grid | a component that spans |
| | over multiple columns here|
|----------------------------------|
What I'm trying to do is to use a custom GridItemRenderer that holds an inner DataGrid. The basic concept looks something like this:
<s:DataGrid dataProvider="{outerDataProvider}" width="100%" height="100%" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="name">
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:states>
<s:State name="normal" />
<s:State name="toggled" />
</s:states>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:HGroup>
<s:DataGrid dataProvider="{data.innerDataProvider}" columns="{outerDocument.myDynamicGeneratedColumns}">
</s:DataGrid>
<s:Group>
<s:ToggleButton label="Toggle" />
</s:Group>
</s:HGroup>
<MyComponent width="100%" height="50" includeIn="toggled" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
I'm experiencing some serious performance issues when adding the inner DataGrid. Vertical scrolling is horribly slow.
I've been trying to understand what to optimize, but I'm not really sure where to begin. The inner DataGrid need to have a dynamic number of columns, and I guess this is one of the parts where something needs to be done.
Is it completely wrong to do something like this? Could I use another component than DataGrid for the inner Grid structure and get better performance?
The grid is basicly a grid containing images depending on the values inside each row.
Any suggestions or links to DataGrid tips?
How about using a list with a TileLayout for the inner grid. This would definitely perform much better:
<s:List>
<s:layout>
<s:TileLayout/>
</s:layout>
</s:List>