Last Updated
Viewed 18 Times
        

I have a simple Bootstrap table with 5 columns and 7 rows. First row contains header. First column of all remaining 7 rows contains a fixed text and column 2 to 5 are text boxes to received some input. All nicely formatted (border, colours etc) and looks OK on the desktop screen but obviously it does not work on the mobile phone screen.

Therefore, I changed the table to responsive . I have used various columns width e.g. col-lg, col-md, col-xs etc. All looks OK on a desktop screen. On the mobile phone screen the required horizontal scroll bar appears but when I scroll to the extreme right my NavBar is NOT stretched to the width of the container i.e. it does not look nice that the NavBar is restricted to the width of the mobile phone screen but the table below is wider than the NavBar. I do not wish to include the NavBar in the container as that leaves spaces on either side of the NavBar. Is there any way I could stretch the NavBar to be the same width as the table in the container below?

On the other hand ideally what I need is a way to convert columns to rows as follows:

When the user first starts, the screen will show fixed text from column 1 (i.e. 7 clickable rows of fixed text). e.g.

Text 01 Text 02 Text 03 Text 04 Text 05 Text 06 Text 07

So when the user clicks on a row (above i.e. Text 01 to Text 07) then the area below the clicked row will expand and the input textboxes for example for Text 01 will show as follows:

Column 01: Textbox01 Column 02: Textbox02 Column 03: Textbox03 Column 04: Textbox04 Column 05: Textbox05

User will enter input in the textboxes above and will then click the next row and so on and will finally click the "Save" button to save data from all text boxes of 7 rows (5 columns) into the database.

I would really appreciate if someone can direct me to some example code please?

I have a bootstrap responsive table.Table inside button click expand and collapse specific div.In desktop view its work fine but mobile view its not working.

CSS

.expandClass[aria-expanded=true] .fa-chevron-circle-right {
display: none;
}
.expandClass[aria-expanded=false] .fa-chevron-circle-down  {
display: none;
}

html

<table id="respTableId" class="table table-striped table-bordered table-responsive"  
style="width: 100%;">
<thead>
<tr>
<th style="width:50%;">Column 1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tr>
<td>data1</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId1" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId1">
Test Data 1
</div>
</td>

<td>data2</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId2" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId2">
Test Data 2
</div>
</td>

<td>data3</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId3" role="button" 
aria-expanded="false" aria-controls="collapseId3">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId3">
Test Data 3
</div>
</td>
</tr>
</table>
<table id="respTableId" class="table table-striped table-bordered table-responsive"  
style="width: 100%;">
<thead>
<tr>
<th style="width:50%;">Column 1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tr>
<td>data1</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId1" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId1">
Test Data 1
</div>
</td>

<td>data2</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId2" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId2">
Test Data 2
</div>
</td>

<td>data3</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId3" role="button" 
aria-expanded="false" aria-controls="collapseId3">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId3">
Test Data 3
</div>
</td>
</tr>
</table>

My doubt is desktop view above code works fine.But in mobile view it not working. I try another way for below javascript code but also facing same issue.

Javascript

function showHideDiv(id)
{
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

Similar Question 2 : make bootstrap div responsive

I want to show 5 images in one row.So one row 5 column for 5 column I find this css

  .col-half-offset {
            margin-left: 4.166666667%
        }

this is work for web but for mobile it does no show correctly although I added responsive attribute to my img element,what is problem with this ?

here is my css

.col-xs-2 {
        /*background:#00f;
    color:#FFF;*/

    }

    .col-half-offset {
        margin-left: 4.166666667%
    }

and here is my html

 <div class="row">
            <div class="col-xs-2 ">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
                        <div col-xs-12 class="caption">
                            <p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-2 col-half-offset">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/ISO 9001-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
                        <div col-xs-12 class="caption">
                            <p>ISO 9001:2015 Kalite Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-2 col-half-offset">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/ISO 14001-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" class="img-responsive" alt="Lights">
                        <div col-xs-12 class="caption">
                            <p>ISO 14001:2015 Çevre Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-2 col-half-offset">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/ISO 27001-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
                        <div col-xs-12 class="caption">
                            <p>ISO 14001:2013 Bilgi Güvenliği Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-2 col-half-offset">
                <div class="thumbnail">
                    <a href="http://psldanismanlik.com/Upload/OHSAS 18001-1.jpg" target="_blank">
                        <img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive" style="width:100%;height:100%">
                        <div col-xs-12 class="caption">
                            <p>OHSAS 18001:2007 İş Sağlığı Güvenliği Yönetim Sistemi.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>

Similar Question 3 : bootstrap 4 responsive table

Hey i've got the following problem when i am trying to use the bootsrap 4 responsive table.

If there isnt evenough in the table to fill the complete width its look like this.

Layout of Table enter image description here

My code is the following:

<div class="container" id="maincontainer">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Bevorstehende Veranstaltungen:</p>
    <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
   </tbody>
</table>

<p>Vergangene Veranstaltungen:</p>
    <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">30.06.2017 15:30 - 16:00</th>
      <td>2/2</td>
      <td>dafdfsfa</td>
      <td>97</td>
    </tr>
</tbody>
</table>
</div>

I hope anyone can help me.

Best Regards Alex

Similar Question 4 (1 solutions) : Responsive table in bootstrap

Similar Question 5 (2 solutions) : Bootstrap 4 , handle responsive div's

Similar Question 7 (1 solutions) : Bootstrap 4 Responsive table with column width

Similar Question 8 (1 solutions) : Responsive Bootstrap Table with Sticky Header

Similar Question 9 (2 solutions) : Bootstrap 4 : Vertical alignement in responsive table

cc