0

I have a Visualforce page with a selectlist, an inputfield and some buttons. The Selectlist label is above the selection, which makes the alignment funny for the other fields. Any idea how I can fix this?

<fieldset class="slds-card__body slds-card__body_inner">               
    <div class="slds-card slds-p-around_medium">                        
        <div class="slds-form-element slds-form-element_compound">
            <div class="slds-form-element__control ">
                <div class="slds-form-element__row">
                    <div class="slds-size_1-of-3 ">
                        <div class="slds-size_2-of-3 ">
                            <label class="slds-form-element__label" for="selobject">Select an Object</label>
                            <apex:selectList id="selobject" value="{!selobject}" size="1" label="Select an Object" title="Select an Object" styleClass="slds-select">
                                <apex:selectOptions value="{!items}"/>   
                            </apex:selectList>
                        </div>
                    </div>
                    <div class="slds-size_1-of-3">
                        <div class="slds-file-selector slds-file-selector_files">
                            <div class="slds-file-selector__dropzone">
                                <apex:inputFile styleClass="slds-file-selector__input slds-assistive-text" onchange="handleFile(this)" accept="csv" id="importfile" value="{!csvFileBody}" filename="{!csvAsString}"/>
                                <apex:outputLabel styleClass="slds-file-selector__body" for="importfile">
                                    <span class="slds-file-selector__button slds-button slds-button_neutral">
                                        <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
                                        </svg>
                                        Select File
                                    </span>
                                    <span id="fileName" class="slds-file-selector__text slds-medium-show">or Drop Files</span>
                                </apex:outputLabel>
                            </div>
                        </div>
                    </div>
                    <div class="slds-size_1-of-3">
                        <apex:commandButton styleClass="slds-button slds-button--neutral" value="Import" action="{!importCSVFile}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

enter image description here

1

Just add a margin to this div below

<div class="slds-size_1-of-3">

like

<div class="slds-size_1-of-3 slds-m-top_medium">
| improve this answer | |

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.