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 that you accept these cookies being set.
Logic Machine Forum › LogicMachine eco-system › Visualization v
iFrame Scheduler customization

Threaded Mode
iFrame Scheduler customization
Mirco Offline
Member
Posts: 148
Threads: 38
Joined: Sep 2016
Reputation: 1
#1
15.03.2022, 09:35
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
Find
Reply
admin Offline
Administrator
Posts: 7758
Threads: 42
Joined: Jun 2015
Reputation: 447
#2
15.03.2022, 09:53
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.
Find
Reply
Mirco Offline
Member
Posts: 148
Threads: 38
Joined: Sep 2016
Reputation: 1
#3
15.03.2022, 15:49
Thank you admin!
Find
Reply
Mirco Offline
Member
Posts: 148
Threads: 38
Joined: Sep 2016
Reputation: 1
#4
17.03.2022, 08:55
Is there a way to limit custom CSS to a specific iframe?
Find
Reply
admin Offline
Administrator
Posts: 7758
Threads: 42
Joined: Jun 2015
Reputation: 447
#5
17.03.2022, 10:06
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...ia_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;
  }
}
Find
Reply
Mirco Offline
Member
Posts: 148
Threads: 38
Joined: Sep 2016
Reputation: 1
#6
17.03.2022, 13:09
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
Find
Reply
admin Offline
Administrator
Posts: 7758
Threads: 42
Joined: Jun 2015
Reputation: 447
#7
17.03.2022, 14:54
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;
  }
}
Find
Reply


Forum Jump: