Hi Everyone, Dash Bootstrap Card Component is very powerful and can lead to very professional layouts. Enjoy! 👉If you benefitted from these tutorials & would like to show your appreciation & support the existence of more tutorials: www.patreon.com/charmingdata Thank you 💛
@adityanjsg99
2 жыл бұрын
Sir, I am so glad I stumbled upon your channel. My value to the organization has shot up with your videos. Thank you!
@mdaplaton
2 жыл бұрын
Thx for your content again. Love the content and the naming of your videos simple and direct avoiding clickbaits .
@mixedmusicarts9917
3 жыл бұрын
your channel is just gold
@akkifourteen14
3 жыл бұрын
oh my god, that was brilliant and detailed! thanks a lot, really appreciate it!
@PAULPAULPAUL214
3 жыл бұрын
Very high-quality material, thank you very much.
@random_birch_forest
4 жыл бұрын
Great video, Adam! Really like your explanations! In the future videos I would appreciate more information on complex callbacks, where several input variables influence several graphs and tables in the dashboard simultaneously. Cheers!
@CharmingData
4 жыл бұрын
Hi Alex, thank you for the suggestion, and I'm glad my tutorials are useful to you. Making these videos takes a lot of time, which is why I haven't done a video with complex callbacks yet. But I'll definitely consider it. It would be great to have you as my supporter so I can continue creating Dash Plotly educational tutorials. www.patreon.com/charmingdata My next video will be on Dash Alerts, Modals, popovers, and Fades. I hope you like it :)
@abelgebreegziabher6096
4 жыл бұрын
High quality as usual.
@fgreve
4 жыл бұрын
As usual, excelent material. Thanks!
@penninahgathu7956
3 жыл бұрын
Thank you. Learnt so much from you.
@mohankumar-cw5lw
4 жыл бұрын
I like your video first then watch. You are such a great help .
@CharmingData
4 жыл бұрын
Thank you Mohan :) I'd love to see any web apps or dashboards that you might have created. On a side note, I am trying to gather more supporters to create higher quality educational tutorials on Dash 👨🏽🏫 My goal is to reach my first 15 supporters, and it would mean a lot if you were able to support me 😊 www.patreon.com/charmingdata Enjoy your weekend.
@talk2praju
4 жыл бұрын
very good explanation 👍👍👌👌
@CharmingData
4 жыл бұрын
Thank you Prajwal. I'm glad you like it. Make sure to turn on your notification for this channel if you subscribed, so you can be notified of my next video on bootstrap 😎
@leonardomolina8958
4 жыл бұрын
Very goood tutorial! Can you see dash-auth in an upcoming video?
@CharmingData
4 жыл бұрын
Thanks Leonardo. I'll add it to the list. I have other videos I'm working on for the next couple of months. But I'll try to get to it
@nawalelboghdady9998
3 жыл бұрын
Great videos as always! I have two cards on the same row but in different columns, and I'd like to make them both have the same height, otherwise it looks funny. dbc.CardDeck doesn't solve the issue because it sets both cards to the same width, which is something I do not want, and also messes up the alignment with the following rows. I have been racking my brain and the internet for a solution, but no luck! Thanks a lot in advance!
@CharmingData
3 жыл бұрын
I'm not sure, Nawal. Sorry
@nawalelboghdady9998
3 жыл бұрын
@@CharmingData No worries! Thanks a lot for getting back to me. In case anyone else hits this issue, a quick-and-dirty way is to set the height of the cards manually to a fixed value that works well for all the cards that should have the same height. The downside of this is scalability, so if you project on a smaller screen, components inside the cards may actually cross the border and it will look awful. Here is the code to do that: dbc.Card( [ dbc.CardHeader('Header'), dbc.CardBody(cards) ], color="light", outline=True, style={'height':'15rem'} ) The key is in this command: style={'height':'15rem'}, where the number 15 is something you adjust until you reach the desired effect. If you add this line to the cards that should have the same height, it should statically set the height of those cards to be the same. Again, the drawback is that this does not scale with different aspect ratios. Try zooming in on your browser to see how this will affect internal contents of the card...
@CharmingData
3 жыл бұрын
@@nawalelboghdady9998 Thank you for sharing.
@bholaprasad26
3 жыл бұрын
Is it possible to only change the background color of the card header but not the whole card?
@Dynamite_mohit
3 жыл бұрын
Thank you charming data
@zhannaorlova3261
3 жыл бұрын
Hi, I have a question, so I have to input variables from my data analysis into the button component, or the card component and algo a function into a the color of the button depending on some scale I have. Could you make a video on inputing different variables and functions into the dash components code?
@atrain1986
3 жыл бұрын
Hey Adam, is it possible to resize the card images? Thanks for this video!
@joelraucq
3 жыл бұрын
Great video. Could you share the JavaScript code to make the cards draggable? Thank you.
@CharmingData
3 жыл бұрын
Hi Joel, please write me at info@charmingdata.org
@stefanherbek2025
3 жыл бұрын
Great video. Thanks a lot! Isn't a dbc.container always needed?
@CharmingData
3 жыл бұрын
It is always recommended to have dbc.container. That was my mistake :)
@cechgyt8336
Жыл бұрын
Thank you for the video ! Is it possible to drag card only by clicking on the cardheader not the cardbody ?
@CharmingData
Жыл бұрын
What do you mean? I don't recall being able to drag the cards on this video. Could you drag them?
@cechgyt8336
Жыл бұрын
@@CharmingData Thank you for you answer, I have used the wrong word maybe. In this video we have learnt how the user can move cards around. My idea was to move cards around only when the user click on the card header. Because in my cardbody I have a slider so when I move my slider it moves my card. The solution for me would be to allow the user to move the card only by pressing the cardheader (instead of the all card). I don't know if it's possible
@CharmingData
Жыл бұрын
@@cechgyt8336 You can move the card around by changing their position inside the app.layout. This video doesn't show how to move the card around with user interaction.
@divyangpatel8803
Жыл бұрын
Hi. I would like to add floating card. Whenever I scroll, it should go down with the layout. Is there any way where we can achieve this?
@CharmingData
Жыл бұрын
I think you would need to use javascript for that. That is not possible directly with Dash Bootstrap Components.
@divyangpatel8803
Жыл бұрын
@@CharmingData Thanks.
@adriahuguet5357
3 жыл бұрын
Really nice video! Is it possible to set column height to more than one row? Thank you!
@CharmingData
3 жыл бұрын
Hi Adria. I think it is. Maybe you can adjust the height of the card.
@torsten156NRW
3 жыл бұрын
Hi Adam, thanks for your videos. High quality! I have a question about the background color of a card. It is possible to change the color in a callback-function? I have setup the color with this code: "dbc.CardHeader("AT", className="card-text", style={'background-color': 'rgba(192, 192, 185, 0.44)', 'text-align': 'center', 'font-size': 36})" I would like to change the color in dependence of a int value. Thank's a lot...
@CharmingData
3 жыл бұрын
Yes, you would just have to access the style prop of the card id and return that background key value
@torsten156NRW
3 жыл бұрын
@@CharmingData Hi Adam, thanks. It works fine ;-)
@SolidBuildersInc
3 жыл бұрын
Thank You, TimeStamp 20:50 What did you do to correct the rendering of the Chart? I rewind 7 times and have no idea how you new it should work, lol
@CharmingData
3 жыл бұрын
Hi Davis, It's a secret :) No, I actually don't think I did anything. PyCharm really slows down on my computer when I'm recording a video. So, I just gave it more time to load and stopped trying to refresh the page
@SolidBuildersInc
3 жыл бұрын
@@CharmingData "It's a Secret" lol I had to take a break after that, lol Thanks
@mariannakovalova8849
4 жыл бұрын
Is it possible to make a card's body hidden? For example, add button "see more" and after press button see some information
@CharmingData
4 жыл бұрын
Yes. You can use the bootstrap fade or collapse. dash-bootstrap-components.opensource.faculty.ai/docs/components/alert/
@Dynamite_mohit
3 жыл бұрын
Could you tell how can I put Wordcloud ओवर् CardImg section?
@ThanosAstakos
3 жыл бұрын
And what if i want to control also the height of a card? How can I create a card with a specific height? e.g. 780px
@CharmingData
3 жыл бұрын
Good question. Try inside the card to put: style={'height': '780px'} Does that work?
@ThanosAstakos
3 жыл бұрын
Thank you for the answer @@CharmingData! I did it already buuuut nothing! I hope that there will be a solution except CSSing hahaha
@fgreve
4 жыл бұрын
Do you know how can I put the image at the left of the card?
@CharmingData
4 жыл бұрын
Fernando, as far as I know, that's not possible with CardImg. If I find a way, I"ll let you know.
@henrytirla
3 жыл бұрын
Hello I am trying to build this layout. imgur.com/MM2jhiH How will you suggest to wrap the second 8-column section to get that layout Taking into consideration it is all found within a single row. Thank you
@keithmartinkinyua2067
3 жыл бұрын
Hi .How can i plot two line graphs together in plotly.
@CharmingData
3 жыл бұрын
HI @Keith, what do you mean? Do you mean plotting two line graphs in the same card?
Пікірлер: 55