locked
How to design the html frame of a dash board RRS feed

  • Question

  • User-1748662792 posted

    Dear all,

    Not so used to design web page but I need to build a simple dashboard page which will be will be devide in different block as below

    as seen from below link capture

    Screen shot

    Each tab content will be filled up using server side script , so it should be scroll able

    Thanks for your help setting up proper section have no idea which to use

    regards

    Wednesday, December 12, 2018 2:29 PM

All replies

  • User1724605321 posted

    Hi wakespirit ,

    To make the div scroll  , you can add the .pre-scrollable class, which will  provide a y-axis scrollbar if using bootstrap :

    <div class="panel-body pre-scrollable text-center" style="height:200px">
        <div id="content">
            Content
        </div>
    </div>
    

    Or use  overflow css property :

    https://www.w3schools.com/cssref/pr_pos_overflow.asp 

    <div class="panel-body text-center" style="height:200px; overflow:auto">
        <div id="content">
            Content
        </div>
    </div>
    

    The code sample will like :

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <div class="col-sm-5">
        <button type="button" class="btn btn-primary">Tab1</button>
        <button type="button" class="btn btn-primary">Tab2</button>
        <div class="panel panel-primary">
            <div class="panel-body pre-scrollable text-center" style="height:200px">
    <div id="content1">
    Tab 1 Content
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <button type="button" class="btn btn-primary">Tab1</button>
        <button type="button" class="btn btn-primary">Tab2</button>
        <div class="panel panel-primary">
            <div class="panel-body pre-scrollable text-center" style="height:200px">
    <div id="content2">
    Tab 1 Content
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <button type="button" class="btn btn-primary">Tab1</button>
        <button type="button" class="btn btn-primary">Tab2</button>
        <div class="panel panel-primary">
            <div class="panel-body pre-scrollable text-center" style="height:200px">
    <div id="content3">
    Tab 1 Content
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <button type="button" class="btn btn-primary">Tab1</button>
        <button type="button" class="btn btn-primary">Tab2</button>
        <div class="panel panel-primary">
            <div class="panel-body pre-scrollable text-center" style="height:200px">
    <div id="content4">
    Tab 1 Content
                </div>
            </div>
        </div>
    </div>
    

    Best Regards,

    Nan Yu

    Thursday, December 13, 2018 9:17 AM