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 you.
dbc_css = ("https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates#V1.0.7/dbc.min.css")
app = Dash(__name__,
use_pages=True,
title='Portfolio Optimization',
external_stylesheets=[dbc.themes.SLATE,dbc_css]
)
load_figure_template("slate")
and the header code is:
header = dbc.Navbar(
dbc.Container(
[
html.A(
dbc.Row(
dbc.Col(dbc.NavbarBrand("brandName")),
align="center",
className="g-0",
),
href="/",
style={"textDecoration": "none"},
),
dbc.Row(
[
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(
dbc.Nav(
[
dbc.NavItem(dbc.NavLink('Home', href='/')),
dbc.NavItem(dbc.NavLink('About', href='/about')),
dbc.NavItem(dbc.NavLink('Help', href='/help')),
dbc.NavItem(dbc.NavLink('404', href='/404')),
],
# make sure nav takes up the full width for auto
# margin to get applied
className="w-100"
),
id="navbar-collapse",
is_open=False,
navbar=True,
),
],
# the row should expand to fill the available horizontal space
className="flex-grow-1",
),
],
fluid=True,
),
dark=True,
color="dark",
className="dbc"
)
Related
My code below reads in a small CSV file, defines the styles, and displays the output.
The H1 tag is centred, as expected.
But for some reason, my table is not centered horizontally.
What am I doing wrong?
df = pd.read_csv('myfile.csv')
app = Dash(__name__)
hdg_style = {'color': '#055d9c', 'text-align': 'center'}
tblh_style = {'backgroundColor': 'Linen', 'fontWeight': 'semi-bold'}
tbl_style = {'textAlign': 'center', 'maxWidth': '1000px', 'border': 'thin #055d9c solid'}
app.layout = html.Div([
html.H1(children="My Project", style=hdg_style),
dash_table.DataTable(
data = df.to_dict('records'),
columns = [{'id': c, 'name': c} for c in df.columns],
style_cell = {'textAlign': 'center'},
style_header = tblh_style,
style_table = tbl_style)])
if __name__ == '__main__':
app.run_server(debug=True)
I tried the CSS below to center the table horizontally, but it did not work.
style={'margin-left': 'auto', 'margin-right': 'auto'}
If you include the margin attributes in your tbl_style definition, it'll center the table - it did for me in my test case:
tbl_style = {'textAlign': 'center', 'maxWidth': '1000px', 'border': 'thin #055d9c solid', 'marginLeft': 'auto', 'marginRight': 'auto'}
I suspect your attempts with CSS modifications get caught up in the vagaries of Dash configuration of serving static css files.
app.layout = dbc.Container(). In that, you put multiple dbc.Row. Then, dbc.Col in them. In these columns you put objects (your datatable). You can then align anything you wish moving objects by defining size and offset. Check official dash bootstrap components doc for the detail
issue that i am facing is, i have my bar graph made using react-chart-js. i want to remove space between the bar and center align the bar's . The bar's should have Thickness equal to 50
I try using dummy data ,that way i got the desired output but that is not the correct way of doing . Also I try using barPercentage , categoryPercentage option but didnt get the desired output
Link for CodeSandbox
I don't know if this actually works out of the box. There is nothing in the documentation about this use case either.
You could do it with ghost values to extend the chart in general.
This is not really a solution, but it may be an option.
const labels = ["","","January", "February", "March","",""];
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map((elem, index) => {
if (index > 1 && index < 5)
return faker.datatype.number({ min: 0, max: 1000 })
}),
backgroundColor: "rgba(255, 99, 132, 0.5)",
barThickness: 50
}
]
};
I am working on a Dash application for performance monitoring using python and plotly.
I have 18 dbc tabs .
In each tab i have a tab_content. Each tab_content has :
a dbc.Card with dbc columns (graphs embedded in the columns).
an image button for toggling between showing the graphs in a grid and showing them one on top of each other.
Each time the user presses the toggle button i want to trigger a callback that changes the following properites:
the 'xl' property of the dbc.columns for the viewed tab. The number of columns differ per tab depending on the number of charts . For example, first tab "CSSR Voce" has a button 'btn-1', and 2 dbc.columns with id's : 'g11', 'g12' (each column has a dcc.Graph embedded in it )
the image of the button . I have 2 images : 1 and 2. First time, the button loads with image 1. When user presses it switches to image 2.
the width of the dbc.Card embeding the dbc.Columns When showing graphs on top of each other i change the width to 1000. When showing the graps one NEXT to each other i change the width to 2000.
My approach was like this:
Because i have 18 toggler buttons i declared:
18 id's with {index:''} for the image and 18 id's for the buttons identifiers and wrote one single callback for all the 18 tabs using MATCH.
The problem:: I can use MATCH to reference the buttons, images and card styles because these have only one index per callback but when it comes to updating the 'xl' column i cannot use MATCH because each tab has more than one graph. So , would not know how to do a one-2-one index match in my callback.
When I write the callback I would need a variable number of outputs for updating the "xl" of each tab's dbc columns for each tab. I tried using a comprehension but cannot pass the variable 'nbr' outside the decorated function and into the decorator's arguments ( expected that not to work but tried it annyway)
The callback i wrote:
#app.callback(
[Output(f"{g}", 'xl') for g in tabs_graphs[nbr] +
[Output({'name':'card','index':MATCH}, 'style'), Output({'name':'img','index':MATCH}, 'src')],
Input({'name':'btn','index':MATCH}, 'n_clicks')
)
def grid(n_clicks):
tabs_graphs = [
['g11', 'g12'],
['g21', 'g22'],
['g31'],
['g41', 'g42', 'g43'],
['g51', 'g52'],
['g61', 'g62', 'g63'],
['g71', 'g72', 'g73'],
['g81', 'g82', 'g83', 'g84'],
['g91', 'g92', 'g93'],
['g101', 'g102', 'g103'],
['g111', 'g112', 'g113', 'g114'],
['g121', 'g122', 'g123'],
['g131', 'g132'],
['g141']
]
if (n_clicks % 2) != 0:
xl = 12
style = {'width': 1000}
src = './assets/grid2.png'
index_dict_string=str(dash.callback_context.triggered[0]['prop_id'].split('.')[0])
if index_dict_string != '':
nbr = int(json.loads(index_dict_string)['index'])
print('nbr is:', nbr)
return [xl for g in tabs_graphs[nbr+1]]+[style, src]
else:
raise PreventUpdate
else:
xl = 6
style = {'width': 2000}
src = './assets/grid1.png'
index_dict_string = str(dash.callback_context.triggered[0]['prop_id'].split('.')[0])
if index_dict_string !='':
nbr=int(json.loads(index_dict_string)['index'])
print('nbr is:',nbr)
return [xl for g in tabs_graphs[nbr+1]]+[style, src]
else:
raise PreventUpdate
the HTML structure of the tabs:
tab1_content = dbc.Card(
dbc.CardBody(
[
dbc.Row([
html.Div([
html.Button(
html.Img(src='./assets/grid1.png',className='icon',id={'name':'img','index':1}),
className='grdbutton1',
n_clicks=0,
id={'name':'btn','index':1},
)
],id='btn-grid',style={'width':'100%'})
],
),
dbc.Row(
[
dbc.Col(dcc.Graph(id='CSSR_voce_1'),id='g11', sm=12,md=12,lg=12,xl=6),
dbc.Col(dcc.Graph(id='CSSR_voce_2'),id='g12',sm=12,md=12,lg=12,xl=6),
],
no_gutters=True,
)
],
),
id={'name':'card','index':1},
className="mt-3",
style={'width':2000}
),
I'm new to HTML and am trying to create a custom landing page in Shiny.
Here's a snippet of my UI, but I cannot get additional line breaks between the image and the text. The image and the text render fine, but the breaks do not exist. I've also tried blank tags$p() to no avail.
navbarPage("",
tabPanel("Home",
tagList(
tags$img(src="test_vine.jpg", width = "100%", height = "100%", align = "left"),
tags$br(),
tags$br(),
tags$p("this is a test"))),
The fluidRow will solve this. Probably understanding the working of fluidRow would solve major alignment issues.
ui <- navbarPage("", tabsetPanel(
tabPanel("Home",
tagList(
fluidRow(tags$img(src = "image.png", width = "100%", height = "100%", align = "left")),
tags$br(),
tags$br(),
fluidRow(p("this is a test")))
## Simple way
# fluidRow(img(src = "image.png", align = "left", height = 300, width = 500)),
# br(),
# br(),
# fluidRow("this is a test")
)))
I am trying to semi-hide the side bar from shiny app.
Using this function on the body:
tags$script(HTML("$('body').addClass('sidebar-mini');"))
I got this result:
Is there a way to hide the sidebar, without hiding the title, just modifying this script ?
You can define a short title, it will be displayed when the sidebar is collapsed :
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(
title = tagList(
tags$span(
class = "logo-mini", "Short"
),
tags$span(
class = "logo-lg", "My Long Title"
)
)
),
dashboardSidebar(),
dashboardBody(
tags$script(HTML("$('body').addClass('sidebar-mini');"))
),
title = "Dashboard example"
),
server = function(input, output) { }
)
}
Normal:
Collapsed:
assuming that you have a built in CSS class called "hide".
tags$script(HTML("$('.sidebar-mini #YOUR_SIDEBAR_ID').addClass('hide');"))
IF you want to get fancy then do things like absolute position -9999 and opacity 0, then "reveal it" when needed...