lidorbt
Posts: 27
Joined: Tue Sep 08, 2020 4:32 am

Edit button text top and left attribute

I'm trying to edit a rendered button content's css - i.e. top and left sizes (8px by default).
As I noticed, there's a span between the button's div and its content. Is there a way to fully edit the span's css?

Here's a demo you can use: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx
As you can see, the text has 8px for left and top. I'd appreciate if you can show me how to set it to 0 (or any other value).

Thanks in advance!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Edit button text top and left attribute

Hi,
We appreciate you reaching out to us again!

To edit text name in rendered button you can manipulate padding attribute and change width and height of the button, look at this example.
https://codesandbox.io/s/highcharts-rea ... rked-5s6du

API References:
https://api.highcharts.com/class-refere ... rer#button

Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
lidorbt
Posts: 27
Joined: Tue Sep 08, 2020 4:32 am

Re: Edit button text top and left attribute

Hi sebastian!
Thanks again for the quick replies 😊

That's a helpful feature, but for some reason it doesn't solve my issue.
The problem in my code is that I want to create a very small button with text for the button that the renderer creates has a default 8px value on top and left.
I tried to set a zero value (with and w/0 px) but it still doesn't work. I'd be happy if you could try it yourself (or I'll send a non-working examlpe if needed).

Thanks in advance, lidor.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Edit button text top and left attribute

Hi,
Thanks for your message.

I change attributes a little but I'm not sure what do you want to achieve, could you explain again:
"I want to create a very small button with text for the button that the renderer creates has a default 8px value on top and left."

Demo:
https://codesandbox.io/s/highcharts-rea ... index.html

I'm waiting for news from you
Best regards.
Sebastian Hajdus
Highcharts Developer
lidorbt
Posts: 27
Joined: Tue Sep 08, 2020 4:32 am

Re: Edit button text top and left attribute

Hi there,
I added a meme I hope that will make it clear :wink:

Image

Thanks again!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Edit button text top and left attribute

Hi,
Thanks for the explanation, the picture shows the heart of the matter :)

I have another option, it's a little hard coded but I hope it's possible to achieve your goal.
It consists of rendering the text and positioning it in the place of the button.

API References:
https://api.highcharts.com/class-refere ... derer#text

Live demo:
https://codesandbox.io/s/highcharts-rea ... rked-pjz3u

Ask if you have any questions.
Best regards.
Sebastian Hajdus
Highcharts Developer
lidorbt
Posts: 27
Joined: Tue Sep 08, 2020 4:32 am

Re: Edit button text top and left attribute

Hi sebastian!

Thanks a lot for the suggestion, but I wanted to know if there's a way to simply remove the default css of the button. Changing it to text component wil unfortunately make few things a little complicated in my case.

Isn't there a way to remove the top and left?
Is it a bug? Or something you meant to add in highcharts lib?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Edit button text top and left attribute

Hi,
Thanks for contact again.

To remove the default styles from the rendered button, you can try to overwrite these styles by SVGRenderer#setStyle or use a chart.styledMode and sets style in CSS sheats.

References:
https://www.highcharts.com/docs/chart-d ... yle-by-css
https://api.highcharts.com/highcharts/chart.styledMode
https://api.highcharts.com/class-refere ... r#setStyle

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”