0

I am running the dashboard example found here: https://www.primefaces.org/showcase/ui/panel/dashboard.xhtml

I have replaced the first panel "Sports" with:

<p:panel id="cal" header="Calendar">  
    <h:form>
    <p:calendar id="calendar" value="#{calendar.date}"    mode="inline"></p:calendar>
    </h:form>
</p:panel>

and the bean found here:

https://www.primefaces.org/showcase/ui/input/calendar.xhtml

Then i added a p:datatable with one column in the second p:panel

<p:panel id="simpleData" header="Simple Datatable">  
   <p:dataTable id="simpledata_tab" value="#{simpleMB.availableData()}" var="temp" 
   scrollable="true" scrollHeight="150" styleClass="simpledata_tab" >
        <p:column>
                <h:outputText value="#{temp.toString()}" />
        </p:column>
    </p:dataTable>
</p:panel>

This is what i get in eclipse built in browser:

enter image description here

and this is what i get when i run it on Firefox:

enter image description here

When i remove the datatable from the xhtml code both browsers return the same page layout. Firefox version is 52.1.0. I am using Eclipse Neon. I used a styleClass in the datatable to set the datatable's width in case it was the problem but the proble remains.

.ui-datatable.simpledata_tab
{  
    width:40%;
}

EDIT - eclipse browser details:

Browser name = Safari
Full version = 5.0
Major version = 5
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+
Bonzay
  • 740
  • 2
  • 10
  • 29
  • 1
    On different operating systems Eclipse wraps different browser as built-in browser (e. g. IE on Windows, FF on Linux). You can use [JavaScript code to display detailed information of your Eclipse built-in browser](https://stackoverflow.com/a/11219680/6505250). – howlger Oct 19 '17 at 09:23

1 Answers1

0

For some reason , firefox renders the widget differently than other browsers when it includes a datatable. The only solution that worked for me was to set the dashboard column width to a fixed value.

.ui-dashboard-column {
    width: 300px;
}

However this messes up every column created in the model, so a better way to do this is creating a div inside the panel and set the div's width.

Bonzay
  • 740
  • 2
  • 10
  • 29