Hi! I’m trying to add my own .css styles into panel app and some changes were done, e.g. width, background-color. However, I don’t know how to change display:block into display:flex of Row() element. I’ve tried to add new argument pn.Row(..., display='flex'), add .css class with display:flex !important; but inspection of web page showed that the current div had still display:block;. I’ve tried to use .js code - it changed backround-color or width but didnot affect display.
Please, answer if you know how to modify this atribute in panel object.
Hi @BartoszW
Welcome to the community. Could you write a little bit more about what you are trying to achieve and add a minimum reproducible example it would make it much easier to help.
For example Panel might already provide a solution. For example the FlexBox?
@Marc - thanks for your quick answer 
My ML/Data-Science team is coding analytical app in Panel framework and in future, we will cooperate with UX/Front-end team. They will give us a mockup and some .css or .js scripts, however, we have already discovered that objects like Column() and Row() have some default attributes (e.g. display:block) that we can’t change with standard methods.
We tried add following .css style, however, only background was changed. The display was still as block.
import panel as pn
my_css = '.my_flex_box {display:flex; flex-wrap:wrap; background-color:green}'
pn.extensions(raw_css=[my_css])
pn.Row(..., css_classes=['my-flex-box'])
The same problem appeared when I used .js method:
my_js_script = '''
document.getElementsByClassName("my-flex-box")[0].style.backgroundColor = 'green';
document.getElementsByClassName("my-flex-box")[0].style.display = 'flex';
document.getElementsByClassName("my-flex-box")[0].style.flexWrap = 'wrap';
'''
my_js = pn.pane.HTML(my_js_script)
pn.Column(my_js, pn.Row(..., css_classes=['my-flex-box']))
Now, we’re looking for method to apply external .css and .js scripts directly into Row() and Column() objects. On the other hand, if some style attributes in this objects are constant we will use pn.paneHTML() block or custom classes with ReactiveHTML parent.
1 Like
Hi @BartoszW
Panel is designed so that for most users and use cases there would be no need to use .css or javascript. But it also supports customization to some extent.
I have been customizing a lot. For example at work. But also contributing the FastListTemplate and FastGridTemplate to Panel. That involved writing some custom .html, .css and .javascript. See panel/panel/template/fast.
My thoughts are that you will have to find some compromise. You UX/ design team will probably have to spend a little bit of time understanding how Bokeh/ Panel .html and .css works and adjust accordingly.
If you have the resources/ time from that team I would advice getting them to help you create a custom template that will help you layout things. You can have branded headers, sidebars, footers etc containing your Panel components. And customized layouts. See Templates — Panel 0.12.6 documentation. This is probably not something you do in hours. But if you “depend” on Panel and have the resources to invest this can work out great. I’ve done it for my team. Since I knew how I could do it in a couple of days. And then we use that template over and over again.
If you don’t have a lot of resources I would go with the FastListTemplate and FastGridTemplate. They can be customized to some extent. You can customize the colors, logos, titles and more.
If you need a special layout that is not provided with Panel I would recommend creating that using ReactiveHTML. Custom Components — Panel 0.12.6 documentation.
If you can share more of your UX html, .css, .js - at best a minimum, reproducible html document, then more guidance or a simple example of implementing this in Panel could probably be worked out. If this could be turned into a great example for the Gallery of a custom template or component it would be worth the effort.
1 Like
Thanks a lot for some inspirations! I will report here our final results.
1 Like