TimeItem (useTextField="false") does not account for SelectItem CSS padding when calculating width

[Hirn]

I have overridden the default styles for input controls and, so far, have not encountered any rendering issues except with TimeItem when useTextField="false" is used.
With my custom styles applied, the component is rendered incorrectly (see screenshot below).



After reviewing the source code, I found that the width of the internal SelectItem controls is calculated in the code section shown below. The calculation does not appear to take into account the additional space introduced by the custom CSS styles.

Custom CSS

.selectItemControl,
.selectItemControlOver,
.selectItemControlDisabled,
.selectItemControlError,
.selectItemControlErrorOver,
.selectItemControlFocused,
.selectItemControlFocusedOver
{
  border: var(--border);
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 2px;
}
.selectItemText,
.selectItemTextOver,
.selectItemTextDown,
.selectItemTextError,
.selectItemTextErrorOver,
.selectItemTextFocused,
.selectItemTextFocusedOver,
.selectItemTextDisabled,
.selectItemTextHint,
.selectItemTextDisabledHint,
.comboBoxItemPendingText {
  border: 0;
  padding: 0px;
}

Current implementation in isc.TimeItem.setItems()

var baseStyleName = isc.SelectItem.getInstanceProperty("textBoxStyle"),
                // get the extra width to add to the render-width of the widest valueMap entry
                extraWidth = isc.SelectItem.getInstanceProperty("pickerIconWidth") +
                    isc.Element._getLeftMargin(baseStyleName) +
                    isc.Element._getRightMargin(baseStyleName) +
                    isc.Element._getHBorderPad(baseStyleName) +
                    4 // this last is necessary because there is no right-padding
            ;

Question
Would it be possible to replace this code with a version that takes the padding defined in controlStyle into account?
I tested the following modification locally and it appears to work correctly:

            var baseStyleName = isc.SelectItem.getInstanceProperty("controlStyle"),
                textBaseStyleName = isc.SelectItem.getInstanceProperty("textBoxStyle"),
                rightPadding = isc.Element._getRightPadding(baseStyleName) ? 0 : 4;
                // get the extra width to add to the render-width of the widest valueMap entry
                extraWidth = isc.SelectItem.getInstanceProperty("pickerIconWidth") +
                    isc.Element._getHBorderPad(baseStyleName) +
                    isc.Element._getLeftMargin(textBaseStyleName) +
                    isc.Element._getRightMargin(textBaseStyleName) +
                    isc.Element._getHBorderPad(textBaseStyleName) +
                    rightPadding // this last is necessary because there is no right-padding
            ;

I also noticed a related issue with the PickList width.
When clicking any of the three SelectItems within the TimeItem for the first time, the PickList is displayed with an incorrect width.
After closing and opening the same PickList again, its width is calculated correctly and the PickList is displayed as expected.
This behavior suggests that the initial width calculation may not be taking all style-related dimensions into account, while subsequent openings use an updated or recalculated width.

[Hirn]

I noticed that this code is sufficient to fix the issue.

            var baseStyleName = isc.SelectItem.getInstanceProperty("controlStyle"),
                textBaseStyleName = isc.SelectItem.getInstanceProperty("textBoxStyle"),
                rightPadding = isc.Element._getRightPadding(baseStyleName) || 0;
                rightPadding += 4;
                // get the extra width to add to the render-width of the widest valueMap entry
                extraWidth = isc.SelectItem.getInstanceProperty("pickerIconWidth") +
                    isc.Element._getLeftMargin(textBaseStyleName) +
                    isc.Element._getRightMargin(textBaseStyleName) +
                    isc.Element._getHBorderPad(textBaseStyleName) +
                    rightPadding // this last is necessary because there is no right-padding
            ;

With this code, the component actually looks even better than with my initially suggested version.

[Isomorphic]

This code actually adds textBoxStyle padding a second time - it's already applied by the function that measures the content.

However, we've made tweaks to correct things, such that TimeItem children, like DateItem children, autotsize correctly to their largest value, plus the icon and the padding on both the textBox and the control. We also updated some of our builtin skins to remove a stray default width of 70px for TimeItem's child widgets.

[Hirn]

I installed the latest version, v13.1p_2026-06-20/Pro.
The issue with the width of the PickLists has been resolved. Thank you for the fix.
However, there is still an issue with the width of the SelectItem controls themselves. They are now rendered as shown in the screenshot below.
It appears that the width calculation of the SelectItem controls still does not fully account for the padding defined in the custom controlStyle, causing the controls to be slightly too narrow.

After applying the latest code modification I suggested, the component is rendered as shown below.

The appearance of the SelectItem controls is improved and the width is calculated correctly.

However, the issue with the PickList width reappears. When a PickList is opened for the first time, its width is incorrect. After closing and reopening it, the width is recalculated correctly.

[Isomorphic]

You will not be seeing any difference at all in auto-sizing in 13.1 today - you didn't mention your version until this post, so the change was only made in 15.0 and 14.1, our next and current production branches.

We'll port it to 13.1 today and you can retest tomorrow.

If you still see issues, we're going to need more information/a code sample we can run, rather than snippets of custom CSS, in order to fix it.