Can you please let me know, the order in which styles sheet must be referenced for material theme with kendo ui core.
I have referenced styles in the below order, but the ui doesn’t render like in the kendo demo.
Kendo.common-material.min.css
Kendo.material.min.css
created a plnkr for debugging:
https://plnkr.co/edit/N9mpRyEyOBjsh22k?open=lib%2Fscript.js%2Fedit%2FN9mpRyEyOBjsh22k%3Fopen%3Dlib%2Fscript.js&preview
The configuration is correct, however, you are loading the LESS-based Material theme. I suspect you are referring to this TextBox demo that uses the SASS-based theme. Load the SASS-based theme to get the look of the demo:
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.material-main.min.css" />
Updated plnkr
Related
I want to know how to use Semantic-UI to codeigniter 3.x as frontend framework.
I want to use LESS and not css. thanks
First, it is important to understand that LESS is a CSS pre-compiler that extends the CSS language with features that allows creation of CSS that is more maintainable, themeable and extendable. But ultimately it creates CSS files that are used exactly the same as any other CSS file in a website.
In CodeIgniter you use Semantic-UI created assets the same way as any other CSS (or javascript) files by using a <link> tag.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
The CSS classes are used in "view" files exactly the same way any other CSS defined class. For instance, the following would put a button styled by Semantic-UI into a CodeIgniter "view" file.
<button class="ui button">Follow</button>
So, the short answer to your question is that you use Semantic-UI in CodeIgniter the same way any other frontend framework that produces CSS and Javascript.
How to use the tools required to customize Semantic-UI is way beyond the scope of what is a "good" question on Stackoverflow.
If you want to customize and build your own version of the UI, you have a steep learning curve ahead. You can start your learning on Semantic-UI's Getting Started page and on the Learn Semantic website.
I have done Semantic UI integration on my CodeIgniter based application starter: https://github.com/ivantcholakov/starter-public-edition-4
For compilation of your own visual themes you need to install locally on your development machine node.js, less.js, postcss/cssnano, they should be able to start from command line.
See the configuration file platform/common/config/less_compile.php there you can define by example your own visual theme. Also, have a look at the already created themes, you will see how to add your common Semantic UI customizations and your theme-specific styles.
add css link in your header and js in your footer
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
I have having difficulties getting Kendo UI Map (JavaScript) to work in my application.
I am seeing the containing div load (it has defined width and height). However I only see the map controls appear on in the div and I do not see the map display at all.
I suspect it has something to do with the stylesheets no loading correctly.
I am not getting any javascript errors.
I verified that my kendo.common.min.css and kendo.default.min.css gets loaded before jquery does.
One caveat is that we are bundling our files. However I am not bundling the kendo css files. I added a link references on my given page.
<link rel="stylesheet" href="../../../../Content/Css/Shared/kendocss/kendo.common.min.css" />
<link rel="stylesheet" href="../../../../Content/Css/Shared/kendocss/kendo.default.min.css" />
The other css files that the application use are bundled as well as jquery and all of the javascript files (kendo js files included).
I downloaded Kendo UI Core from Telerik website, and I want to make use of the Boostrap theme for my widgets, but however theres three bootstrap stylesheets to choose from: kendo.bootstrap.min.css, kendo.common-bootstrap.core.min.css and kendo.common-bootstrap.min.css. I'll be using datepicker, input masks and dropdowns. Which one should I use? Thanks.
I'm pretty sure that kendo.common-bootstrap.core.min only includes styling for the free widgets (Kendo UI Core) and kendo.common-bootstrap.min includes styling for all the free widgets and the paid widgets (Kendo UI Pro).
If you aren't using any of the "Pro" widgets, then you could use the .core. file.
You also need to add the kendo bootstrap theme.
Overall, you should have something like:
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="kendo.bootstrap.min.css" rel="stylesheet" />
Those 3 files are:
Actual bootstrap styling.
Kendo Bootstrap sizing and layout
Kendo Bootstrap theme
Is it possible to have Kendo UI widgets + DataViz widgets on the same page?
I wanted to have Grid(Popup Editing, Inline Editing etc.), Slider, AutoComplete, Rich Text Field and a Scatter Chart on the same page.
I have downloaded the latest trial package - kendoui.trial.2012.3.1114
I have added the files as below..
<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../../styles/kendo.default.min.css" rel="stylesheet">
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<script src="../../../js/kendo.dataviz.min.js"></script>
But on adding "kendo.dataviz.min.js", other widgets seems to misbehave.
How to overcome this and have both UI widgets and DataViz widgets on the same page..???
I have used both UI widgets and dataviz widgets on the same page and faced no issue.
On a side note,Instead of including "kendo.web.min.js" & "kendo.dataviz.min.js" files, you can include "kendo.all.min.js" file alone that includes code for both UI widgets and dataviz widgets.
You can use "jsfiddle.net" to show your example that will help others in suggesting the root cause.
I noticed that the theme code is missing from the KitchenSink in the final version of ST2. Are there any default themes that ship with the product? Also, are there any open source themes available? I'd like to have a few themes handy for demos so I can easily switch between them.
Yes there are, if you open up senchatouch2/resources/css you've got the default sencha-touch.css and then you have apple.css, android.css, bb6.css(blackberry).
<link rel="stylesheet" href="senchatouch2/resources/css/apple.css" type="text/css" />
I think following url will help someone
http://developerextensions.com/index.php/sencha-touch-2-themes-builder
---Add the following link to your sencha-touch-2 app's html file.
---DEShowThemeBuilder(true); //function to show the theme builder
---DEShowThemeBuilder(false); //function to hide the theme builder
<script type="text/javascript" src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/sencha2/ux/themeBuilder/themeBuilder.js"></script>