Semantic UI - Why no message inside a Form?

Question

I'm using Semantic-UI and I was trying to add a warning message to my Form, like this:

<form>
    ...stuff...
    <div class="ui warning message">
        <div class="header">
            Title of the message
        </div>
        Text of the message
    </div>
</form>

But for some reason it wasn't showing up at all on the page. Only after I found out that it's because SemanticUI's own internal CSS rules explicitly hide messages inside forms. From semantic.min.css:

.ui.form .error.message, .ui.form .success.message, .ui.form .warning.message {
    display: none;
}

Why is this? Can I override it? Is there a reason why I shouldn't?

Willow

Answer 1

Well, I'm not 100% sure, but I'm guessing that the error / success / warning classes are used for form validation messages, thus the reason they are hidden by default. I solved the issue by using the specific color class rather than the warning one:

<form>
    ...stuff...
    <div class="ui yellow message">
        <div class="header">
            Title of the message
        </div>
        Text of the message
    </div>
</form>

This works perfectly and is visually indistinguishable from the warning one.

Willow

Answer 2

I also had the same issue. Not sure if you already have the answer, but for others visiting this post:

wrap you <form> with <div> with class "ui form error".

E.g.,

<div class="ui form error">
<form class="some class" method="POST" action="/some_acton">
..fields..
</form>
</div>

or

<form class="ui form error your_class" method="POST" action="/some_action">
..fields..
</form>

Bomb

Answer 3

Adding visible class to the message div works for me. Try this,

<div class="ui warning visible message">

Jackquelinejackrabbit

Answer 4

This was designed intentionally by Semantic-UI.

Putting error state to the form will make it works.

For Semantic UI HTML/CSS, check here

<div class="ui form error">
  <div class="field">
    <label>E-mail</label>
    <input type="email" placeholder="[email protected]">
  </div>
  <div class="ui error message">
    <div class="header">Action Forbidden</div>
    <p>You can only sign up for an account once with a given e-mail address.</p>
  </div>
  <div class="ui submit button">Submit</div>
</div>

For Semantic UI React, check here

import React from 'react'
import { Button, Form, Message } from 'semantic-ui-react'

const FormExampleError = () => (
  <Form error>
    <Form.Input label='Email' placeholder='[email protected]' />
    <Message
      error
      header='Action Forbidden'
      content='You can only sign up for an account once with a given e-mail address.'
    />
    <Button>Submit</Button>
  </Form>
)

export default FormExampleError

Wayzgoose

Answer 5

That is because the visible property is hidden by default. You can dynamically set the visible property to true by using the ngClass. For example:

<form class="ui form">
    <div class="field">
        <label for="x"> x </label>
        <input type="text" id="x">
        <div class="ui error message" [class.visible]="true">Error!</div>
    </div>
</form>

or

<form class="ui form">
    <div class="field">
        <label for="x"> x </label>
        <input type="text" id="x">
        <div class="ui error message" [ngClass]="{visible : true}>Error!</div>
    </div>
</form>

Clout

Answer 6

your write in css .form class but you not used to .form class so you can used only form tag in your css

try to this

form .ui.error.message, 
form .ui.success.message, 
form .ui.warning.message {
    display: none;
}

Churn

Have you even read what I wrote? Sorry, no offense, but this has nothing to do with my question. Point one: the CSS is the official one that comes with semantic-ui, it's not my CSS. Plus, I'm not trying to hide it, I'm trying to do the opposite. The CSS, in fact, is not incorrect, it works perfectly (which is what annoys me, as it hides my messages;)) – Willow