Questions about validators error msg placement

[12u...@gmail.com]

Hi Nitrogeners,

I don't know if it is due to the use of the boostrap framework (through coldstrap), but I have a problem with validators error message placement : when an error is triggerred, these messages appear underneath the input zones AND underneath anything that could have been at this place formerly :

When it is, like the picture I joined, for a register page, it's not really a concern, however on a complicated page where input zones are glued vertically, it is, as no error message is no more visible :/

The code for the image above is :

    Body = [
        %% Layout shamelessly copied from https://github.com/login
        #strong { body=[#p { style="padding-top:12px;", text=" " }]}

        , #panel { id=offer_main_panel, class="container-fluid", body=[
            %% ------ ROW# 1 - Logo
            #bs_row { class="row jy-no-gutters", body=[
                #panel { class="offset-sm-4 col-sm-4"
                    , style="text-align:center", body=[
                        #image { alt="Logo picture", image="/images/logo.png" }
                ]}
            ]}
            %% ------ ROW# 2 - Main text
            , #bs_row { class="row jy-no-gutters", body=[
                #panel { class="offset-sm-4 col-sm-4"
                    , style="text-align:center", body=[
                        #h4 { text="Register to My Blog" }
                ]}
            ]}
            %% ------ ROW# 3 - E-Mail address text
            , #bs_row { class="row jy-no-gutters", body=[
                #panel { class="offset-sm-4 col-sm-4", body=[
                    %% Note that to be taken in account, this (invisible)
                    %% paragraph MUST print an unbreakable space
                    #p { text=" " }%"Email address" }
                ]}
            ]}
            %% ------ ROW# 4 - E-Mail
            , #bs_row { class="row jy-no-gutters", body=[
                #panel { class="offset-sm-4 col-sm-4", body=[
                    #txtbx { id=login_email
                        , placeholder="Enter your E-Mail address"
                        , type=email
                        , maxlength=256
                        , next=login_email_check
                    }
                ]}
            ]}

[…]

]

, Body.

There is another problem that is shown in the above picture, in this configuration, error messages go underneath their input zone, how could I put them on the same line, as, in this example, there is a ton of free place to the right of these zones, which is much more comprehensible for users ?

[Jesse Gumm]

Same with this one:

Really, this will require just tinkering with the CSS:

The simplest would probably be adding this:

.LV_validation_message {

    display: inline-block;

    position:relative;

}

Which would just push the fields below it down like this:

But you could get a little fancier with this and do something like this:

.LV_validation_message {

    display: inline-block;

    position:relative;

    float:right;

    right: 2px;

    top:-35px;

}

Which would put the error message in the box itself (roughly)

I hope that helps and sorry for not responding sooner.

-Jesse

--
You received this message because you are subscribed to the Google Groups "Nitrogen Project / The Nitrogen Web Framework for Erlang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nitrogenweb...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nitrogenweb/20d2ad54-0414-4b69-a7c3-1df300e211e6n%40googlegroups.com.

--

Jesse Gumm
Owner, Sigma Star Systems
414.940.4866 || sigma-star.com || @jessegumm