<P: layout> issues not working with IE 9

I got a problem when using IE to view http://gamma.j.layershift.co.uk

My site is built using JSF2 with 3.5 primaries.

** the rest of the page is visible on Firefox and chrome.

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

<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 explanations please?
Thank.

This screenshot is from Firefox (which page should be). This screenshot from Firefox

- When using IE, only the image is shown.

+3


source to share


2 answers


Below worked for me in IE 9, I had this in my CSS.



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

      

+4


source


This is a CSS issue.

Change the ui-layout-container css class or set the 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 as well.

+1


source







All Articles