0

I have a nested component and when the parent displays it on a full width page the child expands the entire screen and does not look good. I used "slds-text-align_center" to center it, but then tried to add style in the div to adjust width to 700px. This does not seem to work. If I do the style by itself then the width works, BUT my component is then left justified. Any ideas to center AND get width to 700px?

<div class="slds-text-align_center" >
    <c:AddressVerify/>
</div>

Thanks! Ryan

  • would you like to open the child component in a popup? – sanket kumar Oct 11 '18 at 19:21
2

Are you trying to position c:AddressVerify in the middle of your parent component with white space on the sides? If so, something like this could help.

<lightning:layout multipleRows="false">
    <lightning:layoutItem size="12" smallDeviceSize="1" mediumDeviceSize="3" largeDeviceSize="3" padding="around-small"/>
    <lightning:layoutItem size="12" smallDeviceSize="10" mediumDeviceSize="6" largeDeviceSize="6" padding="around-small">
        <c:AddressVerify/>
    </lightning:layoutItem>
    <lightning:layoutItem size="12" smallDeviceSize="1" mediumDeviceSize="3" largeDeviceSize="3" padding="around-small"/>
</lightning:layout>
0

You need another wrapper element. If your component is meant to have other alignments within itself, you'll need to further add an additional alignment back to the left:

<div class="slds-text-align_center">
    <div class="container slds-text-align_left">
        <c:AddressVerify/>
    </div>
</div>

.THIS .container {
    display: inline-block; 
    width: 700px;
    border: 1px solid black;
}

In general, though, you should consider using lightning:layout to make responsive designs in your components, but if you're absolutely certain you want to use pixel measurements, this is one way you could do that.


Alternatively, slds-align_absolute-center may also serve your purpose:

<div class="slds-align_absolute-center">
    <div class="container">
        <c:AddressVerify/>
    </div>
</div>

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.