Clever Geek Handbook

GWT DockPanel formatting incorrectly with Chrome

I am creating an department website and am facing a unique issue when the dock bar is resized incorrectly, but only with Chrome.

When I resize the information inside the center of my dock bar to be something taller, it expands correctly but never resizes to fit the shorter materials. It works fine in Firefox, IE and Spartan, but not in Chrome. It looks like it is setting bottom padding for the center instead of resizing the element.

Here's a link to 3 images on imgur that show the differences.

View post on imgur.com

Here's my code for creating a central container:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
    </ui:style>


    <g:HTMLPanel>
        <g:DockPanel styleName="my-DockPanel">
            <g:Dock direction="NORTH">
                <g:HorizontalPanel width="750px" styleName="page-header">
                    <g:cell horizontalAlignment="ALIGN_LEFT">
                        <g:HTML>

                        </g:HTML>
                    </g:cell>
                    <g:cell horizontalAlignment="ALIGN_CENTER">
                        <g:Image url="Resources/Images/CSDepartment_Banner.gif" />
                    </g:cell>
                </g:HorizontalPanel>
            </g:Dock>

            <g:Dock direction="SOUTH">
                <g:HorizontalPanel styleName="page-footer">
                    <g:HTML>

                    </g:HTML>

                    <g:HTML>
                        <DIV align="center">
                            The Department of Computer Science
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />

                            Last modified: July 1, 2015
                            <br />
                            <br />
                        </DIV>
                    </g:HTML>

                    <g:cell horizontalAlignment="ALIGN_RIGHT">
                        <g:HTML>

                        </g:HTML>
                    </g:cell>
                </g:HorizontalPanel>
            </g:Dock>

            <g:Dock direction="EAST">
                <g:VerticalPanel width="100%" height="100%">
                </g:VerticalPanel>
            </g:Dock>

            <g:Dock direction="WEST">
                <g:VerticalPanel width="100%" height="100%">
                    <g:Label>

                    </g:Label>
                </g:VerticalPanel>
            </g:Dock>

            <g:Dock direction="NORTH">
                <g:HorizontalPanel width="100%">
                    <g:cell horizontalAlignment="ALIGN_CENTER">
                        <g:MenuBar ui:field="navigationBar"></g:MenuBar>
                    </g:cell>
                </g:HorizontalPanel>
            </g:Dock>

            <g:Dock direction="CENTER" width="1260px" height="100%">
                <g:ScrollPanel height="auto">
                    <g:DeckPanel ui:field="deckPanel" height="100%">

                    </g:DeckPanel>
                </g:ScrollPanel>
            </g:Dock>
        </g:DockPanel>
    </g:HTMLPanel>
</ui:UiBinder>

And here's the CSS for the entire page:

@CHARSET "ISO-8859-1";

/**
 * This file is linked through the index.html file
 */
body {
    /*background-color: #CCCCCC !important;*/
    background-color: #fff5ec;
    font-family: "Garamond Premier Pro", "Myriad Pro", "Verdana",
        "Times New Roman";
}

/*Adds a drop shadow at the top of the page and stays there.*/
body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    z-index: 100;
}

.my-dockPanel {
    margin: 0;
    padding: 0;
}

.my-dockPanel {
    margin: 0px;
    padding: 0px;
}

.my-DockPanel td {
    padding: 0px;
    margin: 0px;
}

.my-DockPanel {
    height: 100%;
    width: 100%;
    border-spacing: 0px;
    font-color: white;
}

.page-footer {
    height: auto;
    width: 1260px;
    background-color: #003366;
    padding: 0px;
    margin: auto;
    color: #FFF;
}

.page-header {
    height: 100px;
    /*  display: block; */
    margin-left: auto;
    margin-right: auto;
}

.blog-title {
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    background: #555555;
}

.blog-panel {
    border-top: 1px solid black;
    padding: 2px;
    margin-bottom: 6px;
}

.my-ScrollPane {
    width: auto;
    padding: 0px 0px 0px 0px;
    min-height: 641px;
}

.gwt-MenuBar {
    cursor: default;
}

.gwt-MenuBar .gwt-MenuItem {
    cursor: default;
}

