Is it possible to rotate a model button (using dash_bootstrap_components) around an axis?

Hello all,

I have been trying to rotate a modal button 90 degrees to be inline with the mid-right border of the screen. I have not found a solution and am wondering if that is possible. See attached images and code for reference. Anything will help. Thanks in advance.

from dash import Dash, Input, Output, State, html, dcc, dash_table, callback
import dash_mantine_components as dmc
import dash_bootstrap_components as dbc

dmc.Affix(dbc.Button("Feedback", id="open", size='lg'), position={"top": 400, "right": 0} ),
        dbc.Modal([
                dbc.ModalHeader("Feedback"),
                dbc.ModalBody("Send a message if you have a comment, question, or concern. Thank you!"),


You should set style for dbc.Button as style={"transform": "rotate(90deg)",'position':'absolute'}.

from dash import Dash, html, dcc, callback
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import dash_mantine_components as dmc

app = Dash(__name__, title='Dashboard', external_stylesheets=[dbc.themes.LUX])

app.layout = html.Div([
    dmc.Affix(
        dbc.Button("Feedback", id="open", size='sm'), 
        position={"top": 400, "right": 0}, 
        style={"transform": "rotate(90deg)",'position':'absolute'}
    ),
    dbc.Modal([
        dbc.ModalHeader("Feedback"),
        dbc.ModalBody("Send a message if you have a comment, question, or concern. Thank you!")
    ])
])

if __name__ == '__main__':
    app.run_server(debug=False)

2 Likes

Hello @jsellers,

Welcome to the community!

Yes, it is possible to replicate this style.

You can actually see the style of any element that gets applied to a website and make changes by inspecting the element:

You can look at the styles from the elements and see how they applied the different styling to the element. :slight_smile:

For this one, the import things are:

'transform': 'rotateZ(-90deg) translateX(50%) translateY(0px)', 'transform-origin':'100% 100%'

3 Likes

@jinnyzor Thank you so much for the help! That was exactly what I needed.

1 Like

@hoatran Thank you for your reply. That is perfect!

1 Like