Scrolling DataGrid Content

Discussion of features and help with problems encountered while using libRocket

Scrolling DataGrid Content

Postby Dark Fire on Sun Sep 08, 2013 10:52 pm

So, I have a datagrid in a window, and I want a scrollbar to appear so that the user can scroll when the data fills more than the datagrid can show. Below the scrollbar is a form where the user can enter stuff into the datagrid.

I'm curious as to how I can make it so that the datagrid scrolls. I've tried setting overflows and divs and stuff to no avail. It usually crashes when it's too large to contain in one view. This currently crashes, but here's the code now. Can anyone help me? Thanks :)

Code: Select all
<rml>
   <head>
      <link type="text/template" href="window.rml" />
        <title>Setup</title>
      <style>
         body
         {
            width: 95%;
            height: 85%;

            margin: auto;
         }

         div#title_bar div#icon
         {
            display: none;
         }

         div#content
         {
            text-align: center;
         }

         div#items
         {
                width: 70%;
                height: 30%;

                overflow-y: scroll;
                clip: auto;
         }

         datagrid#itemtable
         {
                top: 0px;
                width: 70%;
                height: 30%;

                display: block;
                margin-left: auto;
                margin-right: auto;

                /*overflow-y: scroll;
                clip: auto;*/
         }

         div#additem
         {
                left: 0px;
                width: 50%;
                height: 60%;

            color: black;

                display: block;
                float: left;
                clear: right;
         }

         div#params
         {
                width: 50%;
                height: 60%;

            color: black;

                display: block;
                float: right;
         }

            span#section_title
            {
                font-size: 1.5em;
                font-weight: bold;
                text-decoration:underline;
            }

         p#parameter
         {
                display: block;
                clear: right;
                text-align: center;
         }

         div#button_panel
         {
                width: 100%;
                height: 10%;

                display: block;
                text-align: center;

                margin-left: auto;
                margin-right: auto;
         }
      </style>
   </head>
   <body template="window">
      <datagrid source="db.cities" id="itemtable">
            <div id="cities">
            <col fields="name" width="20%">Name</col> [etc etc]
            </div>
        </datagrid>
<form onsubmit="gen">
        <div id="additem">
            <p id="parameter">
                <span id="section_title">Add Item</span>
            </p>
            <p id="parameter">
                <input style="float: right; width: 70%;" />
                Name:
            </p>
            <p id="parameter">
                <input style="float: right; width: 70%;" />
                Field:
            </p>
            <p id="parameter">
                <input style="float: right; width: 70%;" />
                Field:
            </p>
            <p id="parameter">
                <input style="float: right; width: 70%;" />
                Field:
            </p>
            <p id="parameter">
                <input style="float: right; width: 70%;" />
                Field:
            </p>
        </div>
        <div id="params">
            <p id="parameter">
                <span id="section_title">Settings</span>
            </p>
            <p id="parameter">
                <input style="float: right; width: 70%;" />
                Field:
            </p>
        </div>
        <div id="button_panel">
            <button onclick="back" id="back">Back</button>
            <button onclick="begin" id="generate">Generate</button>
        </div>
    </form>
   </body>
</rml>
Dark Fire
 
Posts: 1
Joined: Wed May 29, 2013 3:22 pm

Return to Using libRocket