.gwt-MenuBar .gwt-MenuItem-selected {
    /*   background: #666; */
    background: #335685;
    color: #0cf;
}

.gwt-MenuBar-horizontal {
    /*   background: #222222; */
    background: #003366;
    border-radius: 55px 55px 0px 0px;
    -moz-border-radius: 55px 55px 0px 0px;
    -webkit-border-radius: 55px 55px 0px 0px;
    border: 1px solid #000000;
}

.gwt-MenuBar-horizontal .gwt-MenuItem {
    padding: 0px 10px;
    vertical-align: bottom;
    font-weight: bold;
    color: #E0E0E0;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
}

.gwt-MenuBar-horizontal .gwt-MenuItemSeparator {
    width: 1px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-left: 1px solid #bec7cc;
    background: #000;
}

.gwt-MenuBar-horizontal .gwt-MenuItemSeparator .menuSeparatorInner {
    width: 1px;
    height: 1px;
    background: #000;
}

.gwt-MenuBar-vertical {
    margin-top: -5px;
    margin-left: 0px;
    padding-left: 2px;
    /*  background: #4D4D4D; */ /*background: #194775;*/
    background: #003366;
    color: #E0E0E0;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    opacity: 0.9;
}

.gwt-MenuBar-vertical table {
    border-collapse: collapse;
}

.gwt-MenuBar-vertical .gwt-MenuItem {
    padding: 4px 14px 4px 1px;
}

.gwt-MenuBar-vertical .gwt-MenuItemSeparator {
    padding: 2px 0px;
}

.gwt-MenuBar-vertical .gwt-MenuItemSeparator .menuSeparatorInner {
    height: 1px;
    padding: 0px;
    border: 0px;
    border-top: 1px solid #bec7cc;
    background: #222;
    overflow: hidden;
}

.gwt-MenuBar-vertical .subMenuIcon {
    padding-right: 4px;
}

.gwt-MenuBar-vertical .subMenuIcon-selected {
    /*  background: #666; */
    background: #335685;
}

.gwt-MenuBarPopup {
    margin: 0px 0px 0px 3px;
}

.gwt-MenuBarPopup .menuPopupTopCenter {
    background: url(images/hborder.png) 0px -12px repeat-x;
}

.gwt-MenuBarPopup .menuPopupBottomCenter {
    background: url(images/hborder.png) 0px -13px repeat-x;
    -background: url(images/hborder_ie6.png) 0px -13px repeat-x;
}

.gwt-MenuBarPopup .menuPopupMiddleLeft {
    background: url(images/vborder.png) -12px 0px repeat-y;
    -background: url(images/vborder_ie6.png) -12px 0px repeat-y;
}

.gwt-MenuBarPopup .menuPopupMiddleRight {
    background: url(images/vborder.png) -13px 0px repeat-y;
    -background: url(images/vborder_ie6.png) -13px 0px repeat-y;
}

.gwt-MenuBarPopup .menuPopupTopLeftInner {
    width: 5px;
    height: 5px;
    zoom: 1;
}

.gwt-MenuBarPopup .menuPopupTopRightInner {
    width: 8px;
    height: 5px;
    zoom: 1;
}

.gwt-MenuBarPopup .menuPopupBottomLeftInner {
    width: 5px;
    height: 8px;
    zoom: 1;
}

.gwt-MenuBarPopup .menuPopupBottomRightInner {
    width: 8px;
    height: 8px;
    zoom: 1;
}

.gwt-MenuBarPopup .menuPopupTopLeft {
    background: url(images/corner.png) no-repeat 0px -36px;
    -background: url(images/corner_ie6.png) no-repeat 0px -36px;
}

.gwt-MenuBarPopup .menuPopupTopRight {
    background: url(images/corner.png) no-repeat -5px -36px;
    -background: url(images/corner_ie6.png) no-repeat -5px -36px;
}

.gwt-MenuBarPopup .menuPopupBottomLeft {
    background: url(images/corner.png) no-repeat 0px -41px;
    -background: url(images/corner_ie6.png) no-repeat 0px -41px;
}

.gwt-MenuBarPopup .menuPopupBottomRight {
    background: url(images/corner.png) no-repeat -5px -41px;
    -background: url(images/corner_ie6.png) no-repeat -5px -41px;
}

