search

josdejong / svelte-jsoneditor

A web-based tool to view, edit, format, repair, query, transform, and validate JSON
https://jsoneditoronline.org
Other
820 stars 108 forks source link

Slight differences in font sizes in vanilla-jsoneditor depending on selected viewing mode #233

Closed CocoonedOwl closed 1 year ago

CocoonedOwl commented 1 year ago

Hello! Thanks so much for this library! I've been trying to use vanilla-jsoneditor in angular, and it has been great, however I have been having a small issue with the UI.

Without changing anything in the .css file and just following the instructions for making a near base editor, the font size in the buttons to change mode differs slightly depending on what is selected.

It is a bit hard to see below, but clear when you swap back and forth and the separator next to them changes positions. the text mode has a larger font, while tree and table have the same font size which is smaller than text mode's.

unnamed unnamed unnamed

Am I just missing something and doing something wrong? Is there a way I can fix this? Thanks!

josdejong commented 1 year ago

Thanks for reporting.

How can I reproduce your issue? Can you create a minimal demo, maybe based on examples/browser/basic_usage.html? I guess some of the CSS styles are overwritten by your application or so.

CocoonedOwl commented 1 year ago

Thanks for responding josdejong!

I had another look, and through trial and error relized that an import I made in the style.css file somehow made the font size be overwritten. For some reason font-size for something relating to buttons, which I can't see how it was exaclty related to the mode options outside of being buttons, was set to inherit and not an exact size. When I changed it to a set size the problem was fixed. I have no idea exactly what it was inheriting to change sizes, but it's working now.

Thanks again for helping!

josdejong commented 1 year ago

👍

I've had cases in the past where for example adding Bootstrap would also mess up styling of the editor. If there are ways to make svelte-jsoneditor more robust against cases like that please let me know.