CODEWITHSUNDEEP
internet-explorerjsf-2primefaces
Mazen Khalil
Mazen Khalil

Reputation: 56

primefaces <p:layout> not working with IE 9

I'm facing a problem when using IE to browse http://gamma.j.layershift.co.uk

My site is built using JSF2 with primefaces 3.5.

**the rest of page can seen on Firefox and chrome.

the problem happened only on the index(first) page.

<ui:composition template="/templates/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name="content">
    <!-- p:galleria panelWidth="960" panelHeight="350"
        value="#{mbIndex.img}" var="image" styleClass="ui-corner-all">
        <p:graphicImage id="gal_image" value="resources/images/#{image}" />
    </p:galleria -->

    <p:imageSwitch effect="fade" speed="2900" styleClass="center"
        style="width:1000px;height:400px;">
        <ui:repeat value="#{mbIndex.img}" var="image">
            <p:graphicImage value="resources/images/#{image}"
                style="clip:rect(0px, 1000px, 400px, 0px);min-width:1000px; min-height:400px;" />
        </ui:repeat>
    </p:imageSwitch>

    <br />

    <p:layout style="max-height:500px !important;">
        <p:layoutUnit position="west" header="About GAMMA"
            style="max-width:300px !important; height:300px; !important">
            <h:outputLabel style="word-wrap: break-word;"
                value="The company started in 2012 focusing on the production of disinfectants. Our products are used in laboratories, clean rooms, and process areas in pharmaceutical, biotechnology, healthcare, academic and industrial facilities in addition to livestock animals, " />
            <p:commandLink value="More info..." action="#{mbIndex.toAbout}"></p:commandLink>

    </p:layoutUnit>

        <p:layoutUnit position="center" header="Latest news">

        </p:layoutUnit>
    </p:layout>
</ui:define>
</ui:composition>

Any explanation please?
Thanks.

This screenshot from Firefox (what the page should be). This screenshot from Firefox

--When using IE just the image shown.

Upvotes: 3

Views: 3818

Answers (2)

King Kamal
King Kamal

Reputation: 205

The below worked for me in IE 9, i had this in my css.

.ui-layout-container {
    overflow-x:visible !important; overflow-y:visible !important;
}

Upvotes: 7

Sonic
Sonic

Reputation: 815

This is a CSS issue.

Modify css class ui-layout-container or set style attribute and change the overflow attributes to:

<p:layout style="max-height:500px !important; overflow-x:visible !important; overflow-y:visible !important;">

This worked for me in IE8 and should work in IE9 too.

Upvotes: 1

Related Questions