CODEWITHSUNDEEP
csshtmljsfjsf-2.2
Peter Penzov
Peter Penzov

Reputation: 1668

Columns alignment in in h:panelGrid

I have this table with 3 columns. The third column is for validation message which by default is empty. 

<h:form>
    <h:panelGrid id="panel" styleClass="data_table_pricing" columns="3">

        <h:outputText value="Title"/>

        <h:inputText id="title" value="#{pricingForm.title}" validatorMessage="Value is too big.">
            <f:validateLength minimum="0" maximum="40" />
            <f:ajax event="change" render="@form"/>
        </h:inputText>

        <h:message id="title_message" for="title" style="color:red"/>

        <!-- // -->

        <h:outputText value="First name"/>

        <h:inputText id="first_name" value="#{pricingForm.firstName}" validatorMessage="Value is too big.">
            <f:validateLength minimum="0" maximum="40" />
            <f:ajax event="change" render="@form"/>
        </h:inputText>

        <h:message id="first_name_message" for="first_name" style="color:red"/>

        <!-- // -->

        <h:outputText value="Last name"/>

        <h:inputText id="last_name" value="#{pricingForm.lastName}" validatorMessage="Value is too big.">
            <f:validateLength minimum="0" maximum="40" />
            <f:ajax event="change" render="@form"/>
        </h:inputText>

        <h:message id="last_name_message" for="last_name" style="color:red"/>

        <!-- // -->

    </h:panelGrid>

    <h:commandLink value="reset" class="link" type="reset" style="margin: 20px;">
        <f:ajax execute="@form" render="@form"/>
    </h:commandLink>
    <h:commandLink value="Next" class="link" style="margin: 20px;" actionListener="#{pricingForm.calculatorPage()}">
        <f:ajax execute="@form" render="@form"/>
    </h:commandLink>

</h:form>

I use this CSS code to style the table:

.data_table_pricing {
    border-spacing: 12px;
    border-collapse: separate;
    width: 100%;
}

I need to find a way to fix the size the columns. When validation message appears the second column is pushed to the left.

Is there any way to fix the size of the columns?

Upvotes: 1

Views: 335

Answers (1)

m4n0
m4n0

Reputation: 32255

Setting a fixed width to the td element prevents the column jump.

.data_table_pricing tbody tr td {
  width: 33%;
}

Edit:

Solution for variable number of table columns and should be used over above method.

table.data_table_pricing {
  table-layout: fixed;
}

Upvotes: 1

Related Questions