DateItem disbaled mode - canvas not align properly and font size increased

[antonychristopher]

Hi,

I've been using SMARTGWT framework from past 1 year.currently there is a requirement to disable the dateItem canvas to prevent the user from selecting when the selected year reached out of fiscal year.Implemented the logic based on the condition as dateItem.getPicker().setDisabled(true).

While executing the application getting the dateItem canvas as misaligned and font set as bigger.Is there anyway to resolve this?

SMARTGWT version : Isomorphic SmartClient/SmartGWT Framework (v10.0p_2015-10-19/PowerEdition Deployment 2015-10-19)
Chrome browser : Version 48.0.2564.109 m

Stuck with couple of days.

[Isomorphic]

It looks like that build may have been missing a required CSS class. However, we don't see this behavior against latest 5.0, so the best thing to do is to upgrade to the latest 10.0 patch build from smartclient.com/builds.

If you can't do that, inspect the elements with missing disabled styling and let us know what the class names are.

[antonychristopher]

Hi,

please find below css properties used

isc.DateChooser.addProperties({
alternateWeekStyles:false,
backgroundColor:null,
baseNavButtonStyle:"dateChooserNavButton",
baseWeekdayStyle:"dateChooserWeekday",
baseWeekendStyle:"dateChooserWeekend",
baseBottomButtonStyle:"dateChooserBorderedBottomButton",
edgeCenterBackgroundColor:"#FFFFFF",
headerStyle:"dateChooserButton",
nextMonthIcon:"[SKINIMG]/DateChooser/arrow_right.png",
nextMonthIconHeight:16,
nextMonthIconWidth:16,
nextYearIcon:"[SKINIMG]/DateChooser/doubleArrow_right.png",
nextYearIconHeight:16,
nextYearIconWidth:16,
prevMonthIcon:"[SKINIMG]/DateChooser/arrow_left.png",
prevMonthIconHeight:16,
prevMonthIconWidth:16,
prevYearIcon:"[SKINIMG]/DateChooser/doubleArrow_left.png",
prevYearIconHeight:16,
prevYearIconWidth:16,
showDoubleYearIcon:false,
showEdges:false,
skinImgDir:"images/DateChooser/",
todayButtonHeight:20,
weekendHeaderStyle:"dateChooserWeekendButton",
styleName:"dateChooserBorder",
});


isc.RelativeDateItem.changeDefaults("pickerIconDefaults", {
neverDisable: false,
src: "[SKIN]/DynamicForm/date_control.png"
});

[Isomorphic]

Right. That looks like an extract from one of our skin files, and only shows the classes *should* be in use.

You need to right click those bits of text in your image that look wrong and inspect their HTML elements in the DOM - those are the ones that are actually missing *Disabled entries in the CSS.

[antonychristopher]

Hi,

Thanks for the prompt response.

For the text 2...

<div id="isc_1OF" style="display:inline-block;box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;text-overflow:ellipsis">2076</div>

For the text Sep 2...

<div id="isc_1ON" style="display:inline-block;box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;text-overflow:ellipsis">2076</div>

[Isomorphic]

The parents of those :)

The ones with a "class" specified.

[antonychristopher]

Hi,

For the text 2...

<td class="dateChooserNavButtonDisabled" style="padding-top:0px;padding-bottom:0px;text-align:center;vertical-align:middle;white-space:nowrap">
<div id="isc_1OF" style="display:inline-block;box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;text-overflow:ellipsis">2076</div>
</td>

For the text Sep 2...
<td class="dateChooserNavButtonDisabled" style="padding-top:0px;padding-bottom:0px;text-align:center;vertical-align:middle;white-space:nowrap">
<div id="isc_1ON" style="display:inline-block;box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;text-overflow:ellipsis">2076</div>
</td>

[antonychristopher]

Hi,

would you please suggest way to get rid of issue.awaiting for your reply.

[Isomorphic]

Since we don't see this issue against current 5.0 framework builds, the best thing you can do is to update to the latest patched build of 5.0 from smartclient.com/builds - that will give you the latest skin CSS and the latest DateChooser code, which would be expected to address this issue, and a raft of other fixes that have added since your current build.

Really, that's what you should do - in almost every instance, changes arriving in nightly builds of 5.0 (and all other non-development branches) are bug-fixes only - if there's a nightly build there for your version, something got fixed, so there's no substitute for using the latest build.

If updating is really problematic, you could maybe download the latest build and compare the skin_styles.css files from the two versions to figure out what's missing from your current build.

Or, by way of a test, it's possible that just adding this CSS to your project will have an effect:

.dateChooserNavButtonDisabled {
  font-size: 11px;
}

which might help.

But ultimately, you're going to need to update to the latest build of 5.0 at some time, and the longer you leave it, the more already-fixed issues you're likely to hit.