Once More unto the Breach - styles

5 posts, 1 answers
  1. Joe
    Joe avatar
    191 posts
    Member since:
    May 2012

    Posted 20 Mar Link to this post

    My dialog has no buttons... Well not really, they're there but they're white.  White button, white text... They don;t show up until I hover over one of them.  What styles or classes do I need to edit to get my dialog buttons to show up?

     

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1332 posts

    Posted 21 Mar Link to this post

    Hello Joe,

    Here's a CSS rule that changes the background and text color of the Dialog's buttons and shows the selector that can be used in order to customize the buttons:
    .k-dialog-buttongroup .k-button {
      background: lightblue;
      color: red;
    }


    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Joe
    Joe avatar
    191 posts
    Member since:
    May 2012

    Posted 21 Mar in reply to Ivan Danchev Link to this post

    Thank you.

     

    I spend most of my time digging around for which class/style to override for stuff... Are any of these documented somewhere?  I try by using the Chrome developer tools, but in trying to find this one I ended up using .k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button and .k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button:hover, whereas your response simplified it significantly. If each component's specific class styles were documented somewhere, it might save me all sorts of time.

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1332 posts

    Posted 23 Mar Link to this post

    Hi Joe,

    We have documented the common classes that are used across different widgets and the states classes, but a complete structure of the widget rendered elements and their classes, which can be quite complex for some of the widgets (Scheduler, Gantt, etc.), is not documented. The recommended approach is to inspect the element you want to apply custom styles to in the browser's dev tools and use the corresponding selector in custom CSS rules. 

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Joe
    Joe avatar
    191 posts
    Member since:
    May 2012

    Posted 23 Mar in reply to Ivan Danchev Link to this post

    Yeah, unfortunately that's what I have been doing but it's a tedious process that is a whole lot of trial & error.  I wish I could actually write code instead of being stuck in CSS hell... But thanx anyways...
Back to Top