I have some menu buttons down the side of my layout on one of my touchscreens. I recently resized the tiles and now I cannot click on the “ᐧᐧᐧ” to edit them. I move my mouse all around the location and it never turns into a pointer.
I can edit them by reducing the number of columns from 25 to 20, but this of course throws everything off and requires resetting everything when done.
If there are any other ideas before I go down this route - please do let me know. Thanks.
@simon, can you please take a screenshot of the dashboard while editing? I just did a quick test setting my dashboard to 25 columns, and I was still able to click on the ... even when the tiles look really small in the dashboard.
Sorry for the delay - out of town. I made a quick screen recording of the behavior. Link to the file is below. I also took a second video of another screen where I have a bigger version of the button. You can see that clicking only works in the top left of the “···”. No doubt I screwed something up in my commands below? Thanks.
I copied the code for these menu buttons from another poster, the code is below.
/** Menu Buttons **/
.tile.--theme-style-menuitem {box-shadow: 2px 2px 2px #8585e0 !important; background-color: #29293d !important; background-position: right bottom; background-repeat: no-repeat; }
.tile.--theme-style-menuitem .icon svg {width: 70%; height: 70%; position: relative; top: 30%; left: +20%; opacity: 1.0 !important; color: #FFFFFF !important;}
.tile.--theme-style-menuitem .title {font-size: 5em !important; color: #999999 !important; opacity: 1.0 !important; position: absolute; top: 10%; left: 0%; padding-left: 25px; padding-right: 25px; z-index: 1 !important; width: 100% !important; text-align: right !important;}
.tile.--theme-style-menuitemselect {padding-bottom: 10px; box-shadow:2px 2px 2px #ebebfa !important; background-color: #666699 !important; background-position: right bottom; background-repeat: no-repeat; }
.tile.--theme-style-menuitemselect .icon svg {width: 70%; height: 70%; position: relative; top: 30%; left: +20%; color: #FFFFFF !important;}
.tile.--theme-style-menuitemselect .title {font-size: 5em !important; color: #999999 !important; opacity: 1.0 !important; position: absolute; top: 10%; left: 0%; padding-left: 25px; padding-right: 25px; z-index: 1 !important; width: 100% !important; text-align: right !important;}
@simon, thanks for the video and the css snippet. They are definitely helpful in this troubleshoot. The reason why ... is not clickable was the tile content’s z-index was changed to 1 and overlap on top of the ... menu. Try add the following snippet to bring the ... menu to the top, so they can be clickable again.
.tile.--theme-style-menuitem .remove-overflow .overflow-menu {z-index:1000;}
.tile.--theme-style-menuitemselect .remove-overflow .overflow-menu {z-index:1000;}
Please note that any custom CSS snippets provided are not officially supported and may need to be adjusted with potential future changes to the SharpTools web app.
Works like a charm - learn something new everyday!
@James One minor issue with this. It brings the … to the very top of everything, including on top of the tile editor. Is there a way to have it sit below this level. Not a huge deal. Thanks.
If you don’t need the title content at a slightly higher level, you could remove the z-index customization that was added to the .title in your original custom style.
Otherwise you just need the .overflow-menu at the same z-index or higher than your other tile elements so it at least layers on top of those. So you could try setting it to a z-index of 1 (or 2) instead. At 1, it should be at the ‘same’ z-index as your title customization and since it’s added later in the DOM, it will layer on top of the title but still stay low enough that it shouldn’t layer over most other elements
