Date Picker appearance

[acarur01]

Unfortunately our schedule is really tight so I will just be copying over styles that we really need. I have a problem with the date picker buttons. Could you tell me what is needed to make them look "normal"? I tried copying all the date styles and the button styles from 8.3. It fixed the styling for the disabled days but the today and cancel buttons still have lines within the button canvas

[Isomorphic]

We moved this to its own thread since it seemed to be unrelated to the thread where you posted.

The DateChooser looks "normal" by default. The best way to determine how it's broken by your CSS is to inspect the element in Firebug (or any similar tool) and see what CSS styles you are applying.

[acarur01]

I've already done this exercise. But I cannot find anything else that is different regarding date and button styles. I can send you the skin_style.css that I am using if you would like to verify

[Isomorphic]

And yet something is obviously different. If you aren't finding it by glancing at Firebug's output, we would suggest going line by line to find the difference.

[phayward]

Additional markup compared to showcase

Using SmartGWT 4.0p-20130827 I am seeing the same rendering.

I compared my application's HTML to that of the DateChooser showcase app, and I found that the markup is different in my application.

From the showcase:

<div class="normal" id="isc_2V" onscroll="return isc_DateChooser_0_bottomLayout.$lh()" style="position: absolute; left: 55px; top: 144px; width: 38px; height: 20px; z-index: 200936; padding: 0px; -moz-box-sizing: border-box; overflow: hidden;">
    <div id="isc_2W" style="POSITION:relative;display:inline-block;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;vertical-align:top;VISIBILITY:inherit;Z-INDEX:200936;CURSOR:default;">
        &nbsp;

        <div id="isc_2X" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_DateChooser_0_todayButton,true);" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_DateChooser_0_todayButton,true);" onscroll="return isc_DateChooser_0_todayButton.$lh()" style="position: absolute; left: 0px; top: 0px; width: 38px; height: 20px; z-index: 200954; -moz-box-sizing: border-box; overflow: hidden; cursor: pointer;" tabindex="1895">
            <div id="isc_2Y" style="POSITION:relative;display:inline-block;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;vertical-align:top;VISIBILITY:inherit;Z-INDEX:200954;CURSOR:pointer;">
                <table cellpadding="0" cellspacing="0" width="38">
                    <tbody>
                        <tr>
                            <td align="center" class="dateChooserBorderedBottomButton" nowrap="true" onfocus="isc_DateChooser_0_todayButton.$47()" style="padding:2px;" tabindex="-1" valign="center">Today</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

From my application:

<div class="normal" id="isc_9H" onscroll="return isc_DateChooser_1_bottomLayout.$lh()" style="position: absolute; left: 49px; top: 164px; width: 43px; height: 20px; z-index: 202970; padding: 0px; -moz-box-sizing: border-box; overflow: hidden;">
    <div id="isc_9I" style="POSITION:relative;display:inline-block;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;vertical-align:top;VISIBILITY:inherit;Z-INDEX:202970;CURSOR:default;">
        &nbsp;

        <div id="isc_9J" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_DateChooser_1_todayButton_label,true);" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_DateChooser_1_todayButton_label,true);" onscroll="return isc_DateChooser_1_todayButton.$lh()" style="position: absolute; left: 4px; top: 0px; width: 34px; height: 19px; z-index: 200775; -moz-box-sizing: border-box; overflow: hidden; cursor: pointer;" tabindex="-1">
            <div id="isc_9K" style="position: relative; display: inline-block; -moz-box-sizing: border-box; width: 100%; vertical-align: top; visibility: inherit; z-index: 200775; cursor: pointer;">
                <table cellpadding="0" cellspacing="0" width="34">
                    <tbody>
                        <tr>
                            <td align="center" class="buttonTitle" nowrap="true" onfocus="isc_DateChooser_1_todayButton_label.$47()" tabindex="-1" valign="center">Today</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="dateChooserBottomButton" id="isc_9M" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_DateChooser_1_todayButton,true);" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_DateChooser_1_todayButton,true);" onscroll="return isc_DateChooser_1_todayButton.$lh()" style="position: absolute; left: 0px; top: 0px; width: 43px; height: 20px; z-index: 200774; padding: 0px; -moz-box-sizing: border-box; overflow: hidden; cursor: pointer;" tabindex="5054">
            <div id="isc_9L" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:200774;CURSOR:pointer;PADDING:2px;">
                <table border="0" cellpadding="0" cellspacing="0" style="font-size:0px;">
                    <tbody>
                        <tr>
                            <td class="null"><img align="texttop" border="0" height="19" id="isc_9Lstart" name="isc_9Lstart" src="http://localhost:8084/sl/skins/Enterprise/images/button/button_start.png" style="height: 20px; width: 4px;" width="4"></td>

                            <td class="">
                                <div class="null" style="overflow: hidden; width: 34px; height: 20px;"><img align="texttop" border="0" height="19" id="isc_9Lstretch" name="isc_9Lstretch" src="http://localhost:8084/sl/skins/Enterprise/images/button/button_stretch.png" style="height: 20px; width: 36px;" width="36"></div>
                            </td>

                            <td class="null"><img align="texttop" border="0" height="19" id="isc_9Lend" name="isc_9Lend" src="http://localhost:8084/sl/skins/Enterprise/images/button/button_end.png" style="height: 20px; width: 4px;" width="4"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="isc_9N" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_DateChooser_1_applyButton_label,true);" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_DateChooser_1_applyButton_label,true);" onscroll="return isc_DateChooser_1_applyButton.$lh()" style="position: absolute; left: 4px; top: 0px; width: 32px; height: 19px; z-index: 200793; visibility: hidden; -moz-box-sizing: border-box; overflow: hidden;" tabindex="-1">
            <div id="isc_9O" style="POSITION:relative;display:inline-block;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;vertical-align:top;VISIBILITY:inherit;Z-INDEX:200793;CURSOR:default;">
                <table cellpadding="0" cellspacing="0" width="32">
                    <tbody>
                        <tr>
                            <td align="center" class="buttonTitle" nowrap="true" onfocus="isc_DateChooser_1_applyButton_label.$47()" tabindex="-1" valign="center">Apply</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

I create the DateChooser using the same code as the showcase:

  DateChooser dateChooser = new DateChooser();  
  dateChooser.setWidth(100);  
  dateChooser.addDataChangedHandler(dataChangedHandler);

Any ideas why I'm getting the additional markup?

[Isomorphic]

It looks like you may have forced CSS3 mode off (see the Skinning Overview if you don't know what this is), or, you may be using the wrong DOCTYPE (HTML5 DOCTYPE is required).

[phayward]

loading wrong skin

Turns out we were using the old skin. By using the newer skin, the date picker Today button renders as it appears on the dashboard.

Thank you for your help!