Vertical scrollbar causing column width different between header and cell in spreadsheet

Vertical scrollbar causing column width different between header and cell in spreadsheet. This is a common issue when the HTML page that display on a computer. Whereas, it won't have issue if it is on Android or iOS because the scrollbar is floating on top of the content.

To explain this issue, let says we have a spreadsheet (or "table" view) built with DIV which looks like below:

<style>
.header {
  display:flex;
  flex-direction:row;
}

.item {
  display:flex;
  flex-direction:row;
}

.c1 {
  width:50%;
}

.item-list {
  overflow: hidden;
  overflow-y: scroll;
  height: 80px;
}
</style>

<div class="my-table">

<div class="header">
  <div class="c1">Date</div>
  <div class="c1">Ref #</div> 
</div> 
<div class="item-list">
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0001</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0002</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0003</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0004</div>
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0005</div>
  </div>
</div>
</div>


With the CSS for item-list, a vertical scrollbar will appear once the number of items increased.

The problem with this CSS is that the date and reference number column in the header will have a different width if you compared it with the column in the items.

To solve this, you need to use this style:

(1) you have to use "sticky:

.header{
  position: sticky;
  top: 0;
  left: 0;
  background-color: white;
}

(2) Move the overflow attribute for "item-list" to "my-table":

.my-table {
  position:relative;
  overflow: hidden;
  overflow-y: scroll;
  height: 80px;
}

And that solves the column width issue when there is a vertical scrollbar.

CSS fill pattern

To create the fill pattern image, check out the following website:

     http://www.patternify.com/

/*dots*/

.inactive_cell2 {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC");
    background-repeat: repeat;
}

To create strips without using any image data,

    https://css-tricks.com/stripes-css/

