Expand my Community achievements bar.

SOLVED

xtype datetime field: time selection drop down box is too small even thought timeWidth is defined in the dialog

Avatar

Level 6

We are using the datetime field for date and time selections. For some reasons, the time selection drop down box is very small after saving and then open the dialog again. You can see the timeWidth defined as 375 px, but seems it doesn't change the time selection drop down box. If the dateWdith is changed, the date selection box will be re-size accordingly.

<input type="text" size="24" autocomplete="off" id="ext-comp-1307-time" class="x-form-text x-form-field" style="width: 375px;">

 

Does anyone have any idea if there is a way to make the time selection drop down box big enough?

 

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

I created a datetime dialog field as mentioned but for me the time dropdown was of proper width.

Is it possible for you to post your entire dialog XML? along with any edit config nodes and other dialog nodes that you might have in your dialog? This will help analyze your issue in detail.

View solution in original post

4 Replies

Avatar

Level 10

What is happening when you specify a set size for the dropdown in the HTML element? 

Avatar

Level 6

Here is the date field defined in the dialog:

<eventDate
      jcr:primaryType="cq:Widget"        
       fieldLabel="Start Date Time"
       name="./eventDate"
       timeFormat="g:i a"
       allowBlank="false"
        xtype="datetime"/>

Please see attached the image to show how it looks like during the authoring. The arrow on the drop down of Start Date Time is barely visible. The second arrow shows if clicking the drop down, we can see the list of times.

[img]datetime field.png[/img]

Avatar

Correct answer by
Community Advisor

Hi,

I created a datetime dialog field as mentioned but for me the time dropdown was of proper width.

Is it possible for you to post your entire dialog XML? along with any edit config nodes and other dialog nodes that you might have in your dialog? This will help analyze your issue in detail.

Avatar

Level 6

I don't know what you mean set size. I have defined the timeWidth and dateWidth as below, nothing is changed. 

<eventToDate I
       jcr:primaryType="cq:Widget"        
      fieldLabel="End Date Time"
      name="./eventToDate"
      width="700"
      dateWidth="300"
      timeWidth="300"
      timeFormat="g:i a"
      allowBlank="false"
      xtype="datetime"/>

Can you think anything else I can try?

I did timePosition="below", the size of the time is the same of the date. But preferred way is timePosition="right" as default.

 

Thanks in advance.