I was playing around with CSS a bit and I decided to create a little guide/tutorial on styling the Outsystems input validation, without the use of javascript ofcourse! (Outsystems does a few useful things we can use for this!)

So my goal is to create a tooltip box like error message, instead of directly showing the text below the input (sometimes I don't have space :( )
And to style the input a bit differently.

Outsystems uses a few classes for the input error messages, .ValidationMessage for the error message and it places a .Not_Valid class on the input element itself.

First I want to be able to select the validation message (this is only added to the DOM if it has something to show!)
We can do this as follows:

select ~ .ValidationMessage, input ~ .ValidationMessage {...} 

We are trying to get select and input elements (sadly select does not fall under the input selector)
I'm using a ~ (tilde) symbol to be able to select the .ValidationMessage after my select or input element (some custom input widgets place some content directly after the input, which makes using + useless...., if you do not use any custom widgets but only the pure inputs you can use + if you want).

I've taken the w3c example for  tooltips for the styling, so our final code for the tooltip will be as follows:

/* This is to style the black box containing the text */
select ~ .ValidationMessage, input ~ .ValidationMessage {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

/* This is the show a little arrow pointing to our input */
select ~ .ValidationMessage, input ~ .ValidationMessage::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

But wait, now we don't see any message!

That's correct, because we still have to toggle this message somehow (I want to do this using a hover)

So when we hover on our input, we want to show this error message, we can do this as follows:

select:hover ~ .ValidationMessage, input:hover ~ .ValidationMessage {visibility: visible;} 

You can also choose to do this with :focus or :active.

Now I want to style the input itself aswell!

Outsystems adds the .Not_Valid class to an input which has it's valid property set to false.

select.Not_Valid, input.Not_Valid {
    visibility: visible;outline: none;
    border: 1px solid rgba(255, 0, 0, 0.7);
    box-shadow: 0px 0px 10px orangered;
}

This gives it a nice little glowy effect, again you can choose to use :hover, :focus or :active to change the styling (maybe you want to make the glow blue or orange if the input is selected?)


This shows how easy it is to work with the Outsystems platform, with just a bit of CSS I can make use of the things Outsystems does for me and create some awesome styling!

*Note for this to work you need a div containing your input and have styling set on that div set to position:relative;


Original:

Result:


Resources: https://www.w3schools.com/css/css_tooltip.asp

Nice work Joey! You can create a component for this, maybe...

But I'd recommend studying a way of not forcing us to wrap the fields in a div. It should be smoother in order to have better adoption.

My congrats!

João Melo wrote:

Nice work Joey! You can create a component for this, maybe...

But I'd recommend studying a way of not forcing us to wrap the fields in a div. It should be smoother in order to have better adoption.

My congrats!


I was thinking about that, but creating a component for 3-4 style rules?

I've been trying to find out a way to use it without a div, but the tooltip needs a shared parent with the input sibling to determine it's positioning.

It is though possible to create tooltips using an attribute (and playing around with ::before and ::after), because then it can be relative to the element the attribute is set to. This however, does not work with the Outsystems validation messages :(


Example: https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346?gi=df3e551dc7d3


Create a component and add some jQuery to it that creates the div parent tag for each input and select html tags.  Instead of a div, just create your own tag name: <errorToolTip> and maybe add a CSS class to it as well.  The CSS selectors could then probably be simplified to trigger off the just parent tag or parent class and OS Not_Valid class.

Joey Moree wrote:

João Melo wrote:

But I'd recommend studying a way of not forcing us to wrap the fields in a div. It should be smoother in order to have better adoption.

Nice post! It shows that with a small amount of CSS styling in OutSystems you can have really different user experience. 

Solution

I had a solution for this problem, instead of styling it relative to the parent.
I set the display to inline-block for the validation message.

So the total styling is as follows (I can't seem to edit my original post):

/* This is to style the black box containing the text (you can fiddel around with this to position it above, below, right or left) */
select ~ .ValidationMessage, input ~ .ValidationMessage {
    visibility: hidden;
    width: 120px;
    display: inline-block;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: relative;
    z-index: 1;
    top: 35px;
    right: 5%;
    margin-left: -60px;
}

/* This is the show a little arrow pointing to our input (you can fiddle around with this to get an arrow to the left, right, above or bottom) */
select ~ .ValidationMessage, input ~ .ValidationMessage::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

/* When hovering on top of a input we want to show the validation message (you can change hover to active or focus if you like) */
select:hover ~ .ValidationMessage, input:hover ~ .ValidationMessage {
    visibility: visible;
}

/* Create a nice reddish border if the input is not valid */
select.Not_Valid, input.Not_Valid {
    visibility: visible;
    outline: none;
    border: 1px solid rgba(255, 0, 0, 0.7);
    box-shadow: 0px 0px 10px orangered;
}
Solution