Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
45
How can I set the width of a grid column?
posted

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