Currently, I am developing a web application using plotly dash. The process involves setting up a callback function and defining the output result to be displayed on the screen.
This is how the callback function looks:
@app.callback(
Output('prediction-content', 'children'),
[Input('input', 'value')]
The actual function that handles the prediction is structured like this:
def predict(input):
function(input)
results = f'xxxxxx ${pred:,.0f} xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx'
return results
The content to be displayed as a result is contained within a Div element with an associated button tag.
html.Div([
html.Button(id='prediction-content'),
]),
However, a problem arises when the browser window is resized - while the button adjusts its width dynamically due to CSS styling, the text does not wrap accordingly causing it to get cut off.
Is there a way to make the text wrap inside the button so that it flows to the next line instead of being abruptly cut?
Any help or suggestions would be greatly appreciated!
I have tried researching online for solutions but haven't found anything helpful. I came across a similar post on Stack Overflow titled Make button width fit to the text, but it didn't provide a solution for my specific issue.