This is a migrated thread and some comments may be shown as answers.

Using Telerik ASP.NET AJAX Controls with css frameworks

5 Answers 182 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Yoly
Top achievements
Rank 2
Yoly asked on 19 Jan 2013, 10:36 PM
Hi.

I've been having some trouble getting the ASP.NET Ajax Controls to look as they should with certain CSS Stylesheets.  I've been mostly been "hacking" by trial/error the base CSS files for some sites and somewhat have gotten the controls to look similar to what they should although not achieving the exact look and feel they have with "standard" CSS stylesheets.  

I know this this because of the way CSS cascade their styles, but I would like to know if there is a way to either have the stylesheets for the controls "override" the site styles for the elements that the controls use, or if you could provide us with stylesheets for each skin to "reset" the telerik controls styles.

One example of this could be seen by using the Telerik ASP.NET Controls with  with the popular bootstrap css framework (http://twitter.github.com/bootstrap).  But other style sheets, buying a website template, for example, also results in the same behavior.

Is there a way around this?

Thanks.

5 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 21 Jan 2013, 10:19 AM
Hi,

I suppose you want to apply your CSS instead of the embedded one. try whether putting the keyword !important for the overridden settings changes the behavior. This approach is used to provide a higher priority to your custom settings so that they cannot get overridden by the default embedded settings.  Please take a look into this documentation for more information.

Hope this helps.

Regards,
Princy.
0
Yoly
Top achievements
Rank 2
answered on 21 Jan 2013, 03:33 PM
Princy thanks for your reply.

What I really want to know is how to get the controls to display properly with different stylesheets.
What I'm looking for is some kind of "base.css" for the AJAX controls that will have them display properly, since I really don't know what would I have to override from my website's CSS.  From what I could gather from the link you provided I would have to know what to change for each style.  I don't know what is causing the controls to display as they do, so I don't know what I should change in the stylesheet.

For a long time we've been using some kind of base.css for websites to standarize the basic stylesheet look for each browser, so our design is coming from the same base in all browsers and have it look the same.  I suppose Telerik has a similar approach for their controls?  What type of styles each control is assuming we have.  For example, if I have changed the <ul><li> for the whole site, the controls that render based on these elements, what style are they asuming we are starting with?

0
Galin
Telerik team
answered on 24 Jan 2013, 02:41 PM
Hi Yolanda,

The RadControls are compatible with the Bootstrap framework and other popular CSS frameworks as Blueprint. Also, using globally styles as color, background or other visual styles for all html elements will not break the functionality of RadControls. But I can strongly recommend you to avoid globally styling the position and dimension. Also, avoid using of !important as well.

I hope this helps.

Regards,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Allen
Top achievements
Rank 2
Iron
Veteran
answered on 04 Jun 2020, 11:48 AM
I realize this is an ancient post, but has a demonstration project with Telerik + Tailwind.css been created at any point?  Thank you.
0
Vessy
Telerik team
answered on 09 Jun 2020, 08:40 AM

Hi Allen,

We have not tested our controls with Tailwind and we do not have an integration project with Telerik and Tailwind. I examined the base styles coming from the Tailwind framework and they contain plenty of global CSS selectors (using tag elements), so it is possible for our controls also to be affected by these styles.

If you decide to try integrating them on you own, it will be really appreciated if you share your experience and the issues faced during this process (if any).

Kind regards,
Vessy
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Yoly
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Yoly
Top achievements
Rank 2
Galin
Telerik team
Allen
Top achievements
Rank 2
Iron
Veteran
Vessy
Telerik team
Share this question
or