This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

Hide menu bar in Mosaic
#1
Hi

I am making some visualisations on some Divus screens. For this purpose I only want each screen to be able to see one single page and not be able to navigate to any other page.

I see that there is some CSS in the "Styles" in the config. Is it possible to hide it completely here?
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#2
In new Mosaic with user access you will have option to restrict access.
Try this
Code:
body.app-container .panels.panels_left {
visibility: hidden;
}
body.app-container .header {
visibility: hidden;
}
Reply
#3
(16.11.2020, 14:29)Daniel. Wrote: In new Mosaic with user access you will have option to restrict access.
Try this
Code:
body.app-container .panels.panels_left {
visibility: hidden;
}
body.app-container .header {
visibility: hidden;
}

I am using the Schneider Touch, not really Mosaic as I stated earlier. Sorry about the unclear information.

This CSS worked like a charm, so I will go for this solution.
Thanks for help!
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#4
I am doing some more adjustments to this touch-visu.

I want to hide also the back-button in the top left corner so that the users are not able to navigate at all. I need this because there are several different rooms with visu on each SL, and since there is no user control, I need to restrict the access in a different way.

I have tried this, but with no luck:


Code:
body.app-container .header.header__constrain.header_settings2 {
visibility: hidden !important;
}

The back button is still there. 

I am not sure exactly how to drill in to the different levels of the different <div>, so maybe I am doing it wrong....
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#5
Try this:
Code:
.header__settings2 { display: none !important; }
Reply
#6
(04.03.2021, 17:34)admin Wrote: Try this:
Code:
.header__settings2 { display: none !important; }

Yup, that worked.

But in this code you are skipping the whole drill down thing. I cannot really understand why sometimes one needs to drill down, and other times that is not working.
In the first CSS code in this thread i get the code to hide the left panel:
Code:
body.app-container .panels.panels_left {
visibility: hidden;
}

When I inspect the touch visu, the body.app... -> panels -> panels.left is the actual levels for the <div>'s I can see in the inspect window, hance the reason why I tried the code
Code:
body.app-container .header.header__constrain.header__settings2
to reference the button I needed to hide. (I realize that I had a misspel in my first post, (missing one _) but correcting it did not help)

It did not work, but when I tried your version, without the reference to the other levels, it worked. 

Why?
How do one know when to use the different levels in the referenceand when not to?
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#7
If using !important usually you don't need to write the whole path. Otherwise the priority depends on which types (element, id, class) are in the selector.
Reply
#8
(05.03.2021, 08:57)admin Wrote: If using !important usually you don't need to write the whole path. Otherwise the priority depends on which types (element, id, class) are in the selector.

OK, so that means, use !important, and then add path if it does not work?
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#9
important should work with a single selector in most cases. You can use inspect element in your browser to see which rules are overridden with others with higher priority.
Reply


Forum Jump: