Div positionné par rapport donne min-largeur sauf si le contenu est plus large

Question

J'ai une position div: relative (cela ne devrait pas importer). Je voudrais m'assurer que la largeur est une largeur particulière à moins que le contenu soit plus grand. J'ai essayé min-largeur, mais il semble être ignoré. La définition explicite de la largeur force également les sauts de ligne lorsque le contenu du texte est plus large que la largeur.

<div style="padding-top:6px; max-height:40px;"> 
    <input type="text" id="lname" placeholder="LAST NAME"> 
    <div id="lnameError" class="error-block">Please enter a valid last name</div> 
</div> 

.error-block { 
    border: solid 1px #e60211; 
    background-color: #ffffff; 
    min-width: 250px;  
    display:none; 
    position: relative; 
    left: 288px; 
    top: -40px; 
    font-size: 16px; 
    color: #e60211; 
    font-family:MontrealTS-Regular; 
    line-height:38px; 
    text-align:left; 
    padding-left:12px; 
    padding-right:12px; 
} 

$('#lname').focusout(function() { 
     if ($(this).val().length < 3) { 
      $(this).next().animate({ 
       opacity: "show" 
      }, "slow", "jswing"); 
     } 
    }); 

Si j'utilise display: inline-block le positionnement et la taille sont incorrects après l'animation. Si je ne mets aucune valeur d'attribut d'affichage dans le CSS et une valeur d'opacité de 0 dans le CSS, le bloc ne montre jamais.

Answer 1

Si votre élément a une valeur par défaut de display: block qui prendra toute la largeur, vous feriez mieux de spécifier display: inline-block; ou display: table;

$('#lname').focusout(function() { 
 
    if ($(this).val().length < 3) { 
 
    $(this).next().fadeTo("slow", 1, function() { 
 
     // Animation complete. 
 
    }); 
 
    } 
 
});

.error-block { 
 
    border: solid 1px #e60211; 
 
    background-color: #ffffff; 
 
    min-width: 250px; 
 
    display: inline-block; 
 
    position: relative; 
 
    /* left: 288px; */ 
 
    /* top: -40px; */ 
 
    font-size: 16px; 
 
    color: #e60211; 
 
    font-family: MontrealTS-Regular; 
 
    line-height: 38px; 
 
    text-align: left; 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="padding-top:6px; max-height:40px;"> 
 
    <input type="text" id="lname" placeholder="LAST NAME"> 
 
    <div id="lnameError" class="error-block">Please enter a valid last name</div> 
 
</div>