Revisions to Lightning-input with Type="Date" (LWC) displays different size in mobile and desktop [closed]

Left closed in review as "Original close reason(s) were not resolved" by Derek F, Adrian Larson♦

occurred Sep 13, 2021 at 20:04

added 42 characters in body

Added to review

Source Link

edited Sep 13, 2021 at 17:42

63
2
10

I developdeveloped a QuickAction Screen in LWC, that is called from a Aura component thought a custom button and I find a wierd problem.

The width of the lightning-inputlightning-input with type="date" is being different when iI open the screen withfrom a smartphone.

I'd like to know if someone already pass with a similar problem.

AboveBelow you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

Here is my html input:

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>
</aura:component>

andAnd this is my html lightning-input:

<div class="slds-m-around_x-small">
    <div class="row">
        <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
            <div style="font-size: 0.8125rem; float: left;">
                Aprovação
            </div>
        </div>
        <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
           <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}> 
           </lightning-input>
        </div>
    </div>
</div>

i'mI'm using bootstrap to let my screen responsive, but iI already test with lightning-layout and i had the same problem.

I develop a QuickAction Screen in LWC, and I find a wierd problem.

The width of the lightning-input with type="date" is being different when i open the screen with a smartphone.

I'd like to know if someone already pass with a similar problem.

Above you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

Here is my html input:

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>
</aura:component>

and this is my html lightning-input:

<div class="slds-m-around_x-small">
    <div class="row">
        <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
            <div style="font-size: 0.8125rem; float: left;">
                Aprovação
            </div>
        </div>
        <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
           <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}> 
           </lightning-input>
        </div>
    </div>
</div>

i'm using bootstrap to let my screen responsive, but i already test with lightning-layout and i had the same problem.

I developed a QuickAction Screen in LWC, that is called from a Aura component thought a custom button and I find a wierd problem.

The width of the lightning-input with type="date" is being different when I open the screen from a smartphone.

I'd like to know if someone already pass with a similar problem.

Below you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>
</aura:component>

And this is my html lightning-input:

<div class="slds-m-around_x-small">
    <div class="row">
        <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
            <div style="font-size: 0.8125rem; float: left;">
                Aprovação
            </div>
        </div>
        <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
           <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}> 
           </lightning-input>
        </div>
    </div>
</div>

I'm using bootstrap to let my screen responsive, but I already test with lightning-layout and i had the same problem.

Post Closed as "Not suitable for this site" by Kris Goncalves, Oleksandr Berehovskyi, Jackson Chen, identigral, Oleh Berehovskyi

occurred Sep 13, 2021 at 17:33

deleted 168 characters in body

Source Link

edited Sep 13, 2021 at 15:31

Kris Goncalves

22.8k
8
35
72

I develop a QuickAction Screen in LWC, and I find a wierd problem.

The width of the lightning-input with type="date" is being different when i open the screen with a smartphone.

I'd like to know if someone already pass with a similar problem.

Above you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

Here is my html input:

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

<c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>

</aura:component>

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>
</aura:component>

and this is my html lightning-input:

<div class="slds-m-around_x-small">
                <div class="row">
                    <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
                        <div style="font-size: 0.8125rem; float: left;">
                            Aprovação
                        </div>
                    </div>
                    <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
                        <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}></lightning-input>
        >  
           </div>lightning-input>
                </div>
            </div>
           </div>

i'm using bootstrap to let my screen responsive, but i already test with lightning-layout and i had the same problem.

I develop a QuickAction Screen in LWC, and I find a wierd problem.

The width of the lightning-input with type="date" is being different when i open the screen with a smartphone.

I'd like to know if someone already pass with a similar problem.

Above you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

Here is my html input:

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

<c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>

</aura:component>

and this is my html lightning-input:

