How to correctly attach 'arrowed' block to the input above

Question

enter image description here

As you can see, I got it right when the list inside my block has only one row, but it's wrong when the list is bigger.

Since I can't select only those inputs followed by errors (see here), my current solution is a negative margin-top:

.errorlist {
    display: inline-block;
    position: relative;
    margin-left: 1em;
    margin-top: -1em;
    max-width: 30em;
    min-width: 10em;
    border-radius: 4px;
}
/* Arrow: */
.errorlist:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 10px;
    bottom: 100%;
    border-color: transparent transparent rgb(205, 10, 10) transparent;
    border-style: solid;
    border-width: 10px;
}
.errorlist li {
    margin: 0;
    padding: 0.5em;
}

Relevant HTML:

<div class="required">
     <p>
         <label for="id_username">Nombre de usuario:</label> 
         <input type="text" name="username" maxlength="30" id="id_username">
     </p>
     <ul class="errorlist ui-state-error">
         <li>Este campo es obligatorio.</li>
         <li>Este campo es obligatorio.</li>
     </ul>
</div>

EDIT: I've noticed that only the 2nd <li> is moving the block. I can add as many as I want and the block doesn't slide updwards any more.

@Keith yes, it does, but it makes the
block slide a bit upwards (the first input) — Adrián, Jul 19 '13 at 17:12
not sure if this is the case, but probably because of the style

score 1 · Accepted Answer · answered Jul 19 '13 at 18:13

1

If you modify the position of ul.errorlist using the top property rather than margin-top, the li elements will stay put, and you can tweak the top

like so: http://jsfiddle.net/bqxdj/

.errorlist {
    display: inline-block;
    position: relative;
    margin-left: 1em;
    top: -1.5em;
    max-width: 30em;
    min-width: 10em;
    border-radius: 4px;
}

answered Jul 19 '13 at 18:13

Dom Day

2,542
13
12

It works!, apparently. Any idea why only the 2nd `li` was moving the block? – Adrián Jul 19 '13 at 18:19
Honestly, no. It has something to do with the vertical alignment of inline block elements, and height calculations, but i ran out of patience to nail it down. I did learn more about border collapse than i ever wanted to know though. hah. – Dom Day Jul 19 '13 at 20:38

Madeyedexter · Answer 2 · 2013-07-19T17:38:04.377

0

list tags automatically adds a whitespace. To get rid of this try:

     <li>Este campo es obligatorio.</li><li>Este campo es obligatorio.</li>

or if you are safe with HTML5,

     <li>Este campo es obligatorio.
     <li>Este campo es obligatorio.

remove the end tag.

Hope this works.

EDIT: remove the margin-top:-1em http://jsfiddle.net/ymSKX/

edited Jul 19 '13 at 17:38

answered Jul 19 '13 at 17:20

Madeyedexter

1,155
2
17
33

:/ Sorry but the code is generated exactly as `
Este campo es obligatorio.
Este campo es obligatorio.

Adrián

Jul 19 '13 at 17:24

try the html5 version then – Madeyedexter Jul 19 '13 at 17:28

Done, it didn't change anything either :( . I will try with the div now, adding the `height:auto` to the ul would have the same effect? – Adrián Jul 19 '13 at 17:31

If I change the `display` to `block` the background expands to the whole page width, and without the negative margin the arrow doesn't actually touch the input :/ http://jsfiddle.net/ymSKX/3/ – Adrián Jul 19 '13 at 17:46

you will have to set margin-left accordingly – Madeyedexter Jul 19 '13 at 17:48

let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33795/discussion-between-madeyedexter-and-adrian-lopez) – Madeyedexter Jul 19 '13 at 17:51

How to correctly attach 'arrowed' block to the input above

2 Answers2