Fixed Wrong menu position.

[truonglv]

Affected version

Latest

I have setup normal input with menu.

 

[truonglv]

Additional information that if menu width small this error will occurred.

 

[Kier]

Can you post the template code you've used to get that result please?

 

[truonglv]

Here is my template:

<xf:formrow label="{$label}" rowtype="input">
        <xf:textbox name="schedule[publish_date]" data-xf-click="menu" aria-expanded="false"
                    value="{{ $date ? date($date, 'Y-m-d g:i A') : '' }}"
                    data-xf-init="tl_schedule_time_picker"
                    data-element=".date-input--field"
                    aria-haspopup="true" readonly="true" />

        <div class="menu" data-menu="menu" aria-hidden="true">
            <div class="menu-content">
                <h4 class="menu-header">{{ phrase('tl_schedule.publish_date') }}</h4>
                <div class="timePicker--wrap">
                    <span class="timePicker--wrap--text">{{ phrase('date') }}</span>
                    <xf:dateinput value="{{ $date ? date($date, 'Y-m-d') : '' }}"
                                  data-name="date"
                                  class="flex--grow date-input--field" />
                </div>

                <div class="timePicker--wrap">
                    <span class="timePicker--wrap--text">{{ phrase('tl_schedule.hour') }}</span>
                    <div class="flex--row">
                        <xf:callback class="Truonglv\Schedule\Util\Callback"
                                     method="renderSelectHour"
                                     params="{'class': 'flex-grow date-input--field'}">{$date}</xf:callback>
                    </div>
                </div>
            </div>
        </div>
    </xf:formrow>

 

[DragonByte Tech]

Why not instead do something like this:

<xf:formrow label="{{ phrase('dbtech_ecommerce_purchase_date') }}" rowtype="input">
    <div class="inputGroup">
        <xf:dateinput name="purchase_date" value="{{ $license.purchase_date ? date($license.purchase_date, 'picker') : date($xf.time, 'picker') }}" />
        <span class="inputGroup-splitter"></span>
        <xf:textbox type="time" name="purchase_time" value="{{ $license.purchase_date ? date($license.purchase_date, 'H:i') : date($xf.time, 'H:i') }}" />
    </div>
</xf:formrow>

Seems like the way that's laid out is over-engineered and more complicated than it necessarily has to be, not to mention less user friendly. The user has to click an input box which the browser will tell them they can't interact with (readonly), then click to interact with your menu. Compare that with just seeing the two picker fields right there on the page.


Fillip

 

[XF Bug Bot]

Thank you for reporting this issue. It has now been resolved and we are aiming to include it in a future XF release (2.1.0 B7/RC1).

Change log:

Fix menu positioning with very wide triggers (wider than the menu). They will now be centered in relation to the trigger, rather than left/right aligned. Prevent the menu arrow from ever being positioned in such a way that it's not "connected" to the menu.

Any changes made as a result of this issue being resolved may not be rolled out here until later.