Button Background color overridden by background-image: linear-gradient. (Chrome/FF)

4 posts, 0 answers
  1. Zach
    Zach avatar
    4 posts
    Member since:
    Nov 2012

    Posted 03 Oct 2013 Link to this post

    The background-color of k-button classed elements cannot be set in recent versions of Chrome or Firefox due to the application of the background-color:linear-gradient style. This issue can be observed on the theme builder site:

    http://demos.kendoui.com/themebuilder/web.html

    Using Chrome or Firefox:

    1.) Select the Uniform Theme.
    2.) Click Start the Kendo UI Themebuilder.
    3.) In the themebuilder pop-up, choose Buttons and select a new Background color.

    Result: The Background color is not applied.

    Disabling all background-image styles still enables the selected color to display.
  2. Dimo
    Admin
    Dimo avatar
    8445 posts

    Posted 04 Oct 2013 Link to this post

    Hello Zach,

    Linear gradient styles behave as background image styles - a background color is displayed only where there is no background image, but normally, linear gradients span over the whole element, that's why the background color is not seen anywhere.

    Removing the linear gradient is the way to go in such cases. If you want to use a flexible gradient background, you can use a combination of a background color and semi-transparent gray image highlight.png, which is part of the ready-to-use Kendo UI themes (textures folder).

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Zach
    Zach avatar
    4 posts
    Member since:
    Nov 2012

    Posted 04 Oct 2013 Link to this post

    Thanks Dimo. This makes sense. It would be nice to see an update for the theme builder which takes this issue into account and overrides the background-image. As is, the theme builder is offering a customization for the Button background color which does not work as expected.
  4. Dimo
    Admin
    Dimo avatar
    8445 posts

    Posted 04 Oct 2013 Link to this post

    Hello Zach, 

    I agree. In general, the solution to this problem is not that straightforward, as it looks, but we will look into it.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top