dash-bootstrap-components | Bootstrap components for Plotly Dash | Data Visualization library

I'm currently working on a Dash frontend interface (python), where I'm loading data from a Pandas dataframe into a table.

My question is: How do I render a hyperlink in a table? I would be interested for solutions with both Dash's DataTable component, but also with dbc Table (Dash Bootstrap Components) which I'm using in my implementation.

Below you can find the simplified and summarized code how I load the dataframe into the dbc Table component. Basically, when the user clicks on the search button, the query in the State is used as a parameter for a POST request. The response JSON is mapped and here I try to render a hyperlink - so far without success.

I want to change row height using dash-bootstrap-components, but it is not reflected correctly on the page.

Specifically, even if I execute the code posted below, I will see a page like the one below.

But the simple structure of the page is as follows

• Whole page: height as 95% of view point, background color as grey
• First line: one column in html.H1, className="h-10"
• Line 2: 2 columns in html.Div, className="h-40"
• Line 3: 2 columns in html.Div, className="h-40"

In the code, the overall size of the page is set to 95% of the view point and the background color to grey, which I can see reflected in the following figure.

H1 element with "Title" is also 10% of the total size (className="h-10"), which is exactly as set, but the height of the second and subsequent lines is not as set.

I saw the following discussion at the beginning, and I think my code implements the same way. https://github.com/facultyai/dash-bootstrap-components/issues/286

These were not resolved by refreshing the page or restarting the server. How can I get the height of each row to reflect the size I specify?

Thank you.

here is my source code

EDIT: Please don't invest time into an answer - I found the solution myself, but instead of deleting it I want to keep it for others in case they have the same problem. I cannot close it however, but no need to provide additional answers, thanks!

Title already says it all - I want to create a dbc table from a pandas Dataframe. However, it looks like the columns are not being parsed, neither with HTML nor with markdown syntax:

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:

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 title(item 1 , item 2 and item 3 in this case) in the tab only

I’ve been developing a dash app that uses a long_callback, and for development I’ve been using a diskcache backend for my long_callback_manager, as recommended by the guide I found here: https://dash.plotly.com/long-callbacks

When I tried running my app using gunicorn, it failed to start because of something apparently wrong with diskcache. As such, I decided to switch to a celery/redis backend since that’s recommended for production anyway.

I got a redis server running (responds properly to redis-cli ping with PONG), and then started the app again. This time it started up fine, and all of the normal callbacks work, but the long_callback does not work.

Details:

• The page more or less hangs, with the page title flashing between the normal title and the Updating... title, indicating that the app thinks it’s “waiting” for a response/update from the long_callback.
• The values set by the running argument of the long_callback are set to their starting value, indicating that the app recognizes that the long_callback ought to run.
• By placing a print statement as the first line within the long_callback function and seeing that it does not print, I’ve determined that the function never starts.
• The failure happens both with gunicorn and without gunicorn.

These details all point to the problem being the celery/redis backend. No errors are shown, neither on the client/browser nor on the server’s stdout/sterr.

How do I get a celery/redis backend working?

UPDATE: After realizing that the __name__ variable is being used and that its value changes depending on the file from which it is referenced, I've also tried moving the code which creates celery_app and LONG_CALLBACK_MANAGER into app.py, to no avail. The exact same thing happens.

I keep seeing an error message during my docker build, at the part where docker tries to install my requirements.txt file that says Module Not Found. However, half of the time the version of the module it says it can't find is in the list of versions available.

I keep trying older versions and eventually I'll find one that works but then the same thing will happen on the next package. It's taking hours to try and build one container which surely can't be right. I'm assuming it might be something to do with packages might not be passing between different layers of the containers, but I'm new to Docker so can't tell if this is the issue or how to fix it.

I'm using WSL2 (Ubuntu 20.04) to build a flask application in Python (well technically it's a Plotly Dash app but I've read it works the same as flask). I have a Windows 10 machine and I've ensured that Docker is set to be compatible with WSL2 and Ubuntu. I've pasted a few of the many errors I've been getting below, as well as my current requirements.txt, Dockerfile and file structure.

I'd like to know how to prevent this message from keep coming up and how to know which package is compatible with Docker? Any help would be appreciated.

Some of my error messages that I'm seeing are:

Last week I learned about Dash and I immediately got interested in developing a small tool to perform and help visualize some technical computations in my organization. Because of its technical nature, this app will have many input fields and buttons. I learned about Dash Bootstrap Components and it seems to me that this should make it a lot easier to organize all of this into a tidy grid.

The problem is that the column positioning does not seem to work for me. I read the guide at the following location https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/, which makes the positioning seem really easy. As long as the widths do not sum up above 12, the columns should nicely space out and not wrap onto the next line. Unfortunately I get some unexpected behavior (I demonstrate two examples of odd behavior in the image and script below).

1: In the row on the top-right, the last column wraps to the next line. 2: In the row on the bot-right, the last columns ends up on top of the middle column.

Please note that I am not explicitly loading the .css in this script. I am working offline. The workaround I used is to download the .css that would otherwise have been loaded and put it in a 'assets' folder. I tried multiple of the Dash Bootstrap Component .css files (here I use bootstrap-grid.min.css, which otherwise would have been loaded using a call to external_stylesheets with dbc.themes.GRID), but the problem is always the same. This problem may be dependent on screen size (even though I don't think it should as long as the widths add up to 12 or less).

I have browsed for a solution for quite a while and tested a lot, but no success. If someone with more experience than I have would be able to help me I would be very grateful. Thanks!

I'm trying to build a small form with dash and dash-bootstrap-components, but I can't figure out how to use the 'action' attribute of the form.

Or, rather, I'm trying to save the data that the user inputs into the form to the Postgres DB, and the action attribute seems to be the way to do that, but I wasn't able to find any examples on how to use it.

Did anybody have experience building forms with DBC?

EDIT my current solution is (in a simplified form):