Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    4.1, cant make my HLayout to obey height 1

    Hello,

    we're working on updating to 4.1, which is taking us far longer than we've anticipated since 4.1 won't work in IE11 unless you set the "<!DOCTYPE HTML>" tag.

    That tag, however, changed *alot* of our layout in our app, which we're working on solving.

    One of the problem i can't seem to get my head around is this:

    I have a HLayout, called "HRLayout" to display a horizontal bar where appropriate:

    Code:
        public HRLayout() {     
        	//setStyleName("hrlayout");           
            Img hrl = new Img();
            hrl.setMaxHeight(1);
            hrl.setSrc(NubaCommonConstants.HR_LEFT);
            Img hr = new Img();
            hr.setMaxHeight(1);
            hr.setSrc(NubaCommonConstants.HR);
            hr.setWidth100();
            Img hrr = new Img();
            hrr.setSrc(NubaCommonConstants.HR_RIGHT);
            hrr.setMaxHeight(1);
            addMember(hrl);
            addMember(hr);
            addMember(hrr); 
            
            setHeight(1);
        }
    This has worked well before, but after the update/adding of DOCTYPE, smartgwt encapsulates this in like 4 layers of DIVs and adds a height of 13 to it that i CANT REMOVE. i've tried setting padding, margin to 0, setting heights and maxheights on everything i can think of
    to 1 both in code and css, no dice.

    See screenshots of what i get in firebug.


    I would be very happy for some pointers, i am out of ideas.
    Attached Files

    #2
    You haven't specified what you want the HLayout to do. To make it only 1px tall and have any overflow hidden, you would setOverflow() to hidden.

    Note that:

    1. 4.1 has a significantly reduced DOM relative to older versions such as 3.0, so it would not be expected that more DOM elements are present just do an upgrade; something else has gone wrong

    2. We would still support quirks mode, but Microsoft just broke basic functions of IE in quirks mode from IE9 forward, leaving no choice.

    Comment


      #3
      Hello, many thanks for responding, we're getting anxious over here :)

      We want the hlayout to be 1px tall, since the images are 1px tall.

      As mentioned, this worked prior to DOCTYPE, without setting any overflow. in my project, the HLayout is 1px tall when i remove the doctype line from my JSP, the 13 pixels problem comes back when i reinsert it.

      I'm sure you had good reasons for changing this, not complaining about that, but it doesn't change the problem we're experiencing right now.

      I have a "test-project" with basically no code besides the one you see above, and a .gwt that sets the enterprise skin, i still get the same weird behaviour you can see in the firebug screenshots.

      I'm also not sure why i would need to set the overflow? my image is 1 px tall, i set the layout to 1px tall, shouldn't that be enough? And again, my code works fine again when i remove the DOCTYPE.

      I'll post a small example in a post below shortly.

      Comment


        #4
        Below is a small example of the "13 pixels high" div i get in my project after i insert the DOCTYPE.

        html:
        Code:
        <!DOCTYPE html>
        <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">                                        -->
            <title>Test</title>
            <script> var isomorphicDir = "test/sc/"; </script>
            <script type="text/javascript" language="javascript" src="test/test.nocache.js"></script>
        </head>
        
        <body></body>
        <!--load the datasources-->
        <!--script src="test/sc/DataSourceLoader?dataSource=report">
        </script-->
        </html>
        gwt.xml:
        Code:
        <module rename-to="test">
        
            <inherits name='com.google.gwt.user.User'/>
            <inherits name="com.smartgwt.tools.SmartGwtTools"/>
            <inherits name="com.smartgwtee.SmartGwtEENoTheme"/>
            <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlue"/>
        
        
            <inherits name="com.google.gwt.i18n.I18N"/>
            <inherits name="com.google.gwt.maps.Maps"/>
        
            <!-- English language, independent of country -->
            <extend-property name="locale" values="en"/>
            <!-- Swedish language -->
            <extend-property name="locale" values="sv_SE"/>
        
        
            <entry-point class='com.test.client.Test'/>
            <!-- Set to compile fewer permutations to reduce build time in development
                 Options are: ie6,ie8,gecko,gecko1_8,safari,opera -->
            <set-property name="user.agent" value="gecko1_8"/>
            <!--set-property name="user.agent" value="gecko1_8, ie8, safari"/-->
        
            <!-- Specify the paths for translatable code -->
            <source path='client'/>
            <source path='gwtcommons'/>
        </module>
        Test.java:
        Code:
        public class Test implements EntryPoint {
        
            VLayout mainLayout;
        
            public void onModuleLoad() {
                    mainLayout = new VLayout();
                    mainLayout.setAlign(VerticalAlignment.CENTER);
                    mainLayout.setMembersMargin(0);
                    mainLayout.setWidth100();
        
                    IButton b = new IButton();
                    b.setTitle("Just under image!");
                    HRLayout hr1 = new HRLayout();
        
                    mainLayout.addMember(hr1);
                    mainLayout.addMember(b);
        
                    mainLayout.draw();
            }
        
            public class HRLayout extends HLayout {
        
                public HRLayout() {
                    Img hr = new Img(NubaCommonConstants.HR,1,1);
                    hr.setWidth100();
                    addMember(hr);
                    setWidth100();
        
                    setHeight(1);
                }
            }
        }
        Attached Files

        Comment


          #5
          This isn't a change. To get a height of 1 you'd always have to specify overflow:hidden, because otherwise, the component has one line of text due to it's default content of "&nbsp;".

          Comment

          Working...
          X