HTML5/MVC 4 using visual studios 2012

Hello
  I am having an issue my user interface.  I can bring in the data but the problem is in styling the front end. Attached is copy of what I am trying to do but it is not real. I am trying to accomplish the following

1) Create an area on the page called Unassigned
2) have that area hold five rows of data
3) user would have to scroll to see any data after the fifth roll
Doc1.docx
vcurtisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
What styling issues are you having specifically?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Roopesh ReddyIT AnalystCommented:
Hi,

Nest the Unassigned section with DIV tag, and set the min-height style which can accomodate 5 rows and also overflow:scroll to provide scrolling!

Something like this -

<div style="min-height:150px;overflow:scroll;" >
</div>

Open in new window


Hope it helps u...
0
vcurtisAuthor Commented:
This is the code  I have, I tried adding the <div> tag but it did not separate display the first five rows,  scroll the rest. what did I do wrong


@model ALFA.ViewModels.MeasuresCommitteesVM

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="content" role="main" id="skip">
    <div class="row">
        <h1>Unassigned Measures</h1>


<p>
      
    @Html.ActionLink("Refresh Measures from LIS", "RefereshMeasures")
</p>

      @*<div style="min-height:150px;overflow:scroll;" >*@
            <div>
<table>

    <tr>
        <th>
                  
            @Html.DisplayNameFor(model => model.MeasureList.Measures[0].MeasureNumber)
        </th>
        <th>
                  Session
            @*@Html.DisplayNameFor(model => model.MeasureList.Measures[0])*@
        </th>
        <th>
                  Subject
            @*@Html.DisplayNameFor(model => model.MeasureList.Measures[0].MeasureType)*@
        </th>
        @*<th>
            @Html.DisplayNameFor(model => model.MeasureList.Measures[0].MeasureNumber)
        </th>*@
        <th>
            @Html.DisplayNameFor(model => model.MeasureList.Measures[0].Subject)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MeasureList.Measures[0].Subject)
        </th>
       
    </tr>

@foreach (var item in Model.MeasureList.Measures) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.MeasureType)
                  @Html.DisplayFor(modelItem => item.MeasureNumber)
        </td>
        <td>
           Assign
                  @*@Html.DropDownList("Model.CommitteeList.CommitteeList", string.Empty)*@
               
        </td>
        <td>
                  @*@Html.DisplayFor(myName => Model.CommitteeList.CommitteeList)*@
            @Html.DisplayFor(modelItem => item.Subject)
        @*</td>
        <td>*@
            @*@Html.DisplayFor(modelItem => item.MeasureNumber)*@
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PrimaryAuthor)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Subject)
        </td>
     
    </tr>
}

</table>
                  </div>
</div>
      </div>
0
Bob LearnedCommented:
You have the line commented out:

  @*<div style="min-height:150px;overflow:scroll;" >*@

Also, that doesn't look the like the <div> that wraps the items in the for loop.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.