CODEWITHSUNDEEP
cssbuttonresponsivevmware-claritybuttongroup
Solinas3000
Solinas3000

Reputation: 21

make clarity design buttongroup responsive

How to make clarity design button group responsive like clarity button ?

this is the actual behavior of clarity button group :

this is the actual behavior of clarity button group :

and here the behavior of the normal clarity button :

behavior of the normal clarity button

As you can see width of button are reduced and text-overflow is ellipsis.

How can i add the same properties to button group ?

my dependency :

"@angular/animations": "^9.0.5",
"@angular/common": "^9.0.5",
"@angular/compiler": "^9.0.5",
"@angular/core": "^9.0.5",
"@angular/forms": "^9.0.5",
"@angular/platform-browser": "^9.0.5",
"@angular/platform-browser-dynamic": "^9.0.5",
"@angular/router": "^9.0.5",
"@clr/angular": "^2.3.8",
"@clr/icons": "^2.3.8",
"@clr/ui": "^2.3.8",

Upvotes: 0

Views: 276

Answers (1)

Solinas3000
Solinas3000

Reputation: 21

Ok i found a solution

put this css rules to button group

.btn-group {
  display: flex;
}

and to your label

label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

this should be the normal behavior, but anyway this work

Upvotes: 0

Related Questions