How to Align Button Design Elements Inside a Panel

By default, a Button Design Element will automatically adjust its width based on the content that you have inside the Panel. This will give you uneven button sizes and you may encounter difficulty in adjusting its alignment. In this article, we will show you how to align the Button Design Element to the width of the Panel and get a uniform set of buttons where you need them.

Before	After

If you would like to apply this solution, please follow the steps in this support article.

TABLE OF CONTENTS

• Before we begin
• Step 1. Prepare the Custom CSS solution
• Step 2. Open the Settings of the Panel Design Element
• Step 3. Update the Panel Design Element with the code
  • 3.1. Switch to the Custom CSS tab
  • 3.2. Paste the copied code
  • 3.3. Confirm your changes
• Step 4. Save the Changes and Publish
• Result

Before we begin

• Make sure ShortPoint is installed on your SharePoint site(s). We recommend always having the latest version. Visit our Download ShortPoint page and get the latest version of ShortPoint.
• You are a ShortPoint user with an active license.

Step 1. Prepare the Custom CSS solution

Please copy the following code and save it for future reference.

.shortpoint-panel-content .shortpoint-panel-slim-scroll {
    position: relative; 
}

  .shortpoint-panel-content .shortpoint-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%; 
}

Note: The above code is to keep the Buttons design element at the bottom of the Panel design element.

Step 2. Open the Settings of the Panel Design Element

Enter edit mode and open the settings of the Panel Design Element:

• In Live Mode:

Enter the EasyPass Active Mode. Then click the cog wheel icon to open the settings:

The Design tab will open.

• In Grid Mode:

Click the cog wheel icon to open the settings of the Panel Design Element:

• In Legacy Page Builder:

Click the cog wheel icon to open the settings of the Panel Design Element:

The Settings tab will open.

Step 3. Update the Panel Design Element with the code

Using the copied code in Step 1, you can now proceed to add the Custom CSS to your Design Element by following these steps:

3.1. Switch to the Custom CSS tab

• In Live Mode:

• In Grid Mode:

3.2. Paste the copied code

Paste the code from Step 1 to the Custom CSS field

• In Live Mode:

You will see the changes applied to your Design Element in real time.

• In Grid Mode:

You may check how it will look on your page by clicking the Preview button:  

3.3. Confirm your changes

• In Live Mode:

Press the checkmark button:

• In Grid Mode:

Press Update: 

Note: You can apply the same steps to other Panel design elements.

Step 4. Save the Changes and Publish

Once done, you can save the changes that you made and publish.

Result

That's it. The buttons inside the Panel design element are now aligned.

Related articles:

• How to Change the Panel Title Alignment (to Center or Right) : ShortPoint Support 
• How to Make Rounded Corners for ShortPoint Panel : ShortPoint Support