CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
AB21
AB21

Reputation: 385

Table is not shown of full sizae in MODAL of POPUP WINDOW

I want to show the table inside the MODAL of pop up of full length.But it is coming in the center with just fixed length.I have used the css but dont know what is wrong.I need to show the table of 100% length inside the MODAl.please someone help me to structure the table.I have used bootstrap table and getting such error.

[![<!DOCTYPE html>
<html>
<head>
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
    .table {
    border-radius: 5px;
    width: 50%;
    margin: 0px auto;
    float: none;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 25px; margin-bottom: 30px; text-transform: none;">    
<form class="form-inline" action="">    
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">ClientId</label>

    <input type="text" class="form-control" id="test" placeholder="Enter A Value">

</div>
<div class="form-group">

    <button type="button" id="go"  class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span></button>

</div>
</form>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">Modal title</h4>

      </div>
      <div class="modal-body" >
        <!--div class="container"-->
  <h2>Basic Table</h2>

  <div class="table-responsive" id="holder-table">       
  <!--TAble COntent-->
</div>

<!--/div-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!--modal if there is some text-->
<!--Modal-->

<div class="modal fade" id="#myModal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h3 class="modal-title modal-title-or">
            Edit
            Relative
            </h3>

      </div>
      <form id="relativeFormEdit" class="form-horizontal">
      <div class="modal-body">
        <!--form body-->
        <div class="form-group ">
      <div class="row">
                        <label class="control-label col-md-4">Name:</label>
                        <div class="col-md-6">
                            <input name="name" title="Name" class="form-control">
                        </div>
                    </div>
       <div class="row">
                        <label class="control-label col-md-4">Age:</label>
                        <div class="col-md-6">
                            <input name="age" title="age" class="form-control">
                        </div>
                    </div>

      <div class="row">
                        <label class="control-label col-md-4">Cid:</label>
                        <div class="col-md-6">
                            <input name="cid" title="cid" class="form-control">
                        </div>
                    </div>
             <div class="col-md-10">    
                 <button type="button" class="btn btn-info btn pull-right" id="search" >
      <span class="glyphicon glyphicon-search"></span>Search
    </button>
                    </div>

<div id="holder-table1">
    <!--table content-->
    </div>
</div>
</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
</form>
<div class="table-responsive">
<table id="tableModel" style="display:none" class="table table-hover table-striped table-condensed" >
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Cid</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>10</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>11</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>12</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>
</div>
<script>

$(document).ready(function(){
$('#go').click(function() {

    var test1 = $('#test').val();
  if (test1 === "") {
    $("#tableModel").css({display: "block"});
     $('#holder-table1').append($("#tableModel"));
    $('#\\#myModal1').modal('show');
    $('#holder-table1').hide();
  }
  else{
     $("#tableModel").css({display: "block"});
     $('#holder-table').append($("#tableModel"));
    $('#\\#myModal').modal('show');
  }
$('#search').click(function() {
   $("#tableModel").css({display: "block"});
        $("#holder-table1").show();
    });
});
});
</script>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>][1]][1]

Upvotes: 0

Views: 1566

Answers (1)

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

try this

<style type="text/css">
    .table {
    border-radius: 5px;
    width: 100%;
    margin: 0px auto;
    float: none;
}
</style>

and use inline-table instead of block in css

<table id="tableModel" style="display:inline-table"  class="table table-hover table-striped table-condensed" > 

if (test1 === "") {
    $("#tableModel").css({display: "inline-table"});
     $('#holder-table1').append($("#tableModel"));
    $('#\\#myModal1').modal('show');
    $('#holder-table1').hide();
  }
  else{
     $("#tableModel").css({display: "inline-table"});
     $('#holder-table').append($("#tableModel"));
    $('#\\#myModal').modal('show');
  }
$('#search').click(function() {
   $("#tableModel").css({display: "inline-table"});
        $("#holder-table1").show();
    });

Upvotes: 2

Related Questions