Hello all,
I made numerous attempts at have the label of a input/text area/dropdown be above the input/text area/dropdown component and do not see any documentation on it. In the screenshot below, the “Reason:” label is above the dropdown component instead of to the side of the compared like the “Name:”/“Email:” labels inputs. Is it possible to adjust them? See attached code snippet and screenshot
# Importing the necessary libraries and dependencies
from dash import Dash, Input, Output, State, html, dcc, dash_table, callback
import dash_mantine_components as dmc
import dash_bootstrap_components as dbc
import dash_daq as daq
import pandas as pd
# Initializing the Dash instance and chosing a color theme for layout
app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR])
# Creating the fields that will capture Customer's input
user_input = dbc.Row([
dbc.Label(
'Name:', # Change the title of the text box
html_for='example-name-row', # ???
width='auto'), # Shift name label in the container
dbc.Col(dbc.Input(
type='text', # Specify the type of input
id='example-name-row', # Unique given id created by the user
placeholder='Enter Name', # Change the text in the input text box
minLength= 1, # Min length of the character that can fit in the text box
maxLength = 80), # Max length of the character that can fit in the text box
width='auto' #Adjust the length of the label text box
)]
)
email_input = dbc.Row([
dbc.Label(
'Email:', # Change the title of the text box
html_for='example-email-row', # ???
width='auto'), # Adjusts the width of the label text
dbc.Col(dbc.Input(
type='email', # Specify the type of input
id='example-email-row', # Unique given id created by the user
placeholder='Enter Email'), # Change the text in the input text box
width='auto', # Adjusts the width of the input text box
)
])
message = dbc.Row([
dbc.Label(
'Message:',
html_for='example-message-row',
width='auto'),
dbc.Col(dbc.Textarea(
id = 'example-message-row',
placeholder='Enter message',
required = True),
width='auto')
])
dropdown = html.Div([
'Reason:',
dcc.Dropdown(
['Bug', 'Feedback', 'Feature/Metric Request', 'Other'], '', id='dropdown'),
html.Div(id='dd-output-container')
])
# Creating a function that will encompass all of the above fields into a container and a form
def contact_form():
form = html.Div([
dmc.Affix(
dbc.Button(
'Feedback',
id='open',
size='small'
),
position={
'top': 400,
'left': 1855
},
style={
'transform': 'rotate(-90deg)',
'position':'absolute'
}
),
dbc.Modal([
dbc.ModalHeader('Feedback'),
dbc.ModalBody('Send a message if you have a comment, question, or concern. Thank you!'),
dbc.Container([
html.Br(),
dbc.Card(
dbc.CardBody([dbc.Form([user_input, email_input, dropdown, message]),
html.Br(),
html.Div(
id = 'div-button',
children = [
dbc.Button(
'Submit',
color = 'primary',
id='button-submit',
n_clicks=0)
]) #end div
]),#end cardbody
),#end card
html.Br(),
html.Br()
])
], id='modal',
centered=True,
backdrop='static',
autoFocus=True,
fade=True) # end of modal
])
return form
# Creating the layout for the app
app.layout = html.Div([contact_form()])
