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

buttongroup renders text as 10px instead of 14

2 Answers 68 Views

General Discussions

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

BitShift asked on 06 Jul 2018, 02:07 PM

clipboard01.png

    <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?

2 Answers, 1 is accepted

answered on 06 Jul 2018, 04:53 PM

Pretty sure the problem boiled down to using bootstrap 3.3.7 while the kendo components are based on 4.x ?

Doing that - and switching over to using scss instead of css seems to have resolved this issue.

My angular.json settings are

            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/@progress/kendo-theme-bootstrap/dist/all.css",
              "./node_modules/font-awesome/css/font-awesome.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Also, switched over to using scss

"defaultProject": "ClientApp",
"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }

Accepted