1

I create a visual force page with a lightning web component form.

The problem I have is that the input labels are too small on a mobile.

The visual force page:

<apex:page showHeader="false" title="Request Quote">
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:RequestQuoteApp", function() {
          $Lightning.createComponent("c:RequestQuoteWebComponent",
            {},
            "lightning",
            cmp => {}
          );
        });
    </script>
</apex:page>

The start html component:

<template>
    <div class="snackbar"></div>

    <div style="padding: 50px">
        <lightning-card title="Quote Request" icon-name="standard:quotes">
            <div class="slds-m-around_medium slds-form">
                <lightning-input label="First Name" placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required></lightning-input>
                <div class="slds-form-element slds-form-element_horizontal">
                    <label class="slds-form-element__label" for="">First Name</label>
                    <div class="slds-form-elemet__control">
                        <lightning-input placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required variant="label-hidden"></lightning-input>
                    </div>
                </div>

                <lightning-layout horizontal-align="spread" class="slds-wrap">
                    <lightning-layout-item padding="around-small" flexibility="grow" class="slds-large-size_4-of-12 slds-medium-size_12-of-12">
                        <label><abbr title="required" class="slds-required">*</abbr>First Name</label>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small" flexibility="grow" class="slds-large-size_8-of-12 slds-medium-size_12-of-12">
                        <lightning-input placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required variant="label-hidden"></lightning-input>
                    </lightning-layout-item>

I'm finding LWC a bit of a let down for this purpose.

Improve this question

1 Answer 1

Reset to default
1

This is not the problem with LWC, you are actually extracting the HTML from LWC component and adding it in VF Page.

Visualforce page by default is not compatible with mobile. You should be Using the viewport meta tag to control layout on mobile browsers

You should add <meta name="viewport" content="width=device-width, initial-scale=1.0"/>.

Try below:

<apex:page lightningStylesheets="true" showHeader="false" sidebar="false" >
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Mobile</title>
    </head>
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:c:RequestQuoteApp", function() {
          $Lightning.createComponent("c:c:RequestQuoteWebComponent",
            {},
            "lightning",
            cmp => {}
          );
        });
    </script>
</apex:page>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .