Bootstrap dismissible alert keeps showing on the page load

Question

 <div class="alert alert-warning alert-dismissible " aria-hidden="true">
       <button type="button" class="close " aria-hidden="true" data-dismiss="alert">&times;</button>
       <strong th:text="${error}"></strong>
 </div>

Though I have used aria-hidden="true" the alert keeps showing on the page load as it is shown in the image. Any quick advice please?

And what exactly is it you think `aria-hidden` does? – Phil May 21 '18 at 04:37 — Phil, May 21 '18 at 04:37
Perhaps try adding `th:if="${error}"` to your `
`
– Phil May 21 '18 at 04:39 — Phil, May 21 '18 at 04:39
th:if="${error}" this worked. thanks – GeekySelene May 21 '18 at 05:12 — GeekySelene, May 21 '18 at 05:12

score 0 · Accepted Answer · answered May 21 '18 at 05:51

0

From this wonderful answer

The aria-hidden property tells screen-readers if they should ignore the element

What you want is to hide the element if there is no error. For this, use

th:if="${error}"

on your <div> element.

answered May 21 '18 at 05:51

Phil

157,677
23
242
245

Bootstrap dismissible alert keeps showing on the page load

1 Answers1