Сообщение об ошибке пользовательского валидатора activ-bootstrap-table2 отображается в пользовательском интерфейсе

Question

Я написал валидатор ячеек согласно этому примеру (ниже приведена более короткая версия исходного кода):

{
    text: 'IPv4', 
    dataField: 'IPv4',
    validator: (newValue, row, column) => {
        if (!isValidIP(newValue)) {
            return {
                valid: false,
                message: 'Must be a valid IP address'
            };
        }
        return true;
    }
};

Логика работает хорошо, но по какой-то причине ошибкасообщение обрезано:

Обновление:

Я проверил HTML и увидел, что при проверкеМетод возвращает, в html-файл добавляется следующий компонент:

<div class="alert alert-danger in" role="alert">
    <strong>Must be a valid IP address</strong>
</div>

Когда я удалил свойство 'alert' из класса, сообщение появилось правильно:

<div class="alert-danger in" role="alert">
    <strong>Must be a valid IP address</strong>
</div>

Есть идеи, почему это происходит и как программно удалить предупреждение?

Answer 1

Хорошо, возникла проблема css из-за следующих конфигураций css:

.alert {
  left: -50%;
  z-index: 100;
}

После удаления сообщения об ошибке и текст ячейки были выровнены.