-
Notifications
You must be signed in to change notification settings - Fork 20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bim-icon svg image wrong position #56
Labels
bug
Something isn't working
Comments
GoulielmosFloros
added a commit
to GoulielmosFloros/engine_ui-components
that referenced
this issue
Mar 2, 2025
…atOpen#56. For this one ThatOpen#56 I fixed the initial bug for the svg image by adding display: flex; in the style of packages\core\src\components\Icon.ts. I also fixed a related issue with regards to the bim-label size and line height with ref ThatOpen#55, by changing line-height from 1 rem to 1em, from packages\core\src\components\Label.ts style. We could also remove the property entirely and it would work. To test it you can go to the Label html file change the font-size and the text and see that the icon will always be on the same place and the line-height now adjusts to the size. Reviewed-by: Goulielmos Floros Ref: ThatOpen#56
8 tasks
GoulielmosFloros
added a commit
to GoulielmosFloros/engine_ui-components
that referenced
this issue
Mar 18, 2025
…atOpen#56. For this one ThatOpen#56 I fixed the initial bug for the svg image by adding display: flex; in the style of packages\core\src\components\Icon.ts. I also fixed a related issue with regards to the bim-label size and line height with ref ThatOpen#55, by changing line-height from 1 rem to 1em, from packages\core\src\components\Label.ts style. We could also remove the property entirely and it would work. To test it you can go to the Label html file change the font-size and the text and see that the icon will always be on the same place and the line-height now adjusts to the size. Reviewed-by: Goulielmos Floros Ref: ThatOpen#56
8 tasks
HoyosJuan
pushed a commit
that referenced
this issue
Apr 1, 2025
… (#67) * fix: bim-icon scg image position & bim-label font-size/line height #56. For this one #56 I fixed the initial bug for the svg image by adding display: flex; in the style of packages\core\src\components\Icon.ts. I also fixed a related issue with regards to the bim-label size and line height with ref #55, by changing line-height from 1 rem to 1em, from packages\core\src\components\Label.ts style. We could also remove the property entirely and it would work. To test it you can go to the Label html file change the font-size and the text and see that the icon will always be on the same place and the line-height now adjusts to the size. Reviewed-by: Goulielmos Floros Ref: #56 * fix: updates on examples * update examples
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug 📝
Related to the previous issue (issue #55 ), if the bim-label has an icon and the font size is bigger, the svg image will be placed on the bottom part of the label and not inside its related container (which is correctly positioned on the center of the label).
In this case the problem could be in the display:inline-block from the :host element of the children of , in fact, removing this the svg will be placed in the correct position.
Before:

After:

Reproduction▶️
No response
Steps to reproduce 🔢
Create a bim-label element, add an icon and set the font size of the label bigger
System Info 💻
Used Package Manager 📦
npm
Error Trace/Logs 📃
No response
Validations ✅
The text was updated successfully, but these errors were encountered: