Position div at the bottom right of input

11
January 25, 2019, at 09:40 AM

I need to put the alert div position at the right corner of each input when created.

This is the function that creates the alert

function createAlert(inputName,errorNumber){
    var lang = getUrlParameter('lang');
    var alertText = {
        error0: {
            pt: "Erro",
            en: "Error",
        },
        error2: {
            pt: "O nome de usuário já está em uso",
            en: "The Username already is being used",
        },
        error3: {
            pt: "O endereço eletrónico já está em uso",
            en: "The Email already is being used",
        },
        error4: {
            pt: "O endereço eletrónico é inválido",
            en: "The Email inserted is invalid",
        },
        error5: {
            pt: "A password não coincide",
            en: "The passwords doesn't match",
        }
    }
    var alert ="<div class='alert' id='error"+errorNumber+"'><span class='alertCloseBtn' onclick='this.parentElement.style.display=\"none\";'>&times;</span>"+alertText["error"+errorNumber][lang]+"</div>";
    if(typeof $('#error'+errorNumber)[0] == 'undefined'){
        $('input[name='+inputName+']').after(alert);
    }else{
        $('#error'+errorNumber).remove();
        $('input[name='+inputName+']').after(alert);
    }
}

CSS

Answer 1

This is a javascript solution that will work better then css.

Read the comment to understand

var alert = $("<div class='alert'><span class='alertCloseBtn' onclick='this.parentElement.style.display=\"none\";'>&times;</span>this is error</div>"); 
var inputName= "sd" 
 
$('input[name='+inputName+']').after(alert); 
// here is to position the alert dynamicly. this is better then css where css dose not work sometimes and get a wrong positions 
var rect = $('input[name='+inputName+']')[0].getBoundingClientRect(); // input position 
 
// now position the alert box under the input 
alert.css({"left": rect.left, top:rect.height + rect.top , position:"absolute", "min-width": rect.width});
.alert 
{ 
min-height:100px; 
border:1px solid red; 
} 
 
div{ 
margin:auto; 
width:200px; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div> 
<input type="text" name="sd" value="" /> 
 
<div>

READ ALSO
Why do you have to add a classpath when trying to execute a java program from the embedded terminal in intellij?

Why do you have to add a classpath when trying to execute a java program from the embedded terminal in intellij?

I have just started using Intellij and wanted to run a simple java program from the embedded terminalI am using Ubuntu

49
Testing jdbc connection class

Testing jdbc connection class

I try to learn to test my projects correctly and continuouslyUnfortunately there are a few things I don‘t understand since there are a lot of different opinions on the topic

25
Alternative for while loop java?

Alternative for while loop java?

So im making a LED music visualizer with a music player, and its working and everything, but as soon as I press the unpause button that activates the while loop it freezesI know this is cause while loop breaks only after the condition turns to false but I cant figure...

20
object sent from ts frontend to java backend transforms into LinkedHashMap

object sent from ts frontend to java backend transforms into LinkedHashMap

I have a typescript frontend communicating with my java backend over RESTI just added another simple rest endpoint but sending the object to the backend and trying to cast it properly doesn't work because the sent body is a linkedHashMap?

22