2

I want to change the way lightning:inputLocation looks, when i use it without 'slds-input' class it looks like this

lightning:inputLocation without 'slds-input'

when I use it with 'slds-input' class it looks like this lightning:inputLocation with 'slds-input'

but I want to make it look something like thisimage of ui:inputDateTime

where latitude and longitude are in same line(this image is of ui:inputDateTime where date and time are shown in same line/row)

when i inspected it, it's html code turned out to be

<fieldset class="slds-form-element">
    <legend class="slds-form-element__label slds-text-title_caps">Doctor's Office Location</legend>
    <div class="slds-form-element__group">
        <div class="slds-form-element__row">
            <div class="slds-size_1-of-2">
                <lightning-input data-latitude="">
                    <div class="slds-form-element">
                        <label for="input-5" class="slds-form-element__label slds-no-flex">Latitude</label>
                        <div class="slds-form-element__control slds-grow">
                            <input type="text" id="input-5" class="slds-input">
                        </div>
                    </div>
                </lightning-input>
            </div>
            <div class="slds-size_1-of-2">
                <lightning-input data-longitude="">
                    <div class="slds-form-element">
                        <label for="input-6" class="slds-form-element__label slds-no-flex">Longitude</label>
                        <div class="slds-form-element__control slds-grow">
                            <input type="text" id="input-6" class="slds-input">
                        </div>
                    </div>
                </lightning-input>
            </div>
        </div>
    </div>
</fieldset>

is there any way to change it to horizontal from vertical view?

5

Refer the Compound variant of Form Layout example from SLDS documentation.

To get the desired output you need to enclose the fieldset in a div with classes slds-form slds-form_compound:

<div class="slds-form slds-form_compound">
    <fieldset class="slds-form-element">
        <legend class="slds-form-element__label slds-text-title_caps"
            >Doctor's Office Location</legend>
        <div class="slds-form-element__group">
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size_1-of-2">
                    <label class="slds-form-element__label" for="input-01">Latitude</label>
                    <input type="text" id="input-01" class="slds-input" />
                </div>
                <div class="slds-form-element slds-size_1-of-2">
                    <label class="slds-form-element__label" for="input-02">Longitude</label>
                    <input type="text" id="input-02" class="slds-input" />
                </div>
            </div>
        </div>
    </fieldset>
</div>

Added by Sumuga:

Something like this should do the trick

<lightning:inputLocation label="My Coordinates" latitude="37.7938460" 
    longitude="-122.3948370" class="slds-form slds-form_compound"/>

Output:

Horizontal

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.