I have developed a site using ASP.NET Telerik controls and components. Its not working (positioning, screen resolution) fine on mobiles devices (scaling across resolutions).
I decided to integrate bootstrap in my site but bootstrap-responsive styles are not adjusting what I need.
Has anyone tried bootstrap with asp.net Telerik components? are both compatible?
Any suggestion/proper guide ?
There are incompatibilities between some frameworks like Bootstrap and Telerik. The main problem is different frameworks make use of CSS style names and if two different frameworks use the same name, there will be conflicts. I noticed this with the latest version of Bootstrap (3.0) and the latest version of Telerik, in some Telerik controls the checkbox formatting was over-ridden by Bootstrap. Unfortunately it's very tricky to fix, you need to customize it to a point that it would be easier not to use the framework at all.
Link Says
It depends on what you're trying to accomplish. In general, bootstrap
2.0 is a lot easier to work with along with Telerik because they style less of the default elements, like . In 2.0, they require you
to add some class to a element, which means that they don't
try to style a Telerik grid, for example. This makes it look better.
What you won't get is a "Bootstrap themed" version of the Telerik
controls. Continuing with the Telerik grid example, if you use that
in conjunction with Bootstrap it will look like a Telerik grid, not a
Bootstrap table, with it's nice pager buttons, etc. That will take a
lot of work to change, and I don't recommend it. Telerik emits html
with its own CSS class names and mapping that back to Bootstrap would
be a chore. I've found, actually, that with Bootstrap I use a lot
less of Telerik than I did before, and just use more straight html +
Bootstrap.
If you do decide to integrate Telerik in your site, I recommend the
Telerik "Simple" theme, which seems to match Bootstrap's default
colors best.
RadImageEditor icons are hidden when I use bootstrap.
So I must say that it is not 100% compatible.
If you need bootstrap to make your page responsive, you can use RadPageLayout: http://www.telerik.com/products/aspnet-ajax/responsive-page-layout.aspx. Thus, you can drop Bootstrap. Here is its documentation: http://www.telerik.bg/help/aspnet-ajax/page-layout-overview.html. In case you are using some styling it provides, perhaps RadFormDecorator can help you style the forms you have: http://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx.
If you let me do a suggestion, you can check for MDBootstrap (it´s a front-end framework built on top of Bootstrap). There you will find an article with free ASP.NET templates.
Yes, I recently build ASP.NET 2013 Web Application using Bootstrap and Telerik ASP.NET Ajax version Q2 2015 and .NET Framework 4.5.1 .
During my implementation of this project, I had one issue:
• One issue is that when I use the RadAjaxManager, I got this error:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
• To fix this, I wrapped the code section with the control.
Related
I started to look into DotNetNuke recently as a client asked me to do so.
I noticed straight away that DNN is different from other CMS I'm familiar with in a way that it mixes its own controls with site's presentation. (Other cms like Umbraco, Wordpress, Orchard have separate interfaces for content management).
I'm building a responsive website and using Zurb foundation for it. The problem I have is that DNN's css start to mess Zurb's css. I don't want to edit neither css and the problem seems very serious. Is it addressed somehow in DNN?
Bearing in mind how popular mobile browsing has become responsive desings and hence frameworks like Zurb or Twitter bootstrap will gain more and more popularity. And it looks like DNN doesn't play nicely with them, it may become a huge no no for DNN.
The whole idea of mixing site's presentation with cms controls looks wrong to me. Is it possible to prevent them from mixing and messing with each other?
Cheers.
There is a Portal.css file that always gets loaded no matter what DNN skin you use. Then each DNN skin loads a skin.css file associated with the skin/theme and any other specific CSS files it needs to reference.
The issue you are probably having is that the default styles set in Portal.css are conflicting with your theme. What you may need to do is override the CSS that is causing trouble at the top of your skin file.
But yes, this does happen since DNN declares styles for modal popups, dropdowns, links etc that are used in the admin functionality and since that is inline with the actual site design they can conflict if you are using a framework like bootstrap, etc.
We created a Foundation DNN Skin specifically to solve what you're looking for - https://github.com/Ethanhackett/foundation-5-dnn-skin
It avoids the CSS conflicts and has some jQuery no conflict resolutions which need to be addressed since DNN is on jQuery v1... and Foundation is using jQuery 2...
I hope that helps.
I'm developing a ASP .NET web project that uses: jQuery, jQuery UI, reset/normalize css stylesheets. Most of the CSS is crap, so I'm going to rewrite it + I will have a budget to it :)
I came across two fancy solutions that I would like to learn:
SASS
Bootstrap
I wonder, how to "mix" my existing application with these solution. When it comes to SASS, it seems to me pretty obvious - just rewrite CSS and be proud of new clean meta CSS, however I'm not sure about Bootstrap. What are the advantages of it if I don't want to change the layout of my site?
Another thing: can I run into possible issues when including Bootstrap / SASS into my site?
Twitter Bootstrap (TBS) is a CSS framework and its original purpose was for website and web app prototypes. So if you want to start from scratch with very thorough and well styled CSS, then bootstrap is great.
Twitter Bootstrap is NOT necessarily the right solution if you want to keep the majority of your existing UI, especially if your existing UI doesn't match up well with their scaffolding, grid system, and other elements of their UI styles (forms inputs, buttons, typography etc). You'll find yourself having to override a lot the framework's properties, which kind of defeats the purpose.
As #Nathron mentioned, if you try to mix TBS with your existing code, you could run into conflicts. Creating a customized build of TBS that includes only the elements of their framework that you want would be the best approach there: http://twitter.github.com/bootstrap/customize.html.
Regarding SASS, if you want to use it in combination with TBS, check out https://github.com/jlong/sass-twitter-bootstrap.
From their site: The Boostrap JS is for "interactive components for things like tooltips, popovers, modals, and more". So if you are using any of those, make sure you don't have conflicting JS functions.
You could run into issues with the CSS if your class names are the same as the ones that Bootstrap uses. Many of them are a little obscure like "darkwell", but some of them are common like "dropdown", so you just have to keep an eye out for that.
Easiest way to see is to download it and play around with it :)
I am relatively new to website design and specifically working in ASP.NET, i am using CSS to style my site, but when i use ASP.NET Controls like GridView, Navigation controls, etc ...
they are messed up by the style sheets, and you can't see that until you run the website, because the controls are translated to HTML and so affected by CSS in a way that you can't predict, how to solve this, and is there a better way to layout and desgin sites in ASP.NET.
You can use ControlAdapters or better use ASP.NET MVC
A great method that's worked well for me is to create Skins for your ASP.NET controls.
http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx
http://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-skins-with-css-for-a-flexible-and-maintainable-aspnet-web-site
After getting my skins and CSS classes created for the different pieces of my ASP.NET controls I'll then run my app in a browser with good developer tools, Google Chrome has a stellar set of dev tools that allow you to modify your css classes and styles right in the page so you can see the results immediately. I'll then update my Skin CSS classes to match the styles I created using the browser dev tool.
I would ask if anyone has had experience in integrating a grid based CSS system (960 or similar) with a GWT uibinder application.
Our application is done with GWT 2.1, UIBinder and the latest GWT CSS capabilities, which have been really great to work with and enabled us to have a modular and flexible styling system. Our design team has returned a HTML layout with the corresponding grid css files and we are supposed to integrate them with our GWT code.
If we were to integrate the grid styles into our uibinder xml files we would have to wrap all our GWT widgets with divs with the right grid class names.
Personally I don't like the idea of mixing a completely separate grid css concern with the modular uibinder system, but I do understand the benefits the grid system can provide.
Any opinions or experiences? Pros and Cons for either approach?
We found ourselves in a similar position, having the app built around gwt, MVP and uibinder. This is great for developers, but it turned out to not be so great for designers. At the begining we gave them a html snapshot of our app + css and asked them to design it. They did't like this. It became a nightmare when customers wanted custom designs done by their designers.
The question is will simply wrapping you widgets in div be enough? Our designer provided custom buttons, tables, links, etc.. It was quite a task to force gwt widgets to look like the design.
So what we did was:
Replaced gwt-centric app design with html-centric one. This means we avoid generating html in code. We use classic html+JS+jQuery apporach, just instead of JS we have gwt and instead jQuery we use gwtQuery. We use only a few gwt widgets. Instead, in out Views we use gwtQuery to copy&expand example html that designer provided. GwtQuery can be externalized: all selectors can be put in one (or many) external interfaces, if a design changes (customers want changes or even bring in their designs) this intersection of html and gwt is all in one place.
Ditched gwt 2.2 mvp (activities, places), for our own which is a simplified version of gwt 2.1 mvp architecture. We no longer have to add 2 new classes and update others (place, tokenizer, update place factory) to have a new place.
What do you think about Dojo dijit framework?
Is Dojo ditit better than some CSS framework?
I have had problems with dijits when I generated some dijits with layouts in my comet app.
It really depends on what you want to do. Most CSS frameworks don't come with a full widget library. They're usually more for setting consistent styles on text etc.
I'm not sure you can really compare the two