Different popover arrow colors

4 posts, 1 answers
  1. László
    László avatar
    12 posts
    Member since:
    Jul 2008

    Posted 19 Jun 2014 Link to this post

    Hi,

    Is there a way to have different arrow colors for popover on the same page? I have the folowing code, which opens a red and a green popover:

    http://jsbin.com/xopanitu/1/edit

    As you see the red one (#popover1) is ok, but the green one (#popover2) is not, because it has a red arrow.

    I can set the color of the arrow with the .km-popup-arrow:after css selector, but it is applied for all the popover arrows. How can I set to only apply it for #popover1 or only to #popover2? As I see the the structure of the popover is something like this:

    <div data-role="popup">
               <div class="km-popup-arrow"></div>
               <div data-role="popover" id="popover1"></div>
    </div>

    The problem is that I can't get .km-popover-arrow div from #popover1 div with css selectors (there is no parent selector, and sibling selectors are also not working because the arrow preceeds the popover). 

    As I see the only solution is to add an ID or class to the div with data-role="popup", but how? From the docs (http://docs.telerik.com/kendo-ui/api/mobile/popover#configuration-popup) there are only height, width, direction parameters for popop. Is there a way to add class or generate id for the popup div?

    Thank you!
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 20 Jun 2014 Link to this post

    Hello Laszlo,

    Maybe the cleanest approach would be to apply a custom CSS class for each of the two popovers, that will handle the pseudo selectors and apply the styling. Please check the following example, and let me know if it helps:

    http://jsbin.com/xopanitu/2/edit

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. László
    László avatar
    12 posts
    Member since:
    Jul 2008

    Posted 20 Jun 2014 Link to this post

    Hi Kiril,

    The solution is working fine, thank you!
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 20 Jun 2014 Link to this post

    Hello Laszlo,

    I am happy to hear that you liked the solution.

    In case you have any further questions please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready