# Dashboard icons are misaligned

**URL:** <https://discourse.openondemand.org/t/dashboard-icons-are-misaligned/3282>\
**Category:** Get Help\
**Created:** [February 22, 2024, 2:20am UTC](https://discourse.openondemand.org/t/dashboard-icons-are-misaligned/3282 "2024-02-22T02:20:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mnakao](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/mnakao/32/1001_2.png) [@mnakao](https://discourse.openondemand.org/u/mnakao)\
**Post date:** [February 22, 2024, 2:20am UTC](https://discourse.openondemand.org/t/dashboard-icons-are-misaligned/3282/1 "2024-02-22T02:20:49Z")

</div>

Dear all,

In OOD 3.1.1, application icons displayed on the dashboard are not centered.

 ![a](https://us1.discourse-cdn.com/flex015/uploads/osc/original/2X/d/d12067e46cd4aa62ee9bad251e7e5282efe3f3b2.png)

Only the Desktop icon (icon: fa://desktop) is aligned to the center, but the other icons (png files) are aligned to the left. Note that the height and width of png files are the same.

 ![b](https://us1.discourse-cdn.com/flex015/uploads/osc/original/2X/0/0940df4d25c9c08d0f5993e0a775133d1c8d3feb.png)

When checking in developer mode of my web browser, it seems that the cause is that the margin is set with `.app-icon:not(.fa-fw)`.

I think centering it looks better, but how can I fix it?

Best,

---

<div class="post-metadata">

**Author:** ![travert](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/travert/32/3074_2.png) [@travert](https://discourse.openondemand.org/u/travert)\
**Post date:** [February 22, 2024, 6:40pm UTC](https://discourse.openondemand.org/t/dashboard-icons-are-misaligned/3282/2 "2024-02-22T18:40:36Z")

</div>

Thanks for pointing this out.

Looking at this more it looks to center correctly when the screen is below a threshold but switches to a left alignment like you are saying when beyond that threshold.

The bug looks to be related to the use of `text-center` which _should_ have centered those images but obviously is not working passed the first box.

Using an `mx-auto` on the `img` tag does fix this. The `view` which is handling this is here I believe:

> <https://github.com/OSC/ondemand/blob/master/apps/dashboard/app/views/widgets/pinned_apps/_app_content.html.erb>

I’ve opened an issue for this here:

> <https://github.com/OSC/ondemand/issues/3368>
>
> A discourse came in pointing out that the images in the pinned apps are not quit…e displaying correctly.
> 
> https://discourse.openondemand.org/t/dashboard-icons-are-misaligned/3282
> 
> Only the first image seems to align center as it should, while the remaining images all align left. 
> 
> This can be fixed by just adding an \`mx-auto\` to the \`img\` tag.

---

<div class="post-metadata">

**Author:** ![travert](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/travert/32/3074_2.png) [@travert](https://discourse.openondemand.org/u/travert)\
**Post date:** [February 22, 2024, 7:28pm UTC](https://discourse.openondemand.org/t/dashboard-icons-are-misaligned/3282/3 "2024-02-22T19:28:50Z")

</div>

I’ve currently put in a simple fix for this here:

> <https://github.com/OSC/ondemand/pull/3369>
>
> Fixes #3368

This looks to keep those images centered regardless of the screen size and number of apps present.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/osc/original/2X/b/bae70bd0ed39a3ae769c2108155f4cb3e9da8385.png) [@system](https://discourse.openondemand.org/u/system)\
**Post date:** [August 20, 2024, 7:29pm UTC](https://discourse.openondemand.org/t/dashboard-icons-are-misaligned/3282/4 "2024-08-20T19:29:35Z")

</div>

Closed on August 20, 2024, 7:29pm UTC

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.