Does anyone know if it is possible to remove the gray border around dashboard blocks?
I created a custom HTML block with a red wrapper background to highlight the gray border I am referring to. Is there a way to completely remove this gray border around the block?
The wrapper settings:.wrapper{
display:flex;
gap:20px;
width:100%;
height:100%;
background:red;
box-sizing:border-box;
}
The body is placed inside this wrapper.
I thought I might be able to mask it when using the dashboard as a page on my website, but that also didn’t work. I placed the dashboard page inside a page-container and gave the container an orange background to highlight the issue. However, the orange background does not completely fill the page-container as I expected. If it did, I could simply set the background color to the same gray as the border and effectively hide it.
If you are rendering this dashboard inside an experience page - which it sounds like you are - then you have some options. However, let me clarify that these are not officially supported - in that, while Losant makes a best effort to maintain the box model and class names used in the UI currently, we do not guarantee that.
Experience dashboards are rendered within the same scope as the rest of the HTML document, so you can write CSS rules to achieve what you are after.
For example, that gray border you are referring to is applied as an inline style background color to all <div> tags with a class of dashboard-block. So you could override that in your page’s stylesheet with a more specific CSS selector and rule, such as:
#los-root .dashboard-block { background: red !important; }
Let me know if you have any questions about that approach.
