it-swarm.com.ru

оповещение о загрузке в фиксированном плавающем div в верхней части страницы

У меня есть веб-приложение, которое использует загрузчик (2.3.2 - корпоративная политика, мы не можем перейти на 3.0 без большого тестирования нескольких веб-приложений). У нас есть несколько длинных страниц в этом приложении, которые требуют проверки форм и таблиц - однако по практическим и эстетическим причинам нам нужно, чтобы предупреждающее сообщение отображалось в виде плавающего элемента div в верхней части страницы.

Это будет фиксированный плавающий элемент div, который можно отображать и скрывать с помощью javascript по мере необходимости. Эта часть работает, и я могу контролировать этот div, когда мне нужно высказать некоторую информацию пользователю или если произойдет какая-то ошибка.

Макет выглядит так:

<div id="message">
    <div id="inner-message" class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        test error message
    </div>
</div>

Стиль ниже:

#message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#inner-message {
    margin: 0 auto;
}

Div #message ведет себя хорошо и хорошо, но когда я пытаюсь добавить некоторые отступы к div #message (чтобы попытаться получить некоторое пространство между краем страницы и div, то есть padding: 5px), div получает только padding слева и сверху, а остальная часть div выталкивается слишком далеко вправо от страницы (скрывая часть символа «x» внутри предупреждения о загрузке).

Кто-нибудь испытывал это раньше? Это кажется достаточно простой проблемой, поэтому я что-то упускаю?

34
Husman

Просто оберните свое внутреннее сообщение в div, к которому вы примените свой отступ: http://jsfiddle.net/Ez9C4/

<div id="message">
    <div style="padding: 5px;">
        <div id="inner-message" class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            test error message
        </div>
    </div>
</div>
31
dpellier

Если вы хотите, чтобы оповещение было зафиксировано сверху, и вы используете начальную загрузку navbar navbar-fixed-top, следующий класс стилей будет перекрывать их оповещения поверх навигации:

.alert-fixed {
    position:fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%;
    z-index:9999; 
    border-radius:0px
}

Это хорошо для меня, чтобы обеспечить оповещения, даже когда пользователь прокручивается вниз на странице.

41
Derek

Я думаю, что проблема заключается в том, что вам нужно обернуть div в контейнер и/или строку. 

Это должно выглядеть примерно так, как вы ищете: 

<div class="container">
    <div class="row" id="error-container">
         <div class="span12">  
             <div class="alert alert-error">
                <button type="button" class="close" data-dismiss="alert">×</button>
                 test error message
             </div>
         </div>
    </div>
</div>

CSS:

#error-container {
     margin-top:10px;
     position: fixed;
}

Bootply demo

5
Dan

Другие предлагают обтекание div, но вы должны быть в состоянии сделать это, не усложняя свой HTML ...

проверь это:

#message {
  box-sizing: border-box;
  padding: 8px;
}
3
thykka

Вы можете использовать этот класс: class="sticky-top alert alert-dismissible" 

2
ibrahim konuk

Простейшим подходом было бы использовать любые из этих утилит класса, которые предоставляет Bootstrap:

<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>

https://getbootstrap.com/docs/4.0/utilities/position

0
tfmontague