0

Is it possible to change the distribution of the label (default is 33/66%) in a horizontal form?

enter image description here

How can I have these label inline without let them going to new line?

2
  • 1
    @sfdcfox mmmh I think no, I added a screen of my form, the problem is that some label go to the new line making the form really big.. I found that the space in the div dedicated to the label is 33% while the space dedicated to the field is 66%.. my field will contain only number.. so they don't need many space, I'm looking for how to change these percentage's value
    – Teemo_smr
    Mar 20 '20 at 13:26
  • The point of the linked question is that you can't inherently modify the inner workings of components outside your namespace. There are some temporary workarounds (loadStyle), but ultimately, you need to either write your own component or use a different style. I'd suggest the default style, which places the labels above the input fields.
    – sfdcfox
    Mar 20 '20 at 14:26
0

Can you try the below CSS which should place the label above the input fields.

<div class="slds-form-element slds-m-bottom_xx-small">
                                        <label class="slds-form-element__label" for="combobox-unique-id-2">
                                            <abbr title="required" class="slds-required slds-m-around_none">*</abbr>
                                            Ship From Plant
                                        </label>
                                        <div class="slds-form-element__control">
                                            <div class="slds-combobox_container serv-tableheader_textbox">
                                                <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-picklist" aria-expanded="false" aria-haspopup="listbox" role="combobox">
                                                    <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                                                        <lightning:inputField fieldName="Plant_Name__c" variant="label-hidden" aura:id="ShipFromPlant" required="true" value="{!v.shipFromPlantID}" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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