Button alignment

KevinKhosa — Tue, 15 Feb 2022 13:08:41 GMT

Greetings all

I've created a list of buttons with dropdowns using custom html in a text card, but alignment seems to be a problem when viewing on different screen sizes. Also, I'd prefer that they be centered. Am I missing something in the code that'd eliminate the problem? I'm using Hub Basic.

Re: Button alignment

KlaraSchmitt — Tue, 01 Mar 2022 16:17:03 GMT

Hi @KevinKhosa,

You don't have much CSS specified and it looks like you may be using Bootstrap classes. This is Hub's underlying framework, but you'd probably need to put these buttons into a .navbar to have different sized devices handled automatically.

You might find one of these two samples helpful as a starting point for center-aligning navbar links:
https://www.codeply.com/go/1lrdvNH9GI/bootstrap-3-center-navbar-brand-and-links
https://codepen.io/davidcochran/pen/LYPrPr

I'd definitely start by wrapping all your buttons in a uniquely-named container. This will help you if you need to write any custom media-queries around placement and sizing. I can give you a Bootstrap class that will help you center your row of dropdown buttons, but it won't automatically handle how this looks on different devices. You may need to research media-queries for that if you don't use the .navbar classes. But to just center the buttons, you can put .text-center on the container wrapping around the buttons.

<div class="my-row-of-buttons text-center">
[all button code goes here]
</div>

Re: Button alignment

KevinKhosa — Mon, 07 Mar 2022 07:20:48 GMT

Thanks, Klara

topic Button alignment in ArcGIS Hub Questions

Button alignment

Re: Button alignment

Re: Button alignment