Fixed <xf:button> when used as a link has misaligned text

DragonByte Tech

DragonByte Tech

Well-known member
Affected version
2.0.9
Given the following HTML:
HTML: 
<xf:button type="submit" icon="purchase" />
&nbsp;
<xf:button href="{{ link('dbtech-credits/currency/gift-purchase', $currency, {'event_id': $event.event_id}) }}" icon="purchase">{{ phrase('dbtech_credits_gift') }}</xf:button>
This is the output:
V1asJ9J.png



Fillip
 
Got me, button--link is literally for links which have drunk a button transformation potion. :X3:
However, inserted your snippet above into PAGE_CONTAINER

44094652432_c6c5fd2d03_o.png


Seems centered to me. And in a non-troll-actual-formrow-environment:
43424186174_a66b36bd54_o.png

Maybe some steps to reproduce would help out.
 
This is the complete <xf:formrow> - not sure if anything else is needed.
HTML: 
<xf:formrow label="{$event.settings.purchase_amount} {$currency.title}"
            explain="{$event.settings.purchase_description}"
            hint="{$event.cost_phrase}"
            rowtype="input">

    <div class="inputGroup">

        <xf:if is="{{ count($event.settings.payment_profile_ids) > 1 }}">
            <xf:select name="payment_profile_id">
                <xf:option>{{ phrase('(choose_payment_method)') }}</xf:option>
                <xf:foreach loop="$event.settings.payment_profile_ids" value="$profileId">
                    <xf:option value="{$profileId}" label="{$profiles.{$profileId}}" />
                </xf:foreach>
            </xf:select>

            <span class="inputGroup-splitter"></span>

            <xf:if is="$isGift">
                <xf:button type="submit" icon="purchase">{{ phrase('dbtech_credits_gift_to_x', {'param1': $recipient.username}) }}</xf:button>
            <xf:else />
                <xf:button type="submit" icon="purchase" />
                &nbsp;
                <xf:button href="{{ link('dbtech-credits/currency/gift-purchase', $currency, {'event_id': $event.event_id}) }}" icon="purchase">{{ phrase('dbtech_credits_gift') }}</xf:button>
            </xf:if>
        <xf:else />
            <xf:if is="$isGift">
                <xf:button type="submit" icon="purchase">{{ phrase('dbtech_credits_gift_to_x', {'param1': $recipient.username}) }}</xf:button>
            <xf:else />
                <xf:button type="submit" icon="purchase" />
                &nbsp;
                <xf:button href="{{ link('dbtech-credits/currency/gift-purchase', $currency, {'event_id': $event.event_id}) }}" icon="purchase">{{ phrase('dbtech_credits_gift') }}</xf:button>
            </xf:if>

            <xf:hiddenval name="payment_profile_id">{$event.settings.payment_profile_ids|first}</xf:hiddenval>
        </xf:if>
    </div>
</xf:formrow>
Maybe it's the inputGroup? 🤔

EDIT: The <xf:select> when combined with a link styled as a button is causing this.


Fillip
 
Last edited:
I have actually tracked this down, though I've only made a change for this in 2.1. It seems to be a browser styling difference between <button> and <a>, but I have made them behave more consistently by making them inline-flex instead of inline-block and then using that for more alignment control. If you see any issues in 2.1 (beta 3 and on) let us know -- it's possible it may need to be backed out.
 
Back
Top Bottom