#python #html #css #plotly-dash
#python #HTML #css #плотный тире
Вопрос:
У меня есть приложение Django-Dash-Plotly, я пытаюсь решить проблему, которая у меня есть, когда справа от экрана появляется полоса белого. Посмотрите на картинку ниже, обратите внимание на небольшое, но дополнительное количество пустого пространства, из-за которого мой адаптивный макет допускает дополнительную прокрутку по ширине (я хочу, чтобы мое приложение соответствовало размеру экрана).
Существуют ли какие-либо свойства HTML или CSS, которые неосознанно добавляют это пустое пространство?
Вот мой макет Dash и мета-теги HTML
app = DjangoDash('StockBuckets', add_bootstrap_links=True, external_stylesheets=[dbc.themes.LUX], suppress_callback_exceptions = True, meta_tags=[
{"name": "viewport", "content": "width=device-width, initial-scale=1, maximum-scale=1.2, minimum-scale=0.5"}])
body = html.Div(
[dbc.Jumbotron(
[
dbc.Container(dcc.Dropdown(id="dynamic-dropdown", options=options, multi=True, placeholder="Enter Symbols of Interest"),
fluid=True
)
],
style = {'background-color': '#68d984'}, fluid=True,
)
, dbc.Row(dbc.Col(html.Div([
],id='output-graph'),lg=8, md=11, xs=12),justify="center")
, html.Div(style={"width":"100%", "height":'25px'})
, dbc.Row([
dbc.Col(children=[
],id='quickfacts',lg=4, md=11, xs=12)
, dbc.Col(children=[
], id='returnrates',lg=7, md=11, xs=12)
], justify="center", align="center")
, html.Div(style={"width":"100%", "height":'25px'})
, dbc.Row(dbc.Col(children=[
], id='advancedstats', lg=11, md=11, xs=12), justify="center", align="center")
, html.Div(style={"width":"100%", "height":'25px'})
, dbc.Row([dbc.Col(children=[
],id= 'nextreport',lg=4, md=4, xs=12)
, dbc.Col(children=[
],id='nextdividend',lg=4, md=4, xs=12)
], justify="center"),
])
мой index.html файл для Django
{% extends 'base.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
{% load plotly_dash %}
{% plotly_header %}
</head>
<body>
{% block page_content %}
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">Compare Equities in the SP500</h1>
<p class="lead">Invest smarter, use data to your advantage <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-lightning" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09zM4.157 8.5H7a.5.5 0 0 1 .478.647L6.11 13.59l5.732-6.09H9a.5.5 0 0 1-.478-.647L9.89 2.41 4.157 8.5z"/>
</svg> </p>
<!--<ul class="list-unstyled">
<li> <span class="badge badge-primary">New</span> features coming soon.</li>
</ul> -->
</div>
</div>
</div>
{% plotly_direct name='StockBuckets' %}
</body>
{% plotly_footer %}
{% endblock %}
</html>
Поскольку я использую Dash, код HTML и CSS немного растянут. Чтобы упростить задачу, вот некоторые другие стили CSS, которые я использую margin-top , margin-left , padding , width .
Был бы очень признателен за то, как избавиться от этого раздражения! Спасибо.
Редактировать:
Обнаружена проблема с двумя элементами div: 
Обратите внимание на 405 пикселей для ширины? Когда экран устройства, который я использую, равен 375px. Это то же самое для следующего div ниже этого. Я играю с заполнением и размером экрана, но я понятия не имею, почему у этих двух html.Div() есть дополнительная ширина…
Комментарии:
1. Я подозреваю, что это вызвано тем, что один из ваших дочерних элементов имеет большую ширину, чем родительский. Попробуйте проверять по одному элементу за раз в режиме инспектора, чтобы вы могли узнать, у которого больше ширина, отступы и т. Д. Предоставьте рабочий пример или воспроизводимый код, чтобы можно было более конкретно рассказать о проблеме.
2. @AmarenderReddy Спасибо за ваш комментарий. В настоящее время я проверяю элементы с помощью инструментов разработчика Google Chrome, хотел бы я предоставить некоторый воспроизводимый код, чтобы помочь.
3. Итак, я вижу, что некоторые из
html.Div()них имеют большую ширину, чем экран. Знаете ли вы, почему это произойдет автоматически?4. Вы должны быть на правильном пути, используя Inspect. Быстрый совет: нажмите Del на каком-нибудь корневом элементе. Вы можете нажать Ctrl Z , чтобы отменить. Но для меня я просто пытаюсь удалять все, пока не увижу желаемое изменение, затем вы медленно приближаетесь к дочерним элементам, и в конечном итоге вы найдете виновника. Иногда проблема возникает не из-за одного элемента, а из-за взаимодействия нескольких элементов.
5. Я нашел виновника, их два. Пожалуйста, посмотрите Мой пост OG, может быть, вы знаете, почему два элемента div имеют дополнительную ширину на 30 пикселей больше…
Ответ №1:
Это из-за минимальной ширины, указанной где-то. Выберите элемент с шириной 405 пикселей и добавьте минимальную ширину: сбросить значение;
Комментарии:
1. Итак, я внес эти изменения, ничего не изменилось. Грустное лицо.
2. Используете ли вы какую-либо библиотеку, такую как bootstrap. Если это так, используйте min-width: unset !важно;
3. Да, я использую bootstrap, я думал, что исправил это, изменив размер меньших экранов (в стилях начальной загрузки) с 12 на 11. Но на самом деле я был неправ. Мне не удалось это исправить.
4. Хорошо, я просто решил это, добавив
style = {'width': '100vw'}к каждому компоненту начальной загрузки в моем приложении Dash.5. Я бы посоветовал не указывать width: 100vw для каждого элемента. Просто укажите требуемую ширину для родительского элемента и добавьте ширину: 100% к дочерним компонентам. Если вы это сделали, проигнорируйте мой комментарий.