TaxonomyPicker: Style issue in term check box if term label too short

[jonepo]

Category

[ ] Enhancement

[ X ] Bug

[ ] Question

Version

Please specify what version of the library you are using: 1.12.0

Expected / Desired Behavior / Question

Terms should be aligned correctly in the term picker panel.

Observed Behavior

The checkbox moves to the right if the term label gets too short. See the attached screenshot.

I investigated the reason and it looks like corev15.css from SharePoint sets min-width for buttons to 6em. When I overrode that in developer toolbar and set the min-width to auto, inherit or initial, it corrected itself.

Steps to Reproduce

Have term in the selected term set with very short label.

Thanks!

[vipulkelkar]

Hi @jonepo , are you still seeing this issue ? Just tested on Chrome and Edge, seems to be working fine

[jonepo]

Hi @vipulkelkar, unfortunately I haven't been in the particular customer project in a while so I can't confirm it just now. But if you could reproduce it in 1.12 version and now in the latest version it doesn't happen anymore, I trust that it's ok. But if I have any spare time, I'll try to quickly test this so you could close it as confirmed.

[michaelmaillot]

Hi @jonepo,

I confirm @vipulkelkar's screen, it displays correctly in latest version.

Is it ok for you?

[jonepo]

Hi! Based on the screenshot, it looks good. And as you have also confirmed it, I trust it to be ok. You can close the issue. From: Michaël Maillot ***@***.***> Sent: tiistai 1. elokuuta 2023 1.48 To: pnp/sp-dev-fx-controls-react ***@***.***> Cc: Jouni Pohjolainen ***@***.***>; Mention ***@***.***> Subject: Re: [pnp/sp-dev-fx-controls-react] TaxonomyPicker: Style issue in term check box if term label too short (#272) Hi @jonepo<https://github.com/jonepo>, I confirm @vipulkelkar<https://github.com/vipulkelkar>'s screen, it displays correctly in latest version: [image]<https://user-images.githubusercontent.com/44271458/257363389-1ff5cc03-716a-43bd-b2e3-b65ba4dabba5.png> Is it ok for you? — Reply to this email directly, view it on GitHub<#272 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALY42QFVFN7J62SMLJHF3VTXTAY3NANCNFSM4HEIWDZA>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[joelfmrodrigues]

Thanks @jonepo and @michaelmaillot !