locked
Multiple Fieldsets in a Row RRS feed

  • Question

  • User1769015664 posted

    The following code gives me one panel in each row; how do I get it to return 2 <fieldset> items in a row so I will have "File" and "File2" in the same row?

    <script>
    $(document).ready(function(){
     $("p").append('<fieldset><legend>File:</legend><a href="create.html">Create File</a><br><a href="edit.html">Edit File</a><br><a href="Delete.html">Delete File</a></fieldset>');
     $("p").append('<fieldset><legend>File:</legend><a href="create.html">Create File</a><br><a href="edit.html">Edit File</a><br><a href="Delete.html">Delete File</a></fieldset>');
    
      $("p").append('<fieldset><legend>MISC:</legend><a href="Help.html">Help</a><br><a href="about.html">About us</a></fieldset>');
       
    });
    </script>

    Monday, April 17, 2017 2:00 PM

All replies

  • User1769015664 posted

    I was able to get it done by using the <style>. How do I get it to display only two panels in each row?

    <style>
            fieldset {
              overflow: hidden;
              display: block; float: left;
              height: 100px;
            }
        </style>

    Monday, April 17, 2017 2:30 PM
  • User-271186128 posted

    Hi NJ2,

    You could add a html table to achieve that:

        <style type="text/css">
           
            fieldset{
                width:300px;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var str = "<table><tr><td>" +
                   "<fieldset><legend>File:</legend><a href=\"create.html\">Create File</a><br><a href=\"edit.html\">Edit File</a><br><a href=\"Delete.html\">Delete File</a></fieldset>"
                    + "</td><td>" +
                    '<fieldset><legend>File:</legend><a href="create.html">Create File</a><br><a href="edit.html">Edit File</a><br><a href="Delete.html">Delete File</a></fieldset>'
                    + "</td></tr><tr><td>" +
                    '<fieldset><legend>MISC:</legend><a href="Help.html">Help</a><br><a href="about.html">About us</a></fieldset>'
                    +"</td><td></td></tr></table";
                $("P").append(str);
            });
        </script>

    Best regards,
    Dillion

    Tuesday, April 18, 2017 6:17 AM
  • User1769015664 posted

    Thanks, it seems to be doing what I needed but I have another question.

    How do I fetch all this data from the database? I have a table like the following:

    ParentID	ManuId		ItemId
    1		0		File
    1		1		Create File
    1		2		Edit File
    1		3		Delete File
    2		0		Data
    2		1		Add Data
    2		2		Edit Data
    3		0		Tools
    3		1		Macros

     

    Wednesday, April 19, 2017 2:55 AM
  • User-271186128 posted

    Hi NJ2,

    How do I fetch all this data from the database? I have a table like the following:

    It seems that you want to query the Parent Child relationship table, then display the result.

    I suggest you could refer to the following links, and try to use recursive function to achieve it:

    https://www.aspsnippets.com/Articles/Populate-Bind-ASPNet-TreeView-with-Parent-Child-relationship-from-database-in-ASPNet.aspx

    https://www.codeproject.com/articles/818694/sql-queries-to-manage-hierarchical-or-parent-child

    Best regards,
    Dillion

    Wednesday, April 19, 2017 9:05 AM