Validator message not aligned with the cell

[omeraha]

Hi,

I wrote a cell validator according to this example (following is a shorter version of the original code):

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

The logic works well, but for some reason the error message isn't aligned with the field and doesn't fully appear:

Update:

I inspected the html, and saw that when the validation method returns, the following component is added to the html file:

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

When I removed the 'alert' property from the class, the message appeared properly:

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

Am I doing something wrong here? Can I somehow remove the 'alert' attribute from the returned component?

[omeraha]

Found the problem. The misalignment were due to the following css configurations:

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