Actually I use primefaces 3.5.
I want to reduce the width for specific column in a datatable
it doesn't work:
<p:dataTable styleClass="myTable" ......................>
<p:column width="5" headerText="verylargeeeeeeeeeeeeeeeeeeeeeeeeeeeee">
</p:column>
Your code works for me, but it will not reduce the size of a column to be less than the headerText width. You can set the header to use multiple lines when the text is too large, but it only works if there are spaces in the headerText. That won't help with your example because there are no spaces. The CSS for that option is below:
.ui-datatable thead th {
white-space:normal !important;
}
In other words, I am not sure how you can reduce the size of a column to less than a word length.
Related
I have read-only textboxes in a form that auto-populate data from a table.
<p:inputText value="#{ManagedBean.var}" styleClass="textbox" id="varDetails" maxlength="200"></p:inputText>
Some entries are not displayed completely because they exceed the textbox width.
How can i use the Onmouseover command to change the width of the textbox dynamically?
This seems to work:
<h:form>
<p:inputText ...
onmouseover="$(this).attr('size', this.value.length)"
onmouseout="$(this).attr('size', '')" />
</h:form>
You'd have to use min-width and not width in the styleclass.
But if the content is smaller than the current size, it will also become smaller. If you don't want that you can use something like
onmouseover="if (this.value.length > 10) $(this).attr('size', this.value.length)"
The value (10 above) should be chosen so it matches the min-width in the styleclass.
Otherwise you could give it a title:
<p:inputText ... value="#{ManagedBean.var}" title="#{ManagedBean.var}" />
That will be shown onmouseover.
You could also give it a p:tooltip:
<p:tooltip for="varDetails" value="#{ManagedBean.var}" />
That's more or less the same.
I have a rich data table and i will make this data table more higher and plan to format text of this data table.
I have written the following css (styleclass "title"):
{width: 100%; font-size: 12px;padding: 4px;}
Now is the question how i can redesign the height of the data table in that way, that a don´t create any browser errors by showing the data table. The feature "width" is solved.
Also i will adjust text in the table, but the css feature "vertical-align:top;" doesn´t work.
Here is my current JSF Code:
<rich:dataTable value="#{model.templates}" var="text" styleClass="title">
<rich:column>
<f:facet name="header">
<h:outputText value="Dummyvalue" style="vertical-align:top;"/>
</f:facet>
</rich:column>
// some other columns
</rich:dataTable>
Thanks for helping me !
Greetz
Marwief
My CSS centers all the cells in a data table, except the cells in the first column are centered, like so:
td {text-align:center}
td:first-child {text-align:left}
That's all fine and good except for tables where any of the cells in the first column span multiple rows. Of course a picture's worth a thousand words, so here you go:
http://jsfiddle.net/michaelbluejay/qmGGG/1/
I know I can use inline CSS or classes on the offending cells to make them centered, but I'm hoping there's a general solution which doesn't require editing the <table> itself. What do you think?
You can use colgroup for that.
http://www.w3schools.com/tags/tag_colgroup.asp
Don't forget to remove your td:first-child selector if you try.
<colgroup>
<col />
<col style="text-align:center;" />
<col style="text-align:center;" />
</colgroup>
I used the inline styles just as an example. Put this in your css file of course.
Here is my acefaces datatable
<ace:dataTable id="tbl" value="#{mainSearch.searchResult}" var="srvc"
paginator="true" paginatorPosition="bottom" rows="10"
emptyMessage="No Record Present Yet" rowsPerPageTemplate="10,25,50,100"
rowIndexVar="row" rowStyleClass="#{row mod 2 eq 0?'none':'skyBlue'}">
<ace:column headerText="Category" sortBy="#{srvc.groupName}"
filterBy="#{srvc.groupName}" filterMatchMode="contains">
<h:outputText value="#{srvc.groupName}"/>
</ace:column>
<ace:column headerText="Service Number" sortBy="#{srvc.serviceNumber}"
filterBy="#{srvc.serviceNumber}"filterMatchMode="contains">
<h:outputText value="#{srvc.serviceNumber}"/>
</ace:column>
<ace:column headerText="Shift" sortBy="#{srvc.shift}"
filterBy="#{srvc.shift}" filterMatchMode="contains">
<h:outputText value="#{srvc.shift}"/>
</ace:column>
</ace:dataTable>
Now this datatable is showing on my whole page.I can fix its height by <ace:datatable height=.. but I didn't find any width attribute.I also tried to set its width using CSS (using style attribute on both header, datatable) but it didn't work. Now I am stuck here and unable to find that How can I minimize its width.
Note: The only way that worked for me was to small the header text.For instance, As my first row header is Category.Now If I repalced it with just CAT then whole row gets shrink.It mean first of all I need to squeez the text(as it is my guess).Is there anyway that without poking this text? If not, then how can I resize this text and shortened this datatable?
I've tried altering CSS width property in Firefox of the ICEfaces showcase, achieving the result you want. Note that there may be some potential problems when you make the table too small and the data won't fit in the table anymore, so my advice will be to inspect the resultant table in the browser to get the right CSS fixture.
Regarding the documentation of <ace:dataTable>, there are the typical styleClass and style property for setting CSS style classes and inline style respectively, so the following will do the work:
<ace:dataTable style="width:80%"> ... </ace:dataTable>
or
<ace:dataTable styleClass="my-width"> ... </ace:dataTable>
with CSS class:
.my-width {
width:80%
}
As a side note, when you are ready to try out the latest Primefaces <p:dataTable>, you will find many attributes designed for setting up proper CSS styles.
this seems a stupid question, but i can't align column content in a Ext.Net gridpanel !
I use this :
<ext:Column DataIndex="category1" Header="Category" Align="Left" Width="80" />
But only the column header is aligned, not the content !
Thanks
To give different alignments for the column header and content, you should assign the ColumnID attribute for the ext:Column.
And then, you will be able to give one alignment for the header (by CSS with ColumnID in the class name) and another one for the content with the Align attribute.
For example, to align the header to the center and the content to the left, your code will be like that:
<style type="text/css">
.x-grid3-hd-category1
{
text-align: center;
}
</style>
<ext:Column ColumnID="category1" DataIndex="category1" Header="Category" Align="Left" Width="80" />
Another approach without the need of adding a custom CSS class, is setting the CSS attribute of the Column (adding inline css)
Suppose you have a 'Name' column, you want the column title to be centered, but not the content, you could try.
<ext:Column ColumnID="NameColId" DataIndex="Name" Header="Full name" Align="Center" Css="text-align:left;" />
you could try adding "!important" to the inline css rule, if content is not aligned with the first attempt.
This does the same effect as amartine answer, just that this is Inline css.
Hope this helps.