datatable width not working

[grizli]

When I set width for datatable to 100% it stretches the block to 100%, but columns are stuck to middle (i have it aligned to the middle) at like 40% of available space.
Is there way to force columns to utilize the whole area?
Thanks!

[cagatay.civici]

I think it is an issue, width should just work. I'll look into this, as a quick workaround following will make table 100%;

Code: Select all

<style type="text/css">
.yui-skin-sam .yui-dt table {
  width:100%;
}
</style>

[grizli]

I've applied the CSS you provided. It created a very weird rendering behavior.
Now not only vertical scroll bar is there, but also a horizontal.
I attached a screen shot.

[cagatay.civici]

Can you post your datatable code.

[grizli]

Code: Select all

<div xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.prime.com.tr/ui">
        <center>
        <div class="GridContainer">
            <p:accordionPanel>
                <p:tab title="#{msgs.Filters}">
                    this is a test
                </p:tab>
            </p:accordionPanel>
            <p:dataTable id="DevTable" var="data" value="#{devs.myList}" paginator="true" rows="50" scrollable="true"
                height="650" width="100%">
                <p:column filter="true" sortBy="#{data.deviceid}" sortable="true">
                    <f:facet name="header">
                        <h:outputText value="#{devs.deviceidColumnName}" />
                    </f:facet>
                    <h:outputText value="#{data.deviceid}" />
                </p:column>
                <p:column filter="true" sortBy="#{data.assetnum}" sortable="true">
                    <f:facet name="header">
                        <h:outputText value="#{devs.assetnumColumnName}" />
                    </f:facet>
                    <h:outputText value="#{data.assetnum}" />
                </p:column>
                <p:column filter="true" sortBy="#{data.model}" sortable="true">
                    <f:facet name="header">
                        <h:outputText value="#{devs.modelColumnName}" />
                    </f:facet>
                    <h:outputText value="#{data.model}" />
                </p:column>
                <p:column filter="true" sortBy="#{data.ipaddress}" sortable="true">
                    <f:facet name="header">
                        <h:outputText value="#{devs.ipaddressColumnName}" />
                    </f:facet>
                    <h:outputText value="#{data.ipaddress}" />
                </p:column>
            </p:dataTable>
        </div>
        </center>
</div>

[cagatay.civici]

I didn't know that your datatable is scrollable, so first css I've provided won't fit well to the scrollable table. When using a scrollable table,try setting a fixed with or height. Scrolling is meant to be used like that. So it'd be sth like width:400px where 400px is less than the calculated width of the content. Also note that column widths can be controlled with width attribute. Hope these help.

[grizli]

Is there a way to have columns accept width as a percent too?
Right now it is ParseInt() so it fails.

I can't have fixed width as I don't know client's size of the screen. I'm going to try to come up with something via javascript.