How can we help you today?

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
Before applying custom CSSAfter applying custom CSS



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



TABLE OF CONTENTS


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:

Live Mode View

The Design tab will open.


  • In Grid Mode:

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

Grid Mode View


  • In Legacy Page Builder:

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

Public Version

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:

Custom CSS in Live Mode view

  • In Grid Mode:

Custom CSS in Grid Mode view


3.2. Paste the copied code


Paste the code from Step 1 to the Custom CSS field

  • In Live Mode:

Code added in Live Mode view

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


  • In Grid Mode:

Code added in Grid Mode view

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

Preview the result


3.3. Confirm your changes

  • In Live Mode:

Press the checkmark button:

Apply the changes - Live Mode View

  • In Grid Mode:

Press Update

Update the changes - Grid Mode


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.


After applying custom CSS 


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 49 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more