+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: iFrame Scheduler customization (/showthread.php?tid=3934)
iFrame Scheduler customization - Mirco - 15.03.2022
Hi, I'm developing a visualizazion for a compact display and the scheduler view is too smal for my client.
Is there a way to customize the css of the scheduler into the iFrame?
I tryed to add a class into the iFrame the tryed to change something but without results.
It is possible?
Someone can help me?
Thanks
RE: iFrame Scheduler customization - admin - 15.03.2022
When placed in an iframe, view-frame CSS class is added to the <body> tag. This way you can create CSS rules that only apply to the iframe mode.
RE: iFrame Scheduler customization - Mirco - 15.03.2022
Thank you admin!
RE: iFrame Scheduler customization - Mirco - 17.03.2022
Is there a way to limit custom CSS to a specific iframe?
RE: iFrame Scheduler customization - admin - 17.03.2022
Can you explain the task in more detail? If you this for a particular device you can check the user agent string and add classes via JavaScript.
It's also possible to use CSS media queries to target only certain width/height values: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
As a work-around you can set iframe to a specific size (480 in this example) and use this CSS:
Code:
@media (min-width: 480px) and (max-width: 480px) {
.schedulers.view-frame {
background: red;
}
}RE: iFrame Scheduler customization - Mirco - 17.03.2022
I have 2 pages both with an iframe with the scheduler and into one of this 2 iframe I would change the color of the "disabled event".
I have done it using this CSS code:
Code:
.view-frame .content .tbl-events tbody tr.warning td {
background-color: #ff0000;
}the problem with this code is that it change the color of both iframes
is there a way to change the color of only one iframe?
Thanks
RE: iFrame Scheduler customization - admin - 17.03.2022
Use media queries. For example, this CSS rule will apply to iframe with width set to 480. If the second one has 481 then these styles won't apply to it.
Code:
@media (min-width: 480px) and (max-width: 480px) {
.view-frame .content .tbl-events tbody tr.warning td {
background-color: #ff0000;
}
}