How to make text fit to the button width in Plotly web app?

Question

I am making a web app with plotly dash. Ofcourse there is a callback, and then def, and finally result output to a children.

The callback is as follow,

@app.callback(
    Output('prediction-content', 'children'),
    [Input('input', 'value')]

The output from the def is a long message, with the model forecast, which is like below:

def predict(input):

    function(input)
    results = f'xxxxxx ${pred:,.0f} xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx'

    return results

The children is in this Div

html.Div([
                html.Button(id='prediction-content'),
            ]),

Now my problem is, when i shrink the browser, the button is responsive (as the CSS of it is width: 100%), but the text on the button isn’t.

So How to wrap the text to fit the button? like the rest of the sentence goes to the next line, rather than being cut sharp?

Thank you!

By the way, i googled a lot, and can't find a solution for it. Found a similar post, Make button width fit to the text, but it seems doesn't work.

Thank you, i actually have tried "white-space: normal", and the other suggested answers from that page. Those syntax do help break up the sentence into words, but the overflown text still won't go to the next line. — yts61, Aug 13 '20 at 06:13

score 0 · Accepted Answer · answered Aug 13 '20 at 06:32

0

I have it fixed finally, in my custom CSS, i added:

Height: 100%;
white-space: normal

Now, the overflown text is shown.

answered Aug 13 '20 at 06:32

yts61

1 Answers1