I have a WebGrid that is hooked up to a datasource, which works fine. However, one of the columns (named QUERY) has text that is extremely long and consequently makes the column too wide (because the column displays the entire text). Code is:
<h:panelGroup> <%-- =================================== INFRAGISTICS-CODE ==================================== --%> <ig:gridView dataSource="#{pc_Bean.reports}" pageSize="11" sortingMode="multi" resizableColumns="true" allowFixedColumns="false" binding="#{pc_Bean.grid}"> <f:facet name="header"> <h:outputText value="My Grid Title" /> </f:facet> <ig:column sortBy="id" resizable="true"> <f:facet name="header"> <h:outputText value="ID" /> </f:facet> <h:outputText value="#{DATA_ROW.id}" /> </ig:column> <ig:column sortBy="query" resizable="false" style="width: 100px"> <f:facet name="header"> <h:outputText value="Query" /> </f:facet> <h:outputText value="#{DATA_ROW.query}" style="width:100px;"/> </ig:column> <ig:column sortBy="dbSourceId" resizable="true"> <f:facet name="header"> <h:outputText value="DB Source ID" /> </f:facet> <h:outputText value="#{DATA_ROW.dbSourceId}" /> </ig:column> </ig:gridView> </h:panelGroup> <%-- =================================== INFRAGISTICS-CODE ==================================== --%>
As you can see I tried adding 100 pixel width to both <ig:column> and to the <h:outputText>, which had no effect. In addition, I changed igf_grid.css (in the default blue theme) to limit the gridcolumn to 100 pixels:
.igGridColumn { border-bottom: 1px solid #DCDCDC; padding: 5px 10px 5px 10px; white-space: nowrap; width:100px;}
This didn't have any effect either. I could probably truncate the data source field, but there's got to be an easier way to style this column to a fixed width. Please let me know of any suggestions.
Thanks
Nick
Hi, Nick!
It's easy to make the column width wider than its content. But in the reverse case - when the content is longer that the specified width, some problems occur. You have to 'tell' the browser what it should do with the surplus so you should use the overflow style. I'll post the source that worked OK on my machine. I hope it will help you to solve your issue.
In JSF:
<ig:column resizable="false">
<f:facet name="header">
<h:outputText value="e-mail"></h:outputText>
</f:facet>
style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:100px; display:block;"></h:outputText>
</ig:column>
Regards!