Skip to main content
A
AllanThompson16-Pearl
16-Pearl
October 10, 2018
Solved

Problems with vertical alignment of toggle buttons

  • October 10, 2018
  • 1 reply
  • 2951 views

Hi All,

 

I've noticed that for some reason, toggle buttons have a bit of extra space below them.  This can cause alignment problems when placing them in a grid.

 

Most experiences I create have a toolbar along the bottom of the screen with various "buttons".  These buttons are usually either an image widget with some JS function called on the click event, or a toggle button to turn things on and off.  The extra size of the toggle button means that is doesn't center vertically within the grid.

 

The screenshot shows what I mean.  I have a grid layout with a single row and a single column.  The row is set to 55px high and the column has Flex Direction set to Row and Alignment set to Center.  When I put an image and a toggle button in and that are both set to 40px x 40px, the image is vertically centered, but the toggle button isn't:

 

toggle_button_alignment_issue.png

 

When in the editor, you can see the extra blank space below the toggle button when you select on it.

 

I often have a row of buttons that are a mix of images and toggle buttons and this mis-alignment doesn't look great.  Any ideas on how to fix this?

Best answer by AllanThompson

Of course, 30 seconds after I posted this I realised a solution.

 

I defined a CSS style to vertically center items and then applied that style to the toggle button.

 

The CSS:

.v-middle {
    vertical-align: middle;
}

 

How it looks with the v-middle style applied to the toggle button:

 

toggle_button_alignment_issue_solved.png

 

Hope someone finds this useful.

 

1 reply

A
AllanThompson16-PearlAuthorAnswer
16-Pearl
October 10, 2018

Of course, 30 seconds after I posted this I realised a solution.

 

I defined a CSS style to vertically center items and then applied that style to the toggle button.

 

The CSS:

.v-middle {
    vertical-align: middle;
}

 

How it looks with the v-middle style applied to the toggle button:

 

toggle_button_alignment_issue_solved.png

 

Hope someone finds this useful.

 

    Terms & ConditionsCookie settingsAccessibility statement