search

ovsleep / bootstrap-switch

This is a Angular 2 Component to add a switch like input.
https://bootstrap-switch.herokuapp.com/
8 stars 10 forks source link

the text is not fully displayed #14

Closed FARHANE closed 6 years ago

FARHANE commented 6 years ago

Hello, Please how can I change the style of the component to diplay all the text. 001

ovsleep commented 6 years ago

Hi @FARHANE , The component is supposed to calculate the width to be able to show the full text. Can I ask you for more info about this? like browser, versions and options used. Also, what did you used for the ON/OFF labels? can you try with that text here: https://bootstrap-switch.herokuapp.com/ and see if you have the same issue?

Thanks!

FARHANE commented 6 years ago

Hi @ovsleep thank you for your response, there is my code:

[status]="switch.status"
    [onText]="switch.onText"
    [offText]="switch.offText"
    [onColor]="switch.onColor"
    [offColor]="switch.offColor"
    [size]="switch.size"
    (statusChange)="soCodeView.technicalView = !$event"></switch>
switch = {
    status : true,
    onText: 'Métier',
    offText: 'Technique',
    onColor: 'blue',
    offColor: 'yellow',
    size : 'large'
  }

The component work perfectly with the text ON/OFF. Thank you.

ovsleep commented 6 years ago

OK, seems like the issue is that the component isn't calculating the width of the inactive option. I'll try to fix this during the day

FARHANE commented 6 years ago

Ok thank you very much.

ovsleep commented 6 years ago

Can you try with the latest update (0.2.2)?

Thanks!

FARHANE commented 6 years ago

Still have the same problem. My configuration is : 

@angular/cli: 1.2.1
node: 6.11.1
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.3.4
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/platform-server: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.2.1
@angular/compiler-cli: 4.1.3
ovsleep commented 6 years ago

Please try with latest version 0.2.3. I think I got it right this time. Now the calculate size is bounded to the ngAfterViewChecked event. I was calculating the size on the ngOnChanges event, which didn't update the html, so the size wasn't calculated right.

FARHANE commented 6 years ago

Thank you so much, it's work now. we can see one or two pixelx of the inactive option but it's ok.