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>

 

You are viewing reply posted by: dharmendr one month ago.
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