css margin not not applied in jsf

Question

I have the jsf code and css code below. I'm having trouble getting the css margin attributes to take effect. All the other attributes work fine except margin. What am I doing wrong?

Notice the .contentDialog css class is applied to p:dialog. What I expect is a 100px margin around h:outputText enclosed in f:facet name="header". But it's not happening.

I've tested on IE 7, IE 8, FireFox 7.0.1 and Chrome 16.0.912.63 m. Same problem on all browsers. Also, I'm using PrimeFaces.

JSF CODE

<h:form id="newContentForm">
    <p:dialog header="New Menu Item Type..." widgetVar="newWidget" 
              resizable="false" showEffect="explode" hideEffect="explode" modal="true" closable="false"
              styleClass="contentDialog" width="440">
        <h:panelGrid id="newPopUpWindow" column="1">
            <!-- Grid Header -->
            <f:facet name="header">
                <h:outputText value="New information"/>
            </f:facet>

            <!-- Grid Body -->
            <h:outputText value="Description:"/>
            <p:inputText id="newDescriptionInText" value="#{menuItemTypeContent.selectedContent.menuItemTypeDescr}">         
                <p:ajax process="@this"/>
            </p:inputText>

            <!-- Grid Footer -->
            <f:facet name="footer">
                <!-- Dialog command bottons -->
                <h:panelGroup>
                    <!-- Submit -->
                    <p:commandButton value="Submit" image="ui-icon ui-icon-check"
                                     actionListener="#{menuItemTypeContent.save}"
                                     oncomplete="handleNewRequest(xhr, status, args)"/>
                    <!-- Cancel -->                                             
                    <p:commandButton value="Cancel" image="ui-icon ui-icon-close" 
                                     actionListener="#{menuItemTypeContent.clearContent}" 
                                     onclick="newWidget.hide()" type="reset"/>
                </h:panelGroup>                             
            </f:facet>                             
        </h:panelGrid>

        <!-- Submit javascript handler -->    
        <h:outputScript>
            function handleNewRequest(xhr, status, args) {
                if (args.duplicateSaveError) {
                    duplicateError.show();
                }else if (args.illegalStatusError) {
                    deleteError.show();
                }else if (args.validationFailed) {
                    newContentError.show();
                }else {
                    // Hide new content dialog box if add happened without exceptions
                    newWidget.hide();
                }
            }
        </h:outputScript>   
    </p:dialog>    
</h:form>

CSS CODE

.contentDialog {
    font-size:13px;
    border:2px solid #2D65B0;   
}

.contentDialog table {
    border:1px solid #8DB1E2;
    width:100%;
}
.contentDialog th {
    background-color:#2D65B0;
    width:100%;
    text-align:left;
    color:red;
    margin:100px;
}

have you tried using !important; ? like this margin:100px !important; — Daniel, Dec 28 '11 at 08:18
You don't use margins to style table cells. Have a look here: http://stackoverflow.com/questions/716442/css-cell-margin — mrembisz, Dec 28 '11 at 08:26
@mrembisz This is correct and should be posted as the answer. The solution is to use `padding`. — maple_shaft, Dec 28 '11 at 11:50
@maple_shaft Okay, I did. Most of the information is under the linked question but at least this question is no longer unanswered. — mrembisz, Dec 28 '11 at 12:21

score 2 · Accepted Answer · edited May 23 '17 at 10:08

2

This is not related to JSF but rather to CSS and html. You cannot use margins to style table cells. What you can use is cellspacing attribute for the entire table or padding for individual cells. You can find more information under this question.

edited May 23 '17 at 10:08

Community

1
1

answered Dec 28 '11 at 12:19

mrembisz

12,722
7
36
32

css margin not not applied in jsf

JSF CODE

CSS CODE

1 Answers1