Im using the bootstrap theme, and things seem to be working ok once I switched my app config over to using scss.
Here is my variables.scss file
However, looking at the override variables on this page, I added $primary to be a different color, but it still shows up blue (default)
https://www.telerik.com/kendo-angular-ui/components/styling/theme-bootstrap/customization/
$base-theme:Bootstrap;
$skin-name:kendo-dflood-bs4-1;
$accent: #007bff;
$secondary: #e4e7eb;
$info: #17a2b8;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;
$body-bg: #ffffff;
$body-color: #292b2c;
$component-bg: #ffffff;
$component-color: #292b2c;
$card-cap-bg: #f7f7f9;
$card-cap-color: #292b2c;
$series-a: #0275d8;
$series-b: #5bc0de;
$series-c: #5cb85c;
$series-d: #f0ad4e;
$series-e: #e67d4a;
$series-f: #d9534f;
$button-bg:#dc3545; //bg should be red
$primary:#28a745;
<div class="col-xs-12 col-sm-12 col-lg-12">
<p class="k-block">
<kendo-buttongroup>
<button kendoButton [primary]="true"> test1</button>
<button kendoButton [primary]="true"> test2</button>
<button kendoButton [primary]="true"> test3</button>
<button kendoButton [primary]="true"> test4</button>
<button kendoButton [primary]="true"> test5</button>
</kendo-buttongroup>
</p>
</div>
<div class="col-xs-12 col-sm-12 col-lg-12">
<p class="k-block">
<kendo-buttongroup>
<button kendoButton [primary]="true" [togglable]="true"> Rating </button>
<button kendoButton [primary]="true" [togglable]="true"> Invoices </button>
<button kendoButton [primary]="true" [togglable]="true"> Statements </button>
<button kendoButton [primary]="true" [togglable]="true"> Vouchers </button>
<button kendoButton [primary]="true" [togglable]="true"> ChargeBacks </button>
</kendo-buttongroup>
</p>
</div>
Looking at the "computed" styles in the dev console, the font-zie is 10 px. How can I get it larger? Isnt the bootstrap default 14 px?
Im currently using the bootstrap theme and now looking at using a custom theme based on the bootstrap theme.
Looking over this, im not sure on how to place the output
https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder/
When I download my theme, I have a zip file containing two files, all.css and variables.scss
For example, in the linked instructions above, do I use these paths and put the two files in the zip file into the scss/all folder?
// import configuration from the theme builder
@import 'variables.scss';
// import the base theme
@import '~@progress/kendo-theme-default/scss/all';
Or... since im using the bootstrap theme, I replace the files in @progress\kendo-theme-bootstrap\scss ???
Or, do I create a new folder under node_modules\@progress with the name of my new theme?
Really like the look of this custom bootstrap navbar, especially with the integrated search box, the rounded corners etc.
http://fullstackengine.net/how-to-make-a-overlay-navbar-using-bootstrap-4-and-angular-2/
What would be a good approach to assemble something like this using the kendo components?
Im guessing, but Im thinking of building my own component by assembling various kendo components...
Hi
Previously I had raised a ticket regarding the slowness in rendering the scheduler when large sets of json are coming with respect to large number number of resources data but from the provided solution the rendering has become more slower and decided not to use it.
Another same kind of issue I'm facing is when is removeEvent() is used. The delete prompt is taking very long time to load and on clicking the Delete button it takes 3-4 secs just to remove that event.
Can you suggest an improvement for this?
Hi,
When use datepicker on mobile device browser the calendar and keyboard show on device.
I see that in jquery version we can make datepicker readonly that prevent keyboard to show on mobile, but in angular version when i set readonly attribute the compoment is readonly and calendar pick is not show too.
Is there any way to fix this?
Thanks
Hello,
Is it possible to have only one row in kendo angular grid always in edit mode. What I'm trying to achieve is that, when I bind grid with data, that one particulate row is in edit mode, so the data can be changed and later retrieved for the update. Also it would be nice if it's possible to have only some of the columns in that row editable, like in the attached image.
Thanks in advance
hi,
while creating Div content as export to PDF , intermediate blank pdf creation is happening
want to know the issue and solution for that.
If my view templates use some standard html components (links, buttons etc), how can I get them to look like the kendo components if im using the bootstrap theme?
In angular.json, Im using
"styles": [
"node_modules/@progress/kendo-theme-bootstrap/dist/all.css"
],
So If I want to use bootstrap for html elements that are NOT kendo components, I suppose I would need to include the generic bootstrap module as well, so this?
"styles": [
//"src/styles.css"
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@progress/kendo-theme-bootstrap/dist/all.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]