Ребенок, оставляющий родителя на левой стороне - PullRequest
Новая
       4

Ребенок, оставляющий родителя на левой стороне

0 голосов
/ 03 октября 2019

У меня есть canvas предмет внутри контейнера. Я ожидаю, что canvas не сможет пройти мимо контейнера с левой стороны. Я попробовал несколько решений здесь, но мне еще не повезло. Моя легенда будет скрыта внутри контейнера, но как только контейнер достигнет правой границы моего графика, контейнер начнет смещать диаграмму влево за пределы контейнера.

CSS: 

.chart-container{
    display: flex;
    flex-direction: row;
    border: 1px solid red;
    justify-content: center;
}
#totalChartLegend, #pdChartLegend {
    list-style-type: square;
    list-style-position: inside;
    cursor: pointer;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #666;
    overflow-y: auto;
    overflow-x: hidden;
    height: 280px;
    width: 140px;


    border: 1px solid green;
    margin-top: 40px;
    text-align: left;
    white-space: nowrap;
}
#totalChartLegend li, #pdChartLegend li{
  display: block;

}
#totalChartLegend li.hidden, #pdChartLegend li.hidden{
  color: rgba(102, 102, 102, .4);
}
#totalChartLegend li span, #pdChartLegend li span{
  display: inline-block;
  height: 15px;
  width: 35px;
  margin-right: 10px;

}
#totalChart, #pdChart{
    border: 1px solid blue;

}

HTML 

<section id="totalChartContainer" class="chart-container">
    <canvas id="totalChart" width="900" height="400"></canvas>
    <span id="totalChartLegend"></span>
</section>

Изображение (синий = ребенок, красный = родитель)

enter image description here

РЕДАКТИРОВАТЬ 1

Моя диаграмма переместится полностью в левую часть браузера, если я продолжу сворачивать ширину браузера.

Ответы [ 2 ]

0 голосов
/ 04 октября 2019

Вы можете использовать этот код 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }        
        .chart-container {
            display: flex;
            flex-direction: row;
            border: 1px solid red;
            justify-content: center;
        }        
        #totalChartLegend,
        #pdChartLegend {
            list-style-type: square;
            list-style-position: inside;
            cursor: pointer;
            font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
            font-weight: bold;
            font-size: 15px;
            color: #666;
            overflow-y: auto;
            overflow-x: hidden;
            height: 280px;
            width: 140px;
            border: 1px solid green;
            margin-top: 40px;
            text-align: left;
            white-space: nowrap;
        }        
        #totalChartLegend li,
        #pdChartLegend li {
            display: block;
        }        
        #totalChartLegend li.hidden,
        #pdChartLegend li.hidden {
            color: rgba(102, 102, 102, .4);
        }        
        #totalChartLegend li span,
        #pdChartLegend li span {
            display: inline-block;
            height: 15px;
            width: 35px;
            margin-right: 10px;
        }        
        #totalChart,
        #pdChart {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <section id="totalChartContainer" class="chart-container">
                <canvas id="totalChart" width="900" height="400"></canvas>
                <span id="totalChartLegend"></span>
            </section>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
0 голосов
/ 03 октября 2019

Изменен родительский CSS на 

.chart-container{
    display: flex;
    flex-direction: row;
    border: 1px solid red;
    justify-content: center;
    min-width:900px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...