* html .gwt-MenuBarPopup .menuPopupTopLeftInner {
    width: 5px;
    height: 5px;
    overflow: hidden;
}

* html .gwt-MenuBarPopup .menuPopupTopRightInner {
    width: 8px;
    height: 5px;
    overflow: hidden;
}

* html .gwt-MenuBarPopup .menuPopupBottomLeftInner {
    width: 5px;
    height: 8px;
    overflow: hidden;
}

* html .gwt-MenuBarPopup .menuPopupBottomRightInner {
    width: 8px;
    height: 8px;
    overflow: hidden;
}

.blog_image {
    padding: 1px;
    margin: 0px 20px 0px 20px;
    border: 0px solid #021a40;
    /*  width:300px; */
/*  height:auto; */
}

.staff-image {
    padding: 1px;
    margin: 0px 20px 0px 0px;
    border: 0px solid #021a40;
    width: auto;
    height: 200px;
}

.staff-information {
    width: 1260px;
    height: 230px;
    /*  border: 20px solid #021a40; */ /*   margin: 0px 0px 25px 0px; */
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-top: 2px solid #000000;
    border-left: 2px dashed #000000;
    border-right: 2px dashed #000000;
}

.staff-information-west {
    /*  background-color: #000000; */
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    width: 315px;
}

.staff-information-east {
    margin-left: auto;
    margin-right: auto;
    width: 315px;
    horizontal-align: left;
}

.featured-item-1 {
    border-left: 3px solid #003366;
    border-top: 3px solid #003366;
}

.featured-item-2 {
    border-left: 3px solid #003366;
    border-right: 3px solid #003366;
    border-top: 3px solid #003366;
}

.featured-item-3 {
    border-right: 3px solid #003366;
    border-top: 3px solid #003366;
}

.featured-title {
    width: 406px;
    text-transform: uppercase;
    padding-left: 10px;
}

.featured_image {
    /*  padding-left: 10px; */ /*   margin: 0px 0px 0px 10px; */
    width: 130px;
    height: 130px;
    -webkit-box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
    -moz-box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
    box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
}

.featured-body {
    width: 216px;
    height: auto;
    font-size: 15px;
    padding-left: 15px;
}

.myButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    -webkit-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad
        ), color-stop(1, #5972a7));
    background: -moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
    background: -webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
    background: -o-linear-gradient(top, #637aad 5%, #5972a7 100%);
    background: -ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
    background: linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad',
        endColorstr='#5972a7', GradientType=0);
    background-color: #637aad;
    border: 1px solid #314179;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 28px;
    font-weight: bold;
    padding: 32px 76px;
    text-decoration: none;
}

.myButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7
        ), color-stop(1, #637aad));
    background: -moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
    background: -webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
    background: -o-linear-gradient(top, #5972a7 5%, #637aad 100%);
    background: -ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
    background: linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7',
        endColorstr='#637aad', GradientType=0);
    background-color: #5972a7;
}

.myButton:active {
    position: relative;
    top: 1px;
}

.html-clicked {
    background: url("Resources/Images/Widgets/things.png") repeat scroll 0 0
        transparent;
    height: 68px;
    list-style: none outside none;
    margin: 0;
    line-height: 63px;
    padding-left: 25px;
    color: #fff;
    font-family: georgia;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.html-unclicked {
    background: url("Resources/Images/Widgets/things.png") repeat scroll 0
        -66px transparent;
    height: 68px;
    list-style: none outside none;
    margin: 0;
    line-height: 63px;
    padding-left: 25px;
    color: #23438a;
    font-family: georgia;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

This is the last big question that keeps me from pushing this towards production (besides creating new images). I chased my tail on this for 3 days and finally give up.

+3


source to share


1 answer


Ok, I started working, but it caused another issue that I had to fix. The whole problem above is related to my CSS for .my-DockPanel

Before:

.my-DockPanel {
    height: 100%;
    width: 100%;
    border-spacing: 0px;
    font-color: white;
}


After:

.my-DockPanel {
    height: auto;
    width: 100%;
    border-spacing: 0px;
    font-color: white;
}

This created a new problem with some pages shifting to the left, but all I had to do was set their width to static. Problem solved!

+1


source






More articles:


All Articles