Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to give space between two dcc components in Python Dash?

What is the HTML equivalent for &nbsp (space) in Dash?

html.Div(
    [
      dcc.Input(),
      <add horizontal space here> 
      dcc.Input()
    ]
)
like image 741
jsonbourne Avatar asked Apr 15 '20 16:04

jsonbourne


People also ask

What is a dash component?

The Dash Core Components module ( dash. dcc ) gives you access to many interactive components, including dropdowns, checklists, and sliders. Import dash.dcc with: from dash import dcc. The dcc module is part of Dash and you'll find the source for it in the Dash GitHub repo.

What is HTML DIV in dash?

A Div component. Div is a wrapper for the <div> HTML5 element. For detailed attribute info see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div. Access this documentation in your Python terminal with: >>> help(dash.html.Div)

Is CSS a dash component?

Dash is a web app framework that provides pure Python abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML templating engine, you compose your layout using Python with the Dash HTML Components module ( dash.

How do you write text in dash?

To create an em-dash on a Windows computer, hold down the [Alt] key and type 0151 on the numeric keypad. To create an em-dash on a Mac computer, hold down the shift and option/alt and type -. An en dash is the width of the letter "n" and is expressed in plain text as a hyphen ( - ).


1 Answers

If you want to add some space between components you can simply use CSS-properties for this:

html.Div(
    [
      dcc.Input(),
      dcc.Input(style={"margin-left": "15px"})
    ]
)

This adds a margin to the left of your second Input.

Have a look at the layout-section in the Plotly Dash documentation and CSS documentation about margin:

  • https://dash.plotly.com/layout
  • https://www.w3schools.com/csSref/pr_margin-left.asp
like image 58
MrLeeh Avatar answered Oct 15 '22 06:10

MrLeeh