panel issue with 2 column layout

csyperski · 29 Jul 2010, 14:00

I have posted a similar issue regard that tabLayout, but I have a similar problem that didn't exist in the 2.0.x branch. I am using a very simple 2 column div based layout and for my content side I would like to frame it with a panel, but it doesn't display correctly. Here is my code:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head ><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></h:head>
       <h:body>
                <div style="float: left; min-width: 100px; width: 100px; background-color: red; height: 600px;">
                    TESTING
                </div>
               
                <div style="padding-left: 200px; background-color: yellow; height: 300px;">
                    
                    <p:panel header="testing">

                       

                    </p:panel>
                    
                </div>
           <div style="clear: both" />
           
       </h:body>
</html>

Here is what I see:

If I am doing something wrong please tell me! I just can't get the new PF to work with this kind of layout. I know if has to do with float: left;, but if I remove that I don't get a two column layout. I am desperate, at the point in a project where I need to get this working, or stick with the old version.

csyperski · 29 Jul 2010, 17:23

I have the same issue using the other styles as well.

29 Jul 2010, 18:14

You can also try floating the yellow div;

Code: Select all

<div style="float:left; background-color: yellow; height: 300px;">
    <p:panel />
    ...

csyperski · 29 Jul 2010, 19:37

Thanks, I will see if I can make my real layout work with that.

29 Jul 2010, 21:21

Or you can use p:layout.

csyperski · 30 Jul 2010, 21:55

OK, I wrestled with this last night and I still can't make PF 2.1 work like 2.0 did with my layout. One thing that is important to the layout is that it is a dynamically expanding page; between 780 - 1260 width, and I can't seem to figure out how to get this to work with floating my main contain div left, width specifying a static width. So this is my last attempt to see if anyone smarter than I can see a way to make this work as it did before. I know this isn't a prime faces issue, except that it was functional in the previous release.

Is my only option to float the main content div?, to prevent the title tab of a panel/tab bar (in the case of tab view) from expanding to the height of the menu div?

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head >
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </h:head>
       <h:body style="width: 100%;margin-top: 0px; padding-top: 0px; font-family: arial; font-size: 62.5%;background-color: #828282;">
            <div style="background: white;min-width: 780px;max-width: 1260px;margin: 10px auto;">
                <div style="margin: 7px 7px 0px 7px;padding-top: 10px;padding-bottom: 10px;">
                    <div style="border-width: 1px; border-style: solid; border-color: red;width: 120px;float: left;padding-left: 5px;margin-top: 50px;">
                        Menu Floated Left
                        <ul>
                            <li>Menu Item 1</li>
                            <li>Menu Item 1</li>
                            <li>Menu Item 1</li>
                            <li>Menu Item 1</li>
                            <li>Menu Item 1</li>
                            <li>Menu Item 1</li>
                            <li>Menu Item 1</li>
                        </ul>
                    </div>
                    <div style="border-width: 1px; border-style: solid; border-color: red;padding-left: 150px;padding-top: 50px;margin-left: auto;margin-right: auto;text-align: left;min-height: 250px;">
                        <p:panel header="My Title">
                            Main Body
                        </p:panel>
                        
                    </div>
                </div>
            </div>
       </h:body>
</html>

Thanks for any help anyone can offer.

Below is an example of the difference between the two releases:

2.0.2

Vs

2.1

On the same exact page with no changes, except the PF library version.

30 Jul 2010, 23:49

What was the CSS selector you've figured out that was causing the problem? I remember it was something like ui-helper-?

csyperski · 31 Jul 2010, 16:58

I was able to fix the issue by adding:

Code: Select all

.ui-helper-clearfix:after
{
    display: inline;
}

I don't what impact this will have on any other components, or what regressions bugs this will cause, but it seemed to fix the issues I was having. I imagine other users will have this issue as most css two column, non-fixed width layouts that aren't "float-less" tend use a div that is floated left and a main content div that isn't floated. I don't know if this would be considered a bug to you, but it is an incompatibility between revs. It seems to work on current versions of IE, FF, and Chrome.

31 Jul 2010, 17:35

I've created the following issue;

http://code.google.com/p/primefaces/iss ... il?id=1083

I think there is room for improvement in panel's structural css as this should have worked without adding a fix.

csyperski · 31 Jul 2010, 20:16

Great, thanks for all the help, as a side note this doesn't fix the issue with the tabView, it throws off the parent div of the UL items a bit, but it is a good enough solution for my needs at this time, so thanks again!

panel issue with 2 column layout

Who is online