timeField AM/PM select field control

Support
#1

Hello,

I’ve got a timeField that uses H_12 timeMode, but no matter how wide I make the field, the AM/PM dropdown does not show the result of the selected value in full.

image

I can’t seem to find a command/attribute to control the width of this secondary field. Is there a built-in way to do this, or will I need to find a way using CSS?

Thanks,
Adam

#3

Hello again,

Just wondering if someone could provide some insight into this issue.

Thanks!
Adam

#4

Hi,

Could you please clarify, do you use Helium Large|Small, Browser Zoom or other styling?

Regards,
Gleb

#6

Hello,

Helium is set to Medium and has not been touched. Zoom is set to “Actual Size”. The editor descriptor layout is:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://jmix.io/schema/ui/window"
        caption="msg://leadActivityEdit.caption"
        focusComponent="form">
    <data>
        <instance id="leadActivityDc"
                  class="com.company.bxlj.entity.LeadActivity">
            <fetchPlan extends="_base">
                <property name="contact" fetchPlan="_base"/>
                <property name="representative" fetchPlan="_base"/>
            </fetchPlan>
            <loader/>
        </instance>
        <collection id="contactsDc" class="com.company.bxlj.entity.LeadContact">
            <fetchPlan extends="_base"/>
            <loader id="contactsDl">
                <query>
                    <![CDATA[select e from LeadContact e where e.lead = :lead order by e.lastName, e.firstName]]>
                </query>
            </loader>
        </collection>
        <collection id="representativesDc" class="com.company.bxlj.entity.ExtUser">
            <fetchPlan extends="_base"/>
            <loader id="representativesDl">
                <query>
                    <![CDATA[select e from bxlj_ExtUser e order by e.lastName, e.firstName]]>
                </query>
            </loader>
        </collection>
    </data>
    <facets>
        <dataLoadCoordinator auto="true"/>
        <screenSettings id="settingsFacet" auto="true"/>
    </facets>
    <actions>
        <action id="windowCommitAndClose" caption="msg:///actions.Ok"
                icon="EDITOR_OK"
                primary="true"
                shortcut="${COMMIT_SHORTCUT}"/>
        <action id="windowClose"
                caption="msg:///actions.Close"
                icon="EDITOR_CANCEL"/>
    </actions>
    <dialogMode height="AUTO"
                width="AUTO"
                modal="true"
                forceDialog="true"/>
    <layout spacing="true" expand="scrollBox">
        <scrollBox id="scrollBox" spacing="true">
            <form id="form" dataContainer="leadActivityDc">
                <column width="350px">
                    <entityComboBox id="representativeField" property="representative"
                                    optionsContainer="representativesDc" editable="false"/>
                    <entityComboBox id="contactField" property="contact" optionsContainer="contactsDc"/>
                    <textField id="subjectField" property="subject"/>
                    <comboBox id="activityTypeField" property="activityType"/>
                    <dateField id="dateField" property="date"/>
                    <dateField id="startDateField" property="startDate"/>
                    <timeField id="startTimeField" property="startTime" timeMode="H_12" timeFormat="HH:mm"/>
                    <dateField id="endDateField" property="endDate"/>
                    <timeField id="endTimeField" property="endTime" timeMode="H_12" timeFormat="HH:mm"/>
                    <textField id="locationField" property="location"/>
                    <textArea id="activityNotesField" property="activityNotes" rows="5"/>
                </column>
            </form>
        </scrollBox>
        <hbox id="editActions" spacing="true">
            <button id="commitAndCloseBtn" action="windowCommitAndClose"/>
            <button id="closeBtn" action="windowClose"/>
        </hbox>
    </layout>
</window>

Chrome for Mac has the following version:
image

#7

Thank you for reporting the problem, I’ve created a GitHub issue.
As a workaround, try to define width="AUTO" for timeField

Regards,
Gleb

#8

Thank you Gleb. The workaround is a good enough solution for me.

Adam