0

I am trying to create a website with Dash for python using dash bootstrap components (dbc). I have dbc.buttons within a jumbotron and have html text imbedded in them. I am not able to increase the clickable area to cover the whole button. I changed the white_link to display: block and that increased it considerably but its still not the whole button. Here is my code and also the relevant css code. Any help would be appreciated.

  html.Div(),
        dbc.Jumbotron(
            [
                html.H1("Ontario", className="display-3"),
                dcc.Markdown (['''hello-world'''], className = "lead"),
                html.Hr(className="my-2"),
                html.P(
                    "testcode"
                ),
                html.Div(
                    [
                        dbc.Button(html.A("A", href = "#core", className = "white_link"), color="success",style = {'margin-right':'5px'}, size = "lg", id="core"),
                        dbc.Tooltip("A-hello", target="A", placement="bottom"),
                        dbc.Button(html.A("B", href = "#tool", className = "white_link"), color="primary",style = {'margin-left':'5px'}, size = "lg", id="tool"),
                        dbc.Tooltip("B-hello", target="", placement="bottom"),
                    ], className = "jumbo-buttons"),
            ], 
        ),
        html.Div()


* Jumbotron Stuff */
.jumbotron {
    opacity: 0.85;
    margin-bottom: 0px;
    padding: 64px 42px;
    height: max-content;
}

.jumbotron.logon h6 {
  font-weight: 600;
}

.jumbo-buttons {
    display: grid;
    grid-template-columns: 50% 50%; 
}


/* Top Margin for pages */
.margin-up {
    margin-top: 125px;
}


/* Links in Misc Buttons */
.white_link {
    color: #ffffff;
    transition: all 0.3s linear;
    display: block;
}

.white_link:hover {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
}
j08691
  • 204,283
  • 31
  • 260
  • 272
Saumya93
  • 1
  • 1

1 Answers1

0

I am late to the party but still... It is possible to define width button with CSS using px or %.

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

a lot about buttons and button groups [here].

Mr.Slow
  • 490
  • 1
  • 1
  • 16