Scrollable HTML DIV with fixed header in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

I want to apply the scroll bar for child divs without scrolling the header

i had tried it is not working because my div structure is as give below.

I am able to apply scroll bar but the problem is header should not be scrollable only the content should be scrollable 

    .applystyle {
        float: left;
        width: 49%;
        line-height: 24px;
        margin: 0;
        padding-left: 5px;
    }

    <div id="divInfo" style="width:100%;" class="Table brd">
        <div class="row">
            <div class="applystyle" style="float: left;width: 75%;line-height: 24px;margin: 0;padding-left: 5px;">
                <p> Name </p>
            </div>
            <div class="applystyle" style="float: left;width: 15%;line-height: 24px;margin: 0;padding-left: 5px;">
                <p> Type </p>
            </div>
        </div>
        @if (Rows.Count > 0)
        {
            foreach (var value in Rows)
            {
                <div class="row" style="width:100%">
                    <div class="applystyle" style="float: left;width: 75%;line-height: 24px;margin: 0;padding-left: 5px;">

                        @if ((value.Name != null))
                        {
                            <p style="word-wrap:break-word;"> @value.Name </p>
                        }
                        else
                        {
                            <p> N/A </p>
                        }
                    </div> 
                  <div class="applystyle" style="float: left;width: 15%;line-height: 24px;margin: 0;padding-left: 5px;">

                        @if ((value.Type != null))
                        {
                            <p style="word-wrap:break-word;"> @value.Type </p>
                        }
                        else
                        {
                            <p> N/A </p>
                        }
                    </div>                   
                </div>
            }
        }
        else
        {
            <div class="row" style="width:100%">
                <div class="applystyle" style="float: left;width: 75%;line-height: 24px;margin: 0;padding-left: 5px;">
                    <p></p>
                </div>
                <div class="applystyle" style="float: left;width: 15%;line-height: 24px;margin: 0;padding-left: 5px;">
                </div>
            </div>
        }
    </div>

 

Posted one month ago Modified on one month ago

Hi kavithav,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        List<StudentModel> model = new List<StudentModel>();
        model.Add(new StudentModel { Name = "Ram", Type = "A001" });
        model.Add(new StudentModel { Name = "Hari", Type = "A002" });
        model.Add(new StudentModel { Name = "Rahim", Type = null });
        model.Add(new StudentModel { Name = null, Type = "A004" });
        TempData["StudentList"] = model;
        return View();
    }

    public class StudentModel
    {
        public string Name { get; set; }
        public string Type { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <style type="text/css">
        #dvScroll
        {
            max-height: 150px !important;
            overflow-y: auto !important;
            background: #f9f9f9 !important;
        }
    </style>
</head>
<body>
    <% List<_ScrollBar_DIV.Controllers.HomeController.StudentModel> Rows = (List<_ScrollBar_DIV.Controllers.HomeController.StudentModel>)TempData["StudentList"]; %>
    <div id="divInfo" style="width: 100%;" class="Table brd">
        <div class="row">
            <div class="applystyle" style="float: left; width: 75%; line-height: 24px; margin: 0;
                padding-left: 5px;">
                <p>
                    Name
                </p>
            </div>
            <div class="applystyle" style="float: left; width: 15%; line-height: 24px; margin: 0;
                padding-left: 5px;">
                <p>
                    Type
                </p>
            </div>
        </div>
        <% if (Rows.Count > 0) {%>
        <div class="row" style="width: 100%" id="dvScroll">
        <% foreach (var value in Rows) {%>
            <div class="applystyle" style="float: left; width: 75%; line-height: 24px; margin: 0;
                padding-left: 5px;">
                <%if (value.Name != null) {%>
                <p style="word-wrap: break-word;"><%=value.Name%></p>
                <%} else {%>
                <p>N/A</p>
                <%}%>
            </div>
            <div class="applystyle" style="float: left; width: 15%; line-height: 24px; margin: 0;
                padding-left: 5px;">
                <%if ((value.Type != null)) {%>
                <p style="word-wrap: break-word;"><%=value.Type%></p>
                <%} else {%>
                <p>N/A</p>
                <%}%>
            </div>        
        <%}%>
        </div>
            <%} else {%>
        <div class="row" style="width: 100%">
            <div class="applystyle" style="float: left; width: 75%; line-height: 24px; margin: 0;
                padding-left: 5px;">
                <p></p>
            </div>
            <div class="applystyle" style="float: left; width: 15%; line-height: 24px; margin: 0;
                padding-left: 5px;">
            </div>
        </div>
        <%}%>
    </div>
</body>
</html>

Screenshot