Input required message SilkUI style like London Theme style

Input required message SilkUI style like London Theme style

  

Hi all,


Is it possible to have the "Required field!" message in SilkUI themes to appear like the London one?

I am asking this because when we have two or three columns in row it will break the align when the message appears.


Abílio Matos

Solution

Hello Abilio,

Afaik, this is just a matter of styling. Inspect for the messages in the HTML to learn the classes and structure used, and apply a new CSS to make the message appear as you wish.

Cheers.

Solution

Hi Abilio,

A complement to Eduardo's suggestion is to try the SilkUI Liverpool theme that is very similar to London.


I did a small test and the mandatory message looks like the one you need:


Hope it helps.


Cheers,

Renato

Abilio Matos wrote:

Hi all,


Is it possible to have the "Required field!" message in SilkUI themes to appear like the London one?

I am asking this because when we have two or three columns in row it will break the align when the message appears.


Abílio Matos



Renato Torres wrote:

Hi Abilio,

A complement to Eduardo's suggestion is to try the SilkUI Liverpool theme that is very similar to London.


I did a small test and the mandatory message looks like the one you need:


Hope it helps.


Cheers,

Renato

Abilio Matos wrote:

Hi all,


Is it possible to have the "Required field!" message in SilkUI themes to appear like the London one?

I am asking this because when we have two or three columns in row it will break the align when the message appears.


Abílio Matos



Renato,

You have understood it in a way that is contrary to what i want. I would like to apply on a web app with Liverpool Them the look that validation message has on London Theme, since the validation messages breaks the align in my form when they appear. Check images below:

The top one is the "normal" form and the bottom shows the validation.


Thanks for your answer anyway.

Abílio Matos

Eduardo Jauch wrote:

Hello Abilio,

Afaik, this is just a matter of styling. Inspect for the messages in the HTML to learn the classes and structure used, and apply a new CSS to make the message appear as you wish.

Cheers.


Eduardo,

Thank you for your reply. Going to check classes applied to the messages and check the CSS.


Abílio Matos

I will leave here the CSS classes that need to be changed on Liverpool Theme (Ibelieve it the same for others SilkUI themes, since this classes if appear, are in Patterns_SilkUI) if anyone needs to do the same changes.


SyntaxEditor Code Snippet

.ValidationMessage {
    font-size: 11px;
    display:none;
    color: #bf1601;
    position: absolute;
    border: 1px solid #bf1601;
    background-color: #fbd4c5;
    padding: 4px 10px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    margin-left: -1px;
    white-space: nowrap;
    z-index:100;
}

.Not_Valid:focus~.ValidationMessage {
    display:inline-block;
}


Abílio Matos

Nice!

Abilio Matos wrote:

I will leave here the CSS classes that need to be changed on Liverpool Theme (Ibelieve it the same for others SilkUI themes, since this classes if appear, are in Patterns_SilkUI) if anyone needs to do the same changes.


SyntaxEditor Code Snippet

.ValidationMessage {
    font-size: 11px;
    display:none;
    color: #bf1601;
    position: absolute;
    border: 1px solid #bf1601;
    background-color: #fbd4c5;
    padding: 4px 10px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    margin-left: -1px;
    white-space: nowrap;
    z-index:100;
}

.Not_Valid:focus~.ValidationMessage {
    display:inline-block;
}


Abílio Matos