I've been wrestling with this for hours (not a CSS expert). I am using the iframe driver to show a Google map and there are way too many google things cluttering the tile. I'm trying to get the correct syntax to either hide or move an element with custom CSS. I've used Chrome's F12 and got the CSS selector path but it doesn't work as is and I've tried all sorts of combinations, read through some tutorials but still no avail. The elements I want to hide or move out of the way are buried pretty deep. The CSS selector is #mapDiv > div > div > div:nth-child(5) > div I've prefixed with #tile-29 .tile-contents and all sorts of other combinations. Maybe it's not possible to do this on a dashboard. I've hit a block and any guidance would be appreciated. Thanks all, now it's time for bed.
Have you looked at whether you can control those elements within the maps page? i.e. when you are preparing the map you want to embed on Google's site, do you have any options for the layout and styling? I know for calendars you can turn different parts on and off and change the layout of the calendar, etc. These end up as parameters tacked on the end of the URL. Might be easier than trying the CSS route.
In terms of the CSS you could probably get away with tile id and tile contents at the beginning, but to get inside the iFrame, I'm not so sure how to do that.
This (admittedly old) StackOverflow post also indicates it may not be possible, even on more recent responses, at least not without some pretty hacky options... Looking at formatting options on Google may still be your best bet...
Hi all, thanks, I researched that first and found that only a limited set of switches were available; i.e. zoom level and layer. That's why I was trying to override the tile stuff like I did on others but was hitting a wall trying to get 'inside' the iframe.
Again, thanks for taking time to respond.
1 Like
Small victory, I was finally able to get a clean map display, albeit not perfectly but workable. Yes, CSS cannot manipulate element within an iFrame. But I read about oversizing the iframe then adjusting the margins to re-center. That actually worked, the only downside is that the title also got removed but I can live with that. You also have to play with the margins until it's centered in the display but once it's set, that's it. This was the CSS and here's what an original and edited ones look like. I'm sure other values work, too but I stopped when I got set.
#tile-29 .tile-contents{
padding: 0;
overflow: hidden;
height: 300%;
width: 300%;
margin-top: -75%;
margin-right: -50%;
margin-bottom: -50%;
margin-left: -100%;
}
1 Like
We can do things to add a title back in.... So that won't be lost... Assume you mean the tile on the left is the modified version? If I'm right, the margin settings are essentially zooming in on the tile which must be cutting out the surrounds, like the title.
That is correct; sort of like a window in a window without actually changing the zoom level.
How would add the title back in? I tried overriding the title margins but that didn't seem to help. I can only apply this override to the whole tile-contents and not just the iFrame part. Although I didn't try too long as I was just happy to get this far and needed to get to my honey-do list today 
.
1 Like
Best I can offer is to setup another Text tile you overlay with a higher z-index value, again via css.
Gotcha, I'll give that a try, thanks.
