Tout d'abord, j'ai déjà essayé de rechercher comment rendre mon entrée dynamique en fonction de la largeur de ses données, mais toutes les réponses que j'ai pu voir proviennent de l'entrée qui n'est pas désactivée. Son déclencheur est à partir de la touche haut ou d'un clic qui n'est pas applicable au mien car mon entrée est désactivée.

Ceci est la capture d'écran de mon problème. Comme vous pouvez le voir, mon montant en mots en pesos est réduit et ne se développe pas dynamiquement.

enter image description here

Voici mon html:

<table width="100%">
    <tr>
         <td> 
           <div style="height:35px">
                   <div style="float:left" class="controlLabelBold">Check Number:</div>
                   <div style="float:left">
                     <input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
                   </div>
           </div>  
        </td>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Check Date:</div>
                   <div style="float:left">
                   <input name="checkDate" class="checkDate text ui-widget-content ui-corner-all"  style="width:250px;" readonly /></div>
           </div> 
        </td>
    </tr>
    <tr>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Client Name:</div>
                   <div style="float:left"><input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly /> </div>
           </div> 
        </td>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Amount:</div>
                   <div style="float:left"><input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/></div>
           </div> 
        </td>
    </tr>
    <tr>
        <td>
             <div style="height:35px">
                   <div style="float:left" class="controlLabel">Pesos:</div>
                   <div style="float:left"><input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all" 
                    style="min-width:250px;" readonly /></div>
           </div> 
        </td>
    </tr>
</table>

Question:

  • Est-il vraiment possible d'être dynamique même si mon entrée est désactivée? Si oui comment? si non pourquoi?

Exigences:

  • La largeur minimale de mes pesos d'entrée doit être de 250 pixels car elle doit être alignée sur d'autres entrées.

  • Mon problème ne concerne que l'entrée de Pesos

  • Les solutions HTML, CSS ou Javascript sont acceptées.

  • Je pense que je n'ai plus besoin d'inclure mes styles CSS car cela ne serait pas nécessaire. Si css est la solution, ajoutez simplement une nouvelle classe.

  • J'ai préparé un jsfiddle ici

3
bot 7 mars 2016 à 10:15

3 réponses

Meilleure réponse

En utilisant uniquement du CSS, on ne peut pas faire augmenter <input> sa taille en fonction du contenu. C'est possible via Javascript, cependant (voir la solution de Rayon Dabre).

Mais la réponse simple ici serait d'utiliser un élément qui se développe naturellement pour afficher son contenu, comme un <span>, et de le styliser pour ressembler à une entrée:

À partir de votre photo, je me rapproche de quelque chose de proche de:

span.disabledInput {
  display: inline-block;
  background-color: #F0F0F0;
  border-radius: 6px;
  border: 1px solid #EEE;
}

Vous pouvez même le rendre modifiable. Voici un exemple plus convaincant:

.form-control.disabledInput {
  height: initial;
  background-color: #eee;
  border: 1px solid #ccc;;
  display: inline-block;
  clear: left;
  width: auto;
  color: #666;
  box-sizing: border-box;
}
.form-control.disabledInput:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-group.col-xs-12 label {
  display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">

  <div class="row">
    <div class="form-group col-sm-6">
      <label for="checkNumber">Check Number:</label>
      <input type="password" class="form-control" name="checkNumber" id="checkNumber">
    </div>
    <div class="form-group col-sm-6">
      <label for="checkDate">Check Date:</label>
      <input type="text" class="form-control" name="checkDate" id="checkDate" readonly>
    </div>
    <div class="form-group col-sm-6">
      <label for="clientName">Client Name:</label>
      <input type="text" class="form-control" name="clientName" id="clientName" readonly>
    </div>
    <div class="form-group col-sm-6">
      <label for="amount">Amout:</label>
      <input type="text" class="form-control" name="amout" id="amount" readonly>
    </div>
    <div class="form-group col-xs-12">
      <label>Pesos:</label>
      <span type="text" tabindex="0" contenteditable="true" class="form-control disabledInput">To make this <code>span</code> not editable, remove the <code>contenteditable</code> attribute... <br />Don't forget to resize your browser!</span>
    </div>
  </div>

Si vous souhaitez faire correspondre le style exact, vous devez inspecter le <input> désactivé. Portez une attention particulière aux propriétés line-height, font-size, padding et margin. N'oubliez pas non plus d'ajouter l'attribut tabindex pour qu'il puisse être :focus édité, comme les vrais <input> de la page.

Maintenant, comme votre saisie est désactivée, c'est à peu près tout ce que vous devez faire.

Cependant, si votre fausse "entrée" n'était pas disabled, vous devriez y ajouter contenteditable="true". Et s'il devait faire partie de votre formulaire lors de la soumission, vous devriez également ajouter un <input type="hidden"> qui changerait sa valeur pour correspondre à la propriété .text de votre <span>. Encore une fois, le recours à JavaScript.

2
Community 23 mai 2017 à 11:50

Il ne se développe pas, car il fait partie de votre première colonne. Il ne peut tout simplement pas aller sur le deuxième.

Pour le réparer, ajoutez

<td colspan='2'>

Sur votre dernier TD (pour lui indiquer de prendre de l'espace des deux colonnes)

Exemple: http://reference.sitepoint.com/html/th/colspan/demoframe

1
Jurion 7 mars 2016 à 07:49

Considérez la constante statique comme la largeur du caractère qui ne peut pas être précise en passant car H et I ne peuvent pas consommer le même espace.

Essaye ça:

document.getElementById('amountInWords').style.width = document.getElementById('amountInWords').value.length * 7 + 'px'
<table width="100%">
  <tr>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabelBold">Check Number:</div>
        <div style="float:left">
          <input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
        </div>
      </div>
    </td>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabel">Check Date:</div>
        <div style="float:left">
          <input name="checkDate" class="checkDate text ui-widget-content ui-corner-all" style="width:250px;" readonly />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabel">Client Name:</div>
        <div style="float:left">
          <input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly />
        </div>
      </div>
    </td>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabel">Amount:</div>
        <div style="float:left">
          <input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabel">Pesos:</div>
        <div style="float:left">
          <input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all" style="min-width:250px;" value="One Thousand Nine Hundred Forty Nine Pesos only and this is fake msg" readonly />
        </div>
      </div>
    </td>
  </tr>
</table>
1
Rayon 7 mars 2016 à 07:41