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
2
votes
1 answer

Setting dash-daq graph height in Python Dash Bootstrap Components

I'm new to Dashboard Development using Python Plotly and Dash. Also I have no background in CSS or html. I'm trying to build a dashboard to show live and past data from a database in a dashboard. The data is fed by sensors attached to a raspi. I'm…
2
votes
1 answer

Plotly-dash - update graphs in tabs

I like to put plotly graph1 in tab1 and graph2 in tab 2, but there is no trace visible. Why are traces not visible? The graph in tab2 is also showing no traces. It would be great to know whats wrong. Simular example code would also be a big…
Johan12
  • 21
  • 2
1
vote
1 answer

Dash multi-page app using DBC navigation bar

I'm trying to replicate "multi_page_example1" from https://github.com/AnnMarieW/dash-multi-page-app-demos/tree/main. This uses a drop-down menu to navigate to different pages. However, I want to adjust the navbar options to be the standard links as…
1
vote
1 answer

Dash bootstrap components layout creation

I want to create a layout for a dashboard using dash_bootstrap_components that looks like this: +---+---+---+ | | 2 | 3 | | 1 |---+---+ | | 4 | +---+-------+ Is this possible? Can someone help me figure out how to do this? Thanks :) I tried…
Ben Karl
  • 13
  • 4
1
vote
1 answer

Configure app layout when adjusting screen size - dash

I've tried to set the max height/width on dbc components within an app but when adjusting the screen size, the layout changes. Is there a way to make the layout more flexible to ensure the same configuration when adjusting the screen size. With…
Chopin
  • 96
  • 1
  • 10
  • 35
1
vote
1 answer

Increase space between text and icon in dash checklist

I can adjust the margin and padding around/between various dcc components. But I'm aiming to increase the space within these functions. I have a Checklist and RadioItems below. I want to increase the blank space between the icon and the text. I…
Chopin
  • 96
  • 1
  • 10
  • 35
1
vote
1 answer

Include multiple bar charts with callback interaction - dash

I'm aiming to plot multiple graphs in a dbc.Container that can be manipulated with various filtering controls. The following app layout includes a DatePickerRange for dates, Dropdown for days of the week, and a Checklist for unique values. I aiming…
Chopin
  • 96
  • 1
  • 10
  • 35
1
vote
0 answers

Dash model with separate button callbacks

In Python I am working with Dash and Dash bootstrap components. I am having trouble with the bootstrap Modal component. My most basic implementation of the modal, using the first example here, works fine. However, If I try to replace their single…
1
vote
0 answers

how to remove hover frame from dash navbar when using dash bootstrap components

I am using dash bootstrap components and I would like to remove the black border on hover on the header. also if I remove the 404 page from the navbar, the 404 does not work when i enter a page that does not exist. any help appreciated. Thank…
grayred8
  • 93
  • 6
1
vote
1 answer

How to use *spinner_style* in dbc.Spinner?

I am trying to use dbc spinner, and I notice spinner_style is used to add Inline CSS styles to apply to the spinner. Is there an example of how to use this config? I am currently using spinner_class_name=“position-absolute top-0 start-50” to…
Bravo
  • 657
  • 1
  • 8
  • 19
1
vote
0 answers

specifying component layout in a dash app

I am trying to format the components of a dash app using dash bootstrap components. I would like to have the graph in the image next to a slider component, as indicated in the bottom image. It's not working as expected – please could someone…
1
vote
1 answer

Having trouble applying a border and border radius on a dbc.Table

I am attempting to: create a border around the outside of the table make the border have a radius When I apply styling by stating either all 4 border sides individually (like below), the lines between each row also become solid orange. If I comment…
ah2Bwise
  • 82
  • 2
  • 17
1
vote
1 answer

How to position my chart with Dash Bootstrap Components

I’m having a problem with the positioning of my chart on the page, in this case I’m using Dash Bootstrap Components to create rows and columns on the page… My graphic should be next to the Card, but it’s under the Card, where am I doing…
1
vote
1 answer

Switching plots with radio button screws up the format

I am trying to do something relatively simple. I want to create a radio button that switches between two plotting formats. The radio button switches between two options. Let us call them 'a' and 'b.' When 'a' is selected, I want to plot two figures…
1
vote
1 answer

Remove empty left space - plotly dash bootstrap

I am using dash bootstrap components so all my components are where I want them in my layout. But they are alinged in the center of their rows. There is a lot of emtpy space from the left side to my first graph. Why is that and how can I remove…
Birk
  • 59
  • 5