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.

iFrame Scheduler customization
#1
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
Reply
#2
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.
Reply
#3
Thank you admin!
Reply
#4
Is there a way to limit custom CSS to a specific iframe?
Reply
#5
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;
  }
}
Reply
#6
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
Reply
#7
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;
  }
}
Reply


Forum Jump: