CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgoogle-chrome
Mahendran Sakkarai
Mahendran Sakkarai

Reputation: 8539

issue on class input-group in table bootstrap 3

I'm using bootstrap latest version(Bootstrap v3.3.5). I'm trying to add a input-group to use date picker in a table like below. 

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Fees Name</th>
      <th>Amount</th>
      <th>Last Date</th>
    </tr>
  </thead>
  <tbody class="clubbedfeebody">
    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][0][clubbedFeesName]" id="Fees_0_0_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][0][amount]" id="Fees_0_0_amount" type="text" />
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" name="Fees[0][0][lastDate]" id="Fees_0_0_lastDate" type="text" maxlength="100" />	<span class="input-group-addon">
    				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][1][clubbedFeesName]" id="Fees_0_1_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][1][amount]" id="Fees_0_1_amount" type="text" />
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" name="Fees[0][1][lastDate]" id="Fees_0_1_lastDate" type="text" maxlength="100" />	<span class="input-group-addon">
    				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][2][clubbedFeesName]" id="Fees_0_2_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][2][amount]" id="Fees_0_2_amount" type="text" />
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" name="Fees[0][2][lastDate]" id="Fees_0_2_lastDate" type="text" maxlength="100" />	<span class="input-group-addon">
    				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][3][clubbedFeesName]" id="Fees_0_3_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][3][amount]" id="Fees_0_3_amount" type="text" />
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" name="Fees[0][3][lastDate]" id="Fees_0_3_lastDate" type="text" maxlength="100" />	<span class="input-group-addon">
    				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

When i use a empty textbox inside the table its works fine like below.

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Fees Name</th>
      <th>Amount</th>
      <th>Last Date</th>
    </tr>
  </thead>
  <tbody class="clubbedfeebody">
    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][0][clubbedFeesName]" id="Fees_0_0_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][0][amount]" id="Fees_0_0_amount" type="text" />
      </td>
      <td>
        <input placeholder="Last Date" class="form-control" name="Fees[0][0][lastDate]" id="Fees_0_0_lastDate" type="text" />
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][1][clubbedFeesName]" id="Fees_0_1_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][1][amount]" id="Fees_0_1_amount" type="text" />
      </td>
      <td>
        <input placeholder="Last Date" class="form-control" name="Fees[0][1][lastDate]" id="Fees_0_1_lastDate" type="text" />
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][2][clubbedFeesName]" id="Fees_0_2_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][2][amount]" id="Fees_0_2_amount" type="text" />
      </td>
      <td>
        <input placeholder="Last Date" class="form-control" name="Fees[0][2][lastDate]" id="Fees_0_2_lastDate" type="text" />
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][3][clubbedFeesName]" id="Fees_0_3_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][3][amount]" id="Fees_0_3_amount" type="text" />
      </td>
      <td>
        <input placeholder="Last Date" class="form-control" name="Fees[0][3][lastDate]" id="Fees_0_3_lastDate" type="text" />
      </td>
    </tr>
  </tbody>
</table>

But when i use it with input-group class it occupies 75% of the table in chrome only. In firefox its working fine. I also tried with changing the width and also tried with adding float. It reduces the width of the input-group only. I added the codes which I worked. But nothing worked.

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Fees Name</th>
      <th>Amount</th>
      <th>Last Date</th>
    </tr>
  </thead>
  <tbody class="clubbedfeebody">
    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][0][clubbedFeesName]" id="Fees_0_0_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][0][amount]" id="Fees_0_0_amount" type="text">
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][0][lastDate]" id="Fees_0_0_lastDate" type="text" maxlength="100">	<span class="input-group-addon">
				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][1][clubbedFeesName]" id="Fees_0_1_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][1][amount]" id="Fees_0_1_amount" type="text">
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][1][lastDate]" id="Fees_0_1_lastDate" type="text" maxlength="100">	<span class="input-group-addon">
				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][2][clubbedFeesName]" id="Fees_0_2_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][2][amount]" id="Fees_0_2_amount" type="text">
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][2][lastDate]" id="Fees_0_2_lastDate" type="text" maxlength="100">	<span class="input-group-addon">
				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][3][clubbedFeesName]" id="Fees_0_3_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][3][amount]" id="Fees_0_3_amount" type="text">
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][3][lastDate]" id="Fees_0_3_lastDate" type="text" maxlength="100">	<span class="input-group-addon">
				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>

    <tr data-feescount="0">
      <td>
        <select class="form-control classdropdown" data-classselect="0" name="Fees[0][4][clubbedFeesName]" id="Fees_0_4_clubbedFeesName">
          <option value="">...Select Fees Category...</option>
          <option value="1">Registration Fee</option>
          <option value="2">Admission Fee</option>
          <option value="3">Security Deposit</option>
          <option value="4">Tution Fee</option>
          <option value="5">Exam Fee</option>
          <option value="6">Book Fee</option>
          <option value="7">Bus Fee</option>
        </select>
      </td>
      <td>
        <input placeholder="Amount" class="form-control" name="Fees[0][4][amount]" id="Fees_0_4_amount" type="text">
      </td>
      <td class="row">
        <div class="col-md-6">
          <div class="input-group date lastdatepicker">
            <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][4][lastDate]" id="Fees_0_4_lastDate" type="text" maxlength="100">	<span class="input-group-addon">
				    	<span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Am I doing anything wrong in the code. Please anyone help me regard this.

Thanks Everyone.

Upvotes: 2

Views: 719

Answers (1)

AlexG
AlexG

Reputation: 5919

This should be fine, with width: 33%; 

<tr>
    <th style="width: 33%;">Fees Name</th>
    <th style="width: 33%;">Amount</th>
    <th style="width: 33%;">Last Date</th>
</tr>

...

<td>
    <div class="input-group date lastdatepicker">             
        <input class="form-control date lastdatepicker" placeholder="Last Date" name="Fees[0][0][lastDate]" id="Fees_0_0_lastDate" maxlength="100" type="text"/>                
         <span class="input-group-addon">
             <span class="glyphicon glyphicon-calendar"></span>
          </span>
    </div>
</td>

JSFIddle

Upvotes: 2

Related Questions