<div class="slds-m-around_x-small">
                <div class="row">
                    <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
                        <div style="font-size: 0.8125rem; float: left;">
                            Aprovação
                        </div>
                    </div>
                    <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
                        <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}></lightning-input>
                    </div>
                </div>
            </div>

i'm using bootstrap to let my screen responsive, but i already test with lightning-layout and i had the same problem.

I develop a QuickAction Screen in LWC, and I find a wierd problem.

The width of the lightning-input with type="date" is being different when i open the screen with a smartphone.

I'd like to know if someone already pass with a similar problem.

Above you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

Here is my html input:

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>
</aura:component>

and this is my html lightning-input:

<div class="slds-m-around_x-small">
    <div class="row">
        <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
            <div style="font-size: 0.8125rem; float: left;">
                Aprovação
            </div>
        </div>
        <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
           <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}>  
           </lightning-input>
        </div>
    </div>
</div>

i'm using bootstrap to let my screen responsive, but i already test with lightning-layout and i had the same problem.

added 1262 characters in body

Source Link

edited Sep 13, 2021 at 15:09

Matheus Coelho Campos

63
2
10

I develop a QuickAction Screen in LWC, and I find a wierd problem.

The width of the lightning-input with type="date" is being different when i open the screen with a smartphone.

I'd like to know if someone already pass with a similar problem.

Above you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

Here is my html input:

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

<c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>

</aura:component>

and this is my html lightning-input:

<div class="slds-m-around_x-small">
                <div class="row">
                    <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
                        <div style="font-size: 0.8125rem; float: left;">
                            Aprovação
                        </div>
                    </div>
                    <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
                        <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}></lightning-input>
                    </div>
                </div>
            </div>

i'm using bootstrap to let my screen responsive, but i already test with andlightning-layout and i had ththe same problem.

I develop a QuickAction Screen in LWC, and I find a wierd problem.

The width of the lightning-input with type="date" is being different when i open the screen with a smartphone.

I'd like to know if someone already pass with a similar problem.

Above you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

Here is my html input:

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

<c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>

</aura:component>

and this is my html lightning-input:

<div class="slds-m-around_x-small">
                <div class="row">
                    <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
                        <div style="font-size: 0.8125rem; float: left;">
                            Aprovação
                        </div>
                    </div>
                    <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
                        <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}></lightning-input>
                    </div>
                </div>
            </div>

i'm using bootstrap to let my screen responsive, but i already test with and i had th same problem.

I develop a QuickAction Screen in LWC, and I find a wierd problem.

The width of the lightning-input with type="date" is being different when i open the screen with a smartphone.

I'd like to know if someone already pass with a similar problem.

Above you will can see the screenshots:

DESKTOP (WEB)

SMARTPHONE

Here is my html input:

I'm using a aura component to call my LWC:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">

<c:quickActionPriceBook recordId="{!v.recordId}" onclose="{!c.closeQA}"></c:quickActionPriceBook>

</aura:component>

and this is my html lightning-input:

<div class="slds-m-around_x-small">
                <div class="row">
                    <div class="col-12 col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 adj-center">
                        <div style="font-size: 0.8125rem; float: left;">
                            Aprovação
                        </div>
                    </div>
                    <div class="col-12 col-xs-12 col-sm-8 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
                        <lightning-input type="date" variant="label-hidden" placeholder="Selecione uma data" dropdown-alignment="left" value={valueUpdateDate} disabled={disabled}></lightning-input>
                    </div>
                </div>
            </div>

i'm using bootstrap to let my screen responsive, but i already test with lightning-layout and i had the same problem.

added 1262 characters in body

Source Link

edited Sep 13, 2021 at 15:04

Matheus Coelho Campos

63
2
10

Loading

making title not all-caps

Link

edited Sep 13, 2021 at 13:28

Derek F

64k
15
54
104

Loading

Source Link

asked Sep 13, 2021 at 13:23

Matheus Coelho Campos

63
2
10

Loading

Stack Exchange Network

Return to Question