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

1
  • would you like to open the child component in a popup? Commented Oct 11, 2018 at 19:21

2 Answers 2

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
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>

You must log in to answer this question.

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