Buttons are all in uppercase

Form components
,
1

Hey Guys,

I’m new to mobiscroll and am learning as I go! Thanks for an awesome and beautiful product.

For some reason all of the buttons rendered by this code are in uppercase. I’ve ripped this apart and put it back together but can not get rid of the UPPERCASE text-transform issue.

Is there something obvious that I’ve missed?

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      <ion-icon alignment="left" name="aperture"></ion-icon>
      Take or Add a Picture
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <mbsc-page>
    <mbsc-form [options]="formSettings">
      <mbsc-form-group>
        <div class="mbsc-form-group-title">MyGiftPix Activities</div>
        <div class="mbsc-btn-group-block">
          <div class="mbsc-padding"></div>
          <div class="mbsc-padding">
            <mbsc-button outline data-icon="camera" (click)="takePhoto()">Take a New Picture</mbsc-button>
          </div>
          <div class="mbsc-padding">
            <mbsc-button outline data-icon="image2" (click)="addPhoto()">Add an Existing Picture</mbsc-button>
          </div>
          <div class="mbsc-padding">
            <mbsc-button outline data-icon="checkmark" (click)="reviewPhotos()">Review Pictures</mbsc-button>
          </div>
          <div class="mbsc-padding">
            <mbsc-button outline data-icon="stack" (click)="playSlideshow()">Slideshow</mbsc-button>
          </div>
        </div>
      </mbsc-form-group>
    </mbsc-form>
  </mbsc-page>
</ion-content>

In the corresponding ts file, I am doing this with the formSettings:

export class Tab1Page implements OnInit {

formSettings: MbscFormOptions = {
theme: ‘ios’
};
…

Thanks!
Scott

2

Hi Scott,

The problem probably is that the <mbsc-page> uses a different theme, than the <mbsc-form> wrapped inside. The form has the ios theme explicitly set, while the page has no settings specified, so it remains on auto.
You might want to set the theme globally inside your page’s module file, or specify the same theme for every component.

import { MbscModule, mobiscroll } from '@mobiscroll/angular';

// Global setttings
mobiscroll.settings = {
  theme: 'ios'
};

// ...

OR

<mbsc-page theme="ios">
  <mbsc-form theme="ios">
  </mbsc-form>
</mbsc-page>

Let me know if this explains!