4

I implemented a SLDS modal component.

If activated from within a e.g. FlexiPage, all is working well.

When opened within the utility bar using the very same component, the modal is restricted to the lower left area.

Opening modal located on FlexiPage vs opening modal from utility bar

Without using an additional (hidden) component on the FlexiPage, how can I open a full width modal from the utility bar?

Edit: You can find all code here, the basic setup of the component used on FlexiPage and UtilityBar is:

<!-- myComp --> <aura:component> <c:modal/> </aura:component>

3

Since Winter 18 this is now effortlessly possible using <lightning:overlayLibrary/>

1

There are several SLDS Classes that could then be applied to your component to adjust the placement of it on the page. From lightning:layout in the Lightning Components Developer Guide, you'll want to add SLDS classes to use the Lightning Grid system to help you align your component with the base page it will be opened above.

From the Docs:

verticalAlign

Spread layout items out vertically based on the following values.

  • start: Appends the slds-grid--vertical-align-start class to the grid. The layout items are aligned at the top of the container.
  • center: Appends the slds-grid--vertical-align-center class to the grid. The layout items are aligned in the center of the container.
  • end: Appends the slds-grid--vertical-align-end class to the grid. The layout items are aligned at the bottom of the container.
  • stretch: Appends the slds-grid--vertical-stretch class to the grid. The layout items extend vertically to fill the container.

horizontal align

Spread layout items out horizontally based on the following values.

  • center: Appends the slds-grid--align-center class to the grid. This attribute orders the layout items into a horizontal line without any spacing, and places the group into the center of the container.
  • space: Appends the slds-grid--align-space class to the grid. The layout items are spaced horizontally across the container, starting and ending with a space.
  • spread: Appends the slds-grid--align-spread class to the grid. The layout items are spaced horizontally across the container, starting and ending with a layout item.
  • end: Appends the slds-grid--align-end class to the grid. The layout items are grouped together and aligned horizontally on the right side of the container.

To "pull" or stretch the width of the modal across the page layout boundaries, you'll need to use

pullToBoundary

Pull layout items to the layout boundaries based on the following values. If padding is used on layout items, this attribute pulls the elements on either side of the container to the boundary. Choose the size that corresponds to the padding on your layoutItems. For instance, if lightning:layoutItem="horizontalSmall", choose pullToBoundary="small".

  • small: Appends the slds-grid--pull-padded class to the grid.
  • medium: Appends the slds-grid--pull-padded-medium class to the grid.
  • large: Appends the slds-grid-pull-padded-large class to the grid.

For verticalAlignment and horizontalAlignment, I believe you'll want to do the something like the following to achieve the same behavior in both conditions:

Let's assume the outer class of the CSS for your component is wrapped in a <div>. Your layout should look something like what's below:

<aura:component>
    <div class="c-container">
        <lightning:layout VerticalAlign="center" horizontalAlign="center">

           // Other CSS and content...

        </lightning:layout>
    </div>
</aura:component>

I suspect you'll also want to add pullToBoundary with either small, medium or large to the <lightning:layout> tag, depending on what's specified for the page you're surfacing the component in provided you want the component's box to fully extend to the page margins.

See the link I've provided for more examples of different usages of this CSS.

EDIT:

From looking at the code you've provided in the link via the edits to your question, it appears to me that you'll want to create the modal as a separate component with it's own CSS, then call the "inner" modal component from the "outer" retrievesObject component.

In that manner, you'll be able to create separate CSS for the modal that's not dependent on the component you're calling it from. I suspect that may be the source of your issue. Components are best designed using "building blocks" of modular components to facilitate creating more complex components with greater functionality.

  • I could not get this to work. Cf: i.imgur.com/cvke82n.png modal as well as backdrop are still contained to utlitity bar - no matter how i wrap c:modal or the body of c:modal into lightning:layouts or pull boundaries. – Christian Szandor Knapp Jun 21 '17 at 9:08
  • See my edits. Recommend you create the modal as an "inner" component that's called from the outer component. – crmprogdev Jun 22 '17 at 18:28
  • Thank you. Im struggeling to understand your suggestion. Are you suggesting something like a additional wrapper component? I.e. <wrapper><modal/><sobjectRetrieve/></wrapper>? And but the wrapper into the Utility Bar? – Christian Szandor Knapp Jun 23 '17 at 15:15
  • No. I'm suggesting that you put the code with <lightning:layout> that calls the <c:modal aura:id="modal"> into its own component wrapper and call that component from inside the retrievesObject.cmp. In that manner, you can format it separately from your other code. You can also put the latter inside of another wrapper if you need to, each with its own CSS that's relevant to the application. – crmprogdev Jun 25 '17 at 16:24
  • As long as the cmps involved are living in the utility bar, its configurable pixel heights/widths are the boundary of every component I put there. I tried quite a few combinations of lightning layouts/layoutitems. Since an additional component outside of the utility bar is out of scope, I'm at loss. – Christian Szandor Knapp Jun 26 '17 at 16:48

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.