Bootstrap Responsive Table

Last Reply 14 hours ago By dharmendr

Posted 4 days ago

I need some help with CSS please? It's a single web form (.aspx) page, the code is attached).

When viewed on desktop screen its fine but when viewed in Mobile Phone screen I need the text "No of Leaflets in Allocated Village" to have the same width as the text "Allocated Village" (i.e. fixed width) and wrapped over.

Your assiatnce will be much appreciated.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestPage06.aspx.vb" Inherits="TestPage06" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title>Responsive Tables</title>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <link href="../../css/NavSideBar.css?v03" rel="stylesheet" type="text/css" />


<style class="cp-pen-styles">

.divtable .tr {
  overflow: hidden;
  clear: both;
  /*border: 1px solid #ccc;*/
}

.divtable .th,
.divtable .td {
  padding: 5px 10px;
  float: left;
  height: 40px;
  border: 1px solid #ccc;
}

.divtable .th { font-weight: bold; }

.Col01 { width: 15%; }

.Col02 { width: 20%; }

.Col03 { width: 30%; }

 @media (max-width: 767px) {

.accordion-xs .headings { display: none; }

.accordion-xs .tr { border-bottom-color: #fff; }

.accordion-xs .th,
 .accordion-xs .td {
  float: none;
  width: auto;
  padding: 0;
  /*
  border: 1px solid #ff0000;
  */
}

.accordion-xs .accordion-xs-toggle {
  background-color: orange;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}

.accordion-xs .accordion-xs-toggle:hover { background-color: #e69500; }

.accordion-xs .accordion-xs-toggle:after {
  content: '\2b';
  float: right;
}

.accordion-xs .accordion-xs-toggle.collapsed:after { content: '\2212'; }
.accordion-xs-collapse .inner { padding: 10px; }
.accordion-xs-collapse .td:before { font-weight: bold; }
.accordion-xs-collapse .Col02:before { content: 'Allocated Village: '; }
.accordion-xs-collapse .Col03:before { content: 'No of Leaflets in Allocated Village: '; }

.accordion-xs .accordion-xs-toggle:after {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
}
</style>


</head>
<body>

    <form id="frmReportSelection" runat="server">

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

            <ContentTemplate>

            <div class="container">




<div class="divtable accordion-xs">
  <div class="tr headings">
    <div class="th Col01">Town/City</div>
    <div class="th Col02">Allocated Village</div>
    <div class="th Col03">No of Leaflets in Allocated Village</div>
  </div>
  <div class="tr">
    <div class="td Col01 accordion-xs-toggle">Carshalton</div>
    <div class="accordion-xs-collapse">
      <div class="inner">
        <div class="td Col02">
            <asp:TextBox ID="TextBox1" width="210px" runat="server" Enabled="True" />
        </div>
        <div class="td Col03">
            <asp:TextBox ID="TextBox4" width="210px" runat="server" Enabled="True" />
        </div>
      </div>
    </div>
  </div>
  <div class="tr">
    <div class="td Col01 accordion-xs-toggle">Cheam</div>
    <div class="accordion-xs-collapse">
      <div class="inner">
        <div class="td Col02">
            <asp:TextBox ID="TextBox2" width="210px" runat="server" Enabled="True" />
        </div>
        <div class="td Col03">
            <asp:TextBox ID="TextBox5" width="210px" runat="server" Enabled="True" />
        </div>
      </div>
    </div>
  </div>
  <div class="tr">
    <div class="td Col01 accordion-xs-toggle">Morden Park</div>
    <div class="accordion-xs-collapse">
      <div class="inner">
        <div class="td Col02">
            <asp:TextBox ID="TextBox3" width="210px" runat="server" Enabled="True" />
        </div>
        <div class="td Col03">
            <asp:TextBox ID="TextBox6" width="210px" runat="server" Enabled="True" />
        </div>
      </div>
    </div>
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script>
    $(function () {
        var isXS = false,
            $accordionXSCollapse = $('.accordion-xs-collapse');

        // Window resize event (debounced)
        var timer;
        $(window).resize(function () {
            if (timer) { clearTimeout(timer); }
            timer = setTimeout(function () {
                isXS = Modernizr.mq('only screen and (max-width: 767px)');

                // Add/remove collapse class as needed
                if (isXS) {
                    $accordionXSCollapse.addClass('collapse');
                } else {
                    $accordionXSCollapse.removeClass('collapse');
                }
            }, 100);
        }).trigger('resize'); //trigger window resize on pageload    

        // Initialise the Bootstrap Collapse
        $accordionXSCollapse.each(function () {
            $(this).collapse({ toggle: false });
        });

        // Accordion toggle click event (live)
        $(document).on('click', '.accordion-xs-toggle', function (e) {
            e.preventDefault();

            var $thisToggle = $(this),
                $targetRow = $thisToggle.parent('.tr'),
                $targetCollapse = $targetRow.find('.accordion-xs-collapse');

            if (isXS && $targetCollapse.length) {
                var $siblingRow = $targetRow.siblings('.tr'),
                    $siblingToggle = $siblingRow.find('.accordion-xs-toggle'),
                    $siblingCollapse = $siblingRow.find('.accordion-xs-collapse');

                $targetCollapse.collapse('toggle'); //toggle this collapse
                $siblingCollapse.collapse('hide'); //close siblings

                $thisToggle.toggleClass('collapsed'); //class used for icon marker
                $siblingToggle.removeClass('collapsed'); //remove sibling marker class
            }
        });
    });
</script>
<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36251023-1']);
    _gaq.push(['_setDomainName', 'jqueryscript.net']);
    _gaq.push(['_trackPageview']);

    (function () {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

</script>


            </div>

            </ContentTemplate>

        </asp:UpdatePanel>

    </form>

    <!--#include file="../../IncludeFiles/BPageFooterIncludeSite.inc"-->

</body>
</html>

 

You are viewing reply posted by: dharmendr 4 days ago.