Component Styling Free vs Pro


Topic: Component Styling Free vs Pro

eMD Technologies asked 5 years ago

Expected behavior PRO component styles to work as shown on documentation.

Actual behavior Free components work fine and PRO components seems to have issue with styling.

Resources (screenshots, code snippets etc.) Comparison between free and pro version of select component

<div class="col-md-2">
            <select class="browser-default custom-select">
              <option selected>Free Version</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
</div>
<div class="col-md-2">
            <mdb-select [options]="optionsSelect" placeholder="Paid for version"></mdb-select>
</div>

Am I missing something or not using the component correctly? Please advise...


Bartosz Termena staff answered 5 years ago

Dear @eMD Technologies

The problem should be resolved in the next version.

Until then, try to add to your styles.scss this :

.single {
  > div {
    &.placeholder {
      margin-right: 1.5em;
    }
  }
}

Beste Regards, Bartosz.


Thanks for the prompt response.

I have added the styles into my .scss files and this makes a difference, however on longer text vales, still has the same problem.

Dropdown after scss update - working

Dropdown with longer text value selected


Bartosz Termena staff answered 5 years ago

Dear @eMD Technologies

Let's change the method.

Try to add this to your main styles.scss (this is important):

.single {
  > div {
    &.placeholder {
      max-width: 85%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

Best Regards, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: Desktop
  • Browser: chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No