Stack Overflow
Stack Overflow

Questions tagged [dash-bootstrap-components]

dash-bootstrap-components is a library of Bootstrap components for Plotly Dash.

dash-bootstrap-components is a library of Bootstrap components for Plotly Dash, that allows you to build consistently styled apps with responsive layouts.

77 questions
1
vote
1 answer

Plotly Dash Boostrap drop down menu is rendered behind the the plotly graph objects. Is there a way to stop this?

I'm making a plotly - dash app that has a navigation side bar to browse through the different app pages (see code below). One of the navigation items contains a dbc.DropDownMenu that hangs over the edge of the navigation side bar into the main…
Tim
  • 173
  • 1
  • 11
1
vote
1 answer

Dash Bootstrap Components: Some inputs not styled correctly when using dark theme

I wrote an app with Plotly Dash / Dash Bootstrap Components (dbc). It looked fine when using a light theme (Spacelab), but with dark themes (I tried Darkly and Cyborg), dropdowns and selects are not styled correctly - they should have a white…
Thomas
  • 4,696
  • 5
  • 36
  • 71
1
vote
1 answer

Usage of Columns in dash bootstrap components example

The (for instance) "horizontal form" code example of the Form component of the dash bootstrap components documentation (https://dash-bootstrap-components.opensource.faculty.ai/docs/components/form/) looks like this: # ... email_input = dbc.Row( …
LCsa
  • 607
  • 9
  • 30
1
vote
1 answer

Styling Accordion tab dash bootstrap component

I would like to change the tab colour and alignment to centralise it. Thus far I've been using style = {'textAlign': 'center'} and displace = flex option as well but that skews the content alignment. Anyone knows how to use CSS to overwrite the…
sarang
  • 13
  • 4
1
vote
1 answer

implement external_stylesheets with dash-bootstrap only to accordion component

in below code which represents main section of my app I need to apply external_stylesheets which works only with accordion component. What should I change in below code because currently this style is applied for whole app and it cause unwanted…
Mariusz Pięta
  • 11
  • 2
1
vote
3 answers

How to make the positions of buttons in navbar fixed even when the screen size changes in Dash-plotly with python

I am trying to keep the position of the buttons fixed in the Nanbar of my Dash app even when we zoom in the browser or if the screen size changes. I used dash bootstrap components to make the layout but the buttons disorient when I zoom in or if I…
rohith santosh
  • 28
  • 6
  • 23
1
vote
0 answers

Dash callbacks that rely on previous calculations within prior callbacks & TypeError for # arguments

I am building my first dash app and am trying to have a few user inputs update a plot. The first user-input is a DateRangePicker with a button to submit the date range chosen. This works properly using a callback. In the callback, I call a function…
Cheryl Braus
  • 73
  • 5
1
vote
1 answer

Changing the label in Dash bootstrap dcc.tab based on callback children

I am using dash core components to create a dash app that includes tabs that return tables based on callbacks. I'm trying to see if it's possible to change the label on the tab itself based on the callback, though it seems like the label will only…
AdamA
  • 343
  • 1
  • 2
  • 11
1
vote
1 answer

dash_daq BooleanSwitch fails with border-box from Dash Bootstrap Components

I want to use a boolean switch for my Dash-Web-App. The dash_daq BooleanSwitch looks quite nice, but has a problem with the dash bootstrap components because bootstrap uses border-sizing: border-box: Boolean Switch with border-box:…
Bulgur
  • 25
  • 6
1
vote
0 answers

Aligning buttons in Dash

I want to align the my buttons - 'left_button' and 'right_button' so it fits on the edges of each of the right left most corner of the images and right most corner of the images. right now it looks like this image of buttons not correctly in…
dd030703
  • 11
  • 1
  • 2
1
vote
0 answers

Style Plotly Express with CSS

I'm currently working on a DASH\Plotly app. I am using dash-bootstrap-components with a custom CSS file. My current problem is, that my plots aren't styled from the CSS file. So they don't perfectly match with the rest of the theme. From what I…
JoThunder
  • 11
  • 1
1
vote
0 answers

How to increase my container width to accomodate more items

I am building a dashboard using Plotly Dash. I am using bootstrap.min.css , I would like to increase the width of my container so that I can accommodate two graphs , in a single row. My second graphs(Line graph) , has more width hence unable to…
Ragesh Kr
  • 1,573
  • 8
  • 29
  • 46
0
votes
1 answer

dcc.Tabs not being styled using a dbc theme in external_stylesheets

If I recreate the dash-core-components Tabs example and apply a stylesheet, my tabs (and plot area) don't seem to be taking the formatting. from dash import Dash, dcc, html, Input, Output, callback import dash_bootstrap_components as dbc app =…
GallopingNarwhal
  • 33
  • 4
0
votes
0 answers

Change bootstrap theme using python

I hope you are having a good day. I'm trying in the Python code snippet below to change the theme while the app running. Is there a way to assign the theme to external_stylesheets argument? Is there a way to refresh the app? P.S.: The H5 component,…
Tamer Gomaa
  • 19
  • 5
0
votes
1 answer

Plotly graph not rendering on the side of other widgets: dash_bootstrap_components Row appears identical to Col

I'm building a data explorer using dash, plotly, and dash bootstrap components. I would like a layout for my data to look something like: desired graph layout However, using dbc to slowly build up the interface, the graph keeps getting put on top of…
K. A. Mendoza
  • 3
  • 2
1 2
3
4 5 6