Блог

Главная - Вопросы по программированию - Как создать мастер в виде диаграммы последовательности при переполнении в HTML?

Как создать мастер в виде диаграммы последовательности при переполнении в HTML?

#html #css #formwizard

#HTML #css #formwizard

Вопрос:

Я хочу иметь форму мастера со слишком большим количеством шагов, я смог попасть в одну единственную прямую линию. Но когда просмотр на маленьком экране и переполнение содержимого происходит из коробки. Поэтому, чтобы избежать этого, я думаю сделать так, как показано на рисунке. Итак, как сделать это в HTML5, CSS3 и bootstrap без jQuery или каких-либо библиотек JS

введите описание изображения здесь

Вот ссылка на минимальный HTML-код

 <style>
    
.step-indicator {
    border-collapse: separate;
    display: block;
    margin-left: 0px;
    position: relative;
    table-layout: fixed;
    text-align: center;
    padding-left: 0;
    margin-bottom: 0;
    overflow-x: auto;
}

.step-indicator li {
    display: table-cell;
    position: relative;
    float: none;
    padding: 0;
    width: 1%;
}

.step-indicator li:after {
    background-color: #c8ced3;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    width: 100%;
    top: 20px;
}

.step-indicator li:after {
    left: 50%;
}

.step-indicator li:last-of-type:after {
    display: none !important;
}

.step-indicator li.active .step {
    border-color: #378ad8;
    color: #378ad8;
}

.step-indicator li.active .caption {
    color: #378ad8;
}

.step-indicator li.complete:after {
    background-color: #0cbb70;
}

.step-indicator li.complete .step {
    border-color: #0cbb70;
    color: #0cbb70;
}

.step-indicator li.complete .caption {
    color: #0cbb70;
}

.step-indicator .step {
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #c8ced3;
    color: #c8ced3;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    position: relative;
    width: 40px;
    z-index: 1;
}

.step-indicator .step:hover {
    cursor: pointer;
}

.step-indicator .caption {
    color: #c8ced3;
    padding: 11px 16px;
}

.step-indicator .caption span:hover {
    cursor: pointer;
}
</style>
<div class="container-fluid">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-12">
                <div class="card text-center">
                    <div class="card-body">
                        <ol class="step-indicator ps">
                            <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
                            <li>
                                <div class="step"><i class="step-icon fas fa-link"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>1</span></div>
                            </li>
                            <li class="ng-star-inserted active">
                                <div class="step"><i class="step-icon fas fa-search"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>2</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fas fa-poll"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>3</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fa cfa-datacenter"></i></div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>4</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fa fa-cube"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>5</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fa fa-fire"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>6</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fa fa-sitemap"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>7</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fa fa-balance-scale"></i></div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>8</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fa fa-laptop"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>9</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fa fa-database"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>10</span></div>
                            </li>
                            <li>
                                <div class="step"><i class="step-icon fa fa-clipboard"></i>
                                </div>
                                <div class="caption hidden-xs hidden-sm pb-0"><span>11</span></div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="col-12">
            </div>
        </div>
    </div>
</div>

Комментарии:

1. изучите медиа-запросы! Когда экран становится слишком маленьким, вы можете установить отображение вашей формы на none , а затем изменить отображение контейнера с вашим изображением в нем на block

2. Можете ли вы показать какой-либо из ваших текущих html, css, чтобы я мог воссоздать как можно больше вашей среды, чтобы помочь найти решение?

3. @DylanAnlezark Спасибо за вашу помощь. Я добавил HTML, CSS и ссылку на JSfiddle