web-dev-qa-db-fra.com

Table réactive Bootstrap avec entrée de formulaire largeur minimum

J'essaie de créer une table sensible qui contient des entrées de formulaire pour plusieurs colonnes. D'après ce que j'ai compris, les tables réactives rétrécissent jusqu'à ce que leurs colonnes ne puissent plus aller plus loin, puis elles ajoutent un scroller. Cependant, les colonnes sont réduites au point où je ne peux pas voir les valeurs dans le champ de saisie. J'ai donc besoin d'un moyen pour imposer une largeur minimale à ces colonnes au lieu de la déterminer en fonction de la longueur du texte d'en-tête de colonne. 

J'ai essayé d'ajouter min-width: "10%" ou "150px" à tous les éléments de la colonne, mais cela n'a pas fonctionné. Voici ma configuration:

<form class="form-horizontal">
    <div class="table-responsive">
        <table class="table table-bordered table-striped table-highlight">
            <thead>
                <th>Name</th>
                <th>Date</th>
                <th>Cost</th>
                <th>Billing Type</th>
                <th>Tax</th>
                <th>Other Col</th>
                <th>Other Col</th>
                <th>Other Col</th>
                <th>Total</th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="form-control" value="Some Long Name Here"/></td>
                    <td><input type="text" class="form-control" value="13-Jul-2015"/></td>
                    <td><input type="text" class="form-control" value="$12355.12"/></td>
                    <td>
                        <select class="form-control">
                            <option>Monthly</option>
                            <option>Yearly</option>
                        </select>
                    </td>
                    <td><input type="text" class="form-control" value="another long value"/></td>
                    <td><input type="text" class="form-control" value="some val"/></td>
                    <td><input type="text" class="form-control" value="some val"/></td>
                    <td><input type="text" class="form-control" value="some val"/></td>
                    <td>$505.79</td>
                </tr>
            </tbody>
        </table>
    </div>
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-highlight">
      <thead>
        <th>Name</th>
        <th>Date</th>
        <th>Cost</th>
        <th>Billing Type</th>
        <th>Tax</th>
        <th>Other Col</th>
        <th>Other Col</th>
        <th>Other Col</th>
        <th>Total</th>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" class="form-control" value="Some Long Name Here" /></td>
          <td><input type="text" class="form-control" value="13-Jul-2015" /></td>
          <td><input type="text" class="form-control" value="$12355.12" /></td>
          <td>
            <select class="form-control">
                            <option>Monthly</option>
                            <option>Yearly</option>
                        </select>
          </td>
          <td><input type="text" class="form-control" value="another long value" /></td>
          <td><input type="text" class="form-control" value="some val" /></td>
          <td><input type="text" class="form-control" value="some val" /></td>
          <td><input type="text" class="form-control" value="some val" /></td>
          <td>$505.79</td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

Comme vous pouvez le constater, certaines valeurs de champ sont coupées lorsque la table est réduite. Toute aide est appréciée.

Edit: je voudrais like _ continuer à utiliser les tables en raison de la préservation du code hérité. Cependant, je suis ouvert à toute solution si besoin est.

htmltwitter-bootstraptwitter-bootstrap-3
12
robarelli

Le css par défaut de .form-control force ce comportement, vous devez donc changer le css de votre champ d'entrée comme ceci:

input.form-control {
  width: auto;
}
13
katwhocodes

La largeur de la colonne sera dynamique car l'utilisateur peut entrer n'importe quelle valeur de longueur! Enveloppez les champs de saisie dans un div, définissez la largeur de div de manière dynamique en utilisant JavaScript:

                <tr>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" size="80" value="Some Long Name Here"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="13-Jul-2015"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="$12355.12"/></div></td>
<td>
    <select class="form-control">
        <option>Monthly</option>
        <option>Yearly</option>
    </select>
</td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)"  type="text" class="form-control" value="another long value"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)"  type="text" class="form-control" value="some val"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)"  type="text" class="form-control" value="some val"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)"  type="text" class="form-control" value="some val"/></div></td>
<td>$505.79</td>
            </tr>

Et la fonction JS:

 <script>
 function updateWidth(textbox) {
         $(textbox).parent().css("width",(textbox.value.length + 2) + "em");
 }
 </script>
0
Charchit