/*stripes*/
.inactive_cell {   
    background: repeating-linear-gradient( 48deg, #fefefe, #e0e0e1 5px, #eaeaea 5px, #eaeaea 10px );
}

Simple pie chart & doughnut chart with SVG + CSS

You can draw a simple pie chart & doughnut chart with SVG + CSS. This is quite simple and straight forward. But the limitation is that it is able to show 2 sections only.

To change the value of the section, look for stroke-dasharray and change the first value.

.pie2 {

        fill: yellow;

        stroke: green;

        /* max=50 (radius x 2) */

        stroke-width: 50;

        /* 158 = (radius x 2) x 3.142 = 25 x 2 x 3.142 */

        stroke-dasharray: 40 158;

    }

    .chart2 {

        background-color: yellow;

        border-radius: 50%;

        -webkit-transform: rotate(-90deg);

                transform: rotate(-90deg);

    }

    <svg width="100" height="100" class="chart2">    

        <circle r="25" cx="50" cy="50" class="pie2"/>  

    </svg>

To draw a doughnut chart,  

    .doghnut {

        fill: yellow;

        stroke: green;

        stroke-width: 20;

        stroke-dasharray: 180 251;

    }

    .doghnut_chart {

        background-color: yellow;

        border-radius: 50%;

        -webkit-transform: rotate(-90deg);

                transform: rotate(-90deg);

    }

    <svg width="100" height="100" class="doghnut_chart">    

        <circle r="40" cx="50" cy="50" class="doghnut"/>  

    </svg>

Something about the z-index

In CSS, z-index is the property to control the 3D Z position of the element (for example DIV). This property is useful when you have element that has absolute or fixed position.

In the real work application, we use z-index for the date picker, time picker, numeric keypad, any popup list, prompt, etc.

Here is the find out:


1. If you set the z-index for the DIV, it works as expected. Not strange thing will happen in this simplest case.

<body>
   <div class="container1">helo</div>
<body> 

2.But, if you have the following structure, then, it might work unexpectedly.

First of all, if you set the z-index for the inner1 & inner2, the z-index is relative to container1. While container2 is relative to the body.


<body>
   <div class="container1">Container 1
      <div class="inner1">Inner 1</div>
      <div class="inner2">Inner 2</div>
   </div>

    <div class="container2">Container 2
    </div>
<body>

For example, you have the following settings for the z-index where the final output is container2 is always at the top that covers container1 and hence it covers inner1 and inner2.

container1 - z-index: 100
    inner1 - z-index: 300
    inner2 - z-index: 400

container2 - z-index: 200

All DIV elements have the following settings.

position: absolute;
top: 0;
left:0;
width:100px;
height:100px;
overflow:hidden;

Spinner generator

The following website provides an easy way to generate the spinner animation in 3 output: SVG, CSS and GIF. This tool is great and very helpful.

http://loading.io/

Fixed row and column in HTML with CSS + JavaScript

You cannot achieve the fixed row and column with HTML + CSS. You need the Javascript as well.






Below is the HTML, CSS and Javasript that accomplished the fixed row and column.

 <html lang="en">

<head>
    <script src="js/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        function on_y_scroll(e) {
            var t = $('.tb_cells').scrollTop();
            var l = $('.tb_cells').scrollLeft();

            $('.r_headers').scrollTop(t);
            $('.c_headers').scrollLeft(l);

            console.log('left=' + l.toString() + ',top=' + t.toString());
        }
        $(document).ready(function () {
            $('.tb_cells').scroll(on_y_scroll);
        });
    </script>

    <style>
        .tb {
            background-color: darkgray;
            width: 600px;
            height: 250px;
        }
      
        /* the full row and partial should be hidden */
        .max_row_width {
            width: 500px;
        }
        /* the data row to be partially display on the screen*/
        .max_data_width {
            width: 420px;
        }
        /* the data row height */
        .row_height {
            height: 30px;
        }
        /* the column header height */
        .row0_height{
            height:40px;
        }

        /* for column zero*/
        .cell0 {
            width: 100px;
            background-color: red;
        }

        .tb_col0 {
            float: left;
        }

        .r_headers {
            height: 140px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
            overflow: hidden;
        }

        .row_header {
            background-color: #0094ff;
        }

        /* for row zero */
        .c_headers {
            width: 400px;
            overflow: hidden;
        }

        .col_header {
            width: 100px;
            float: left;
            background-color: green;
            color: white;
        }

        .tb_row0 {
            clear: both;
        }

        /* for data cell */

        .tb_data {
            float: left;
            height: 200px;
            overflow: hidden;
            overflow-x: hidden;
            background-color: yellow;
        }

        .tb_cells {
            float: left;
            height: 160px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
            overflow: hidden;
            overflow-y: auto;
            overflow-x: auto;
            background-color: mediumaquamarine;
        }

        .tb_row {
            clear: both;
        }

        .cell_col {
            width: 100px;
            float: left;

            /* user defined style for the cell content */
            box-sizing: border-box;
            padding-left: 5px;
            padding-right: 5px;
            text-overflow: clip;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <h3>Fixed row and column</h3>

    <div class="tb">

        <div class="tb_col0">
            <!--the first cell-->
            <div class="cell0 row0_height">
                cell 0
            </div>

            <!--the first column-->
            <div class="r_headers">
                <div class="row_header row_height">
                    r 1
                </div>
                <div class="row_header row_height">
                    r 2
                </div>
                <div class="row_header row_height">
                    r 3
                </div>
                <div class="row_header row_height">
                    r 4
                </div>
                <div class="row_header row_height">
                    r 5
                </div>
                <div class="row_header row_height">
                    r 6
                </div>
                <div class="row_header row_height">
                    r 7
                </div>

            </div>

        </div>



        <div class="tb_data max_data_width">

            <!--the column header -->

            <div class="c_headers row0_height">
                <div class="tb_row0 max_row_width row0_height">
                    <div class="col_header row0_height">
                        col 1
                    </div>
                    <div class="col_header row0_height">
                        col 2
                    </div>
                    <div class="col_header row0_height">
                        col 3
                    </div>
                    <div class="col_header row0_height">
                        col 4
                    </div>
                    <div class="col_header row0_height">
                        col 5
                    </div>
                </div>
            </div>


            <!-- data cells -->
            <div class="tb_cells max_data_width">

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell11 very long long long text
                    </div>
                    <div class="cell_col">
                        cell21
                    </div>
                    <div class="cell_col">
                        cell31
                    </div>
                    <div class="cell_col">
                        cell41
                    </div>
                    <div class="cell_col">
                        cell51
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell12
                    </div>
                    <div class="cell_col">
                        cell22
                    </div>
                    <div class="cell_col">
                        cell32
                    </div>
                    <div class="cell_col">
                        cell42
                    </div>
                    <div class="cell_col">
                        cell52
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell13
                    </div>
                    <div class="cell_col">
                        cell23
                    </div>
                    <div class="cell_col">
                        cell33
                    </div>
                    <div class="cell_col">
                        cell43
                    </div>
                    <div class="cell_col">
                        cell53
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell14
                    </div>
                    <div class="cell_col">
                        cell24
                    </div>
                    <div class="cell_col">
                        cell34
                    </div>
                    <div class="cell_col">
                        cell44
                    </div>
                    <div class="cell_col">
                        cell54
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell15
                    </div>
                    <div class="cell_col">
                        cell25
                    </div>
                    <div class="cell_col">
                        cell35
                    </div>
                    <div class="cell_col">
                        cell45
                    </div>
                    <div class="cell_col">
                        cell55
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell16
                    </div>
                    <div class="cell_col">
                        cell26
                    </div>
                    <div class="cell_col">
                        cell36
                    </div>
                    <div class="cell_col">
                        cell46
                    </div>
                    <div class="cell_col">
                        cell56
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell17
                    </div>
                    <div class="cell_col">
                        cell27
                    </div>
                    <div class="cell_col">
                        cell37
                    </div>
                    <div class="cell_col">
                        cell47
                    </div>
                    <div class="cell_col">
                        cell57
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

Fixed column table with horizontal scrolling

While I was working on a project which I need the first column in the table to the "fixed" (non-scrollable) while other columns are scrollable. I was wondering if this is possible and does it requires any JavaScript plug-in to achieve that.

After searching in the Internet, it turns our that it is very easy to do with CSS. No JavaScript is required. HTML is amazing.

Below is the sample page that I have done it myself while referencing the tutorial of fixed column.

• "fixed_div" - this is the main container for the table.
• "scroller" - this is the container that limit the width (width:600px) of the table to be displayed on the screen so that the horizontal scrollbar is scrollable. While "margin-left:100px" will ident the div to 100px to the right. Without this attribute the horizontal scrollbar will start showing at left = 0.
• "table" - the table-layout must be "fixed" or else the cell might be shrunken.
• "th" - the "position:absolute" will mark the cell to be fixed (non-scrollable) and "left:0" will let it stick to the left.

<html>
<head>
    <style type="text/css">
        table{
            table-layout:fixed;
            width:100%;
        }
        th {
            width: 100px;
            position: absolute;
            left:0;
            background-color:yellow;
        }
        td {
            width: 300px;background-color:yellow;
        }
        .scroller {
            overflow-x: scroll;
            overflow-y: visible;
            width: 600px;
            margin-left: 100px;
        }
        .fixed_div {
            position: relative;
        }
    </style>
</head>
<body>

    <div class="fixed_div">
        <div class="scroller">
            <table>
                <tr>
                    <th>
                        header 1
                    </th>
                    <td>
                        cell 11
                    </td>
                    <td>
                        cell 12
                    </td>
                    <td>
                        cell 13
                    </td>
                    <td>
                        cell 14
                    </td>

                    <td>
                        cell 15
                    </td>
                </tr>
                <tr>
                    <th>
                        header 2
                    </th>
                    <td>
                        cell 21
                    </td>
                    <td>
                        cell 22
                    </td>
                    <td>
                        cell 23
                    </td>
                    <td>
                        cell 24
                    </td>
                    <td>
                        cell 25
                    </td>
                </tr>
                <tr>
                    <th>
                        header 3
                    </th>
                    <td>
                        cell 31
                    </td>
                    <td>
                        cell 32
                    </td>
                    <td>
                        cell 33
                    </td>
                    <td>
                        cell 34
                    </td>
                    <td>
                        cell 35
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

CSS progress spinner generator

This is a cool site which help you to generate a progress spinner only the fly:

http://cssload.net/