locked
seperate rows in bootstrap RRS feed

  • Question

  • User181930479 posted

    Hi , 

    I am builfing a page using bootstrap , i have a right column that has a tree populate from sql , and on the left column an Iframe that is displaying a specific link when clicking on a node tree , the thing is that :

    1- if I scroll down the right column to see all nodes of the tree , both columns are scrolling , and i only want the right to scroll down..

    2-when I click on a node and when the iframe is display the data , both columns are being pushed down .

    3- when i resize the page , if i click on a node , the focus will move to the iframe , and i will have to scroll up to get back to the tree , i have used affix , but i faced problems with the right column .

    below is my code , hope someone can hint me :

     <meta name="viewport" content="width=device-width, initial-scale=1">
    
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" /></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" /></script>
    
    
      
    
    
    
        <style type="text/css">
        
        .ooo 
        {
              
              min-width:270px;
             
       
            }
            
         
         /* No greater than 990px, no less than 250px */
    @media (max-width:990px) and (min-width:250px) {
        .ooo {
           
              background-color:#cccccc;
              overflow: auto;
              max-height:200px;
              display:inline-block;
              width:100%;
              margin-bottom:30px;
              ;
             
    }​
    
    
    
    
        </style>
    
     </head>  
    <body style="padding-top: 60px;" >
    
        <form id="form1" runat="server">
    
        <nav class="navbar navbar-inverse navbar navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#">Lebanese Laws</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Briefcase<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">New Study</a></li>
                <li><a href="#">My Studies</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">My Translator</a></li>
              </ul>
            </li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
          </ul>
        </div>
      </div>
    </nav>
    
    
        <div class="container-fluid">
                <div class="row"> 
                            <div   ondrop="drop(event)" ondragover="allowDrop(event)"  class="col-md-4 col-md-push-8 ooo" >
                               <asp:TreeView ID="TreeView1"    runat="server" Font-Size="Small" dir="rtl" >
           </asp:TreeView> 
    
        
    
    
                            </div>
      
    
    
    
        <div style="height:650px;" class="col-md-8 col-md-pull-4 ppp ">
                              
                                    <iframe  style="border:0px; width:100%; height:100%;;direction:ltr;"  src="" id="naf" name="naf"  runat="server"></iframe>
                            </div>
                    </div>
            </div>
    
         
       
    
    
       
        </form>
    
       
    </body>
    </html>

    Tuesday, November 21, 2017 9:56 AM

All replies

  • User-1838255255 posted

    Hi NAF,

    According to your description and needs, I make a sample, please check:

    Sample Code:

    <head runat="server">
        <title>BootStrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .ooo {
                min-width: 270px;
            }
            /* No greater than 990px, no less than 250px */
            @media (max-width:990px) and (min-width:250px) {
                .ooo {
                    background-color: #cccccc;
                    overflow: auto;
                    max-height: 200px;
                    display: inline-block;
                    width: 100%;
                    margin-bottom: 30px;
                    ;
                }
            }
        </style>
    </head>
    <body style="padding-top: 60px;">
        <form id="form1" runat="server">
            <nav class="navbar navbar-inverse navbar navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Lebanese Laws</a>
                    </div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Briefcase<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">New Study</a></li>
                                    <li><a href="#">My Studies</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">My Translator</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Page 2</a></li>
                            <li><a href="#">Page 3</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>Logout</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="container-fluid">
                <div class="row">
                    <div ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 1px solid red; height: 100px; overflow-y: auto;" class="col-md-4 col-md-push-8 ooo">
                        <asp:TreeView ID="TreeView1" runat="server" Font-Size="Small" dir="rtl" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
                        </asp:TreeView>
                    </div>
                    <div style="height: 650px; border: 1px solid red;" class="col-md-8 col-md-pull-4 ppp ">
                        <iframe style="border: 0px; width: 100%; height: 100%; ; direction: ltr;" id="naf" name="naf" runat="server"></iframe>
                    </div>
                </div>
            </div>
        </form>
    </body>
    
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    //Can call From Database also
                    DataTable dt = RootNodes();
                    TreeNode headnode = new TreeNode();
                    headnode.Text = "This Is Head Node";
                    TreeView1.Nodes.Add(headnode);
                    //Loop for binding Parent Values
                    for (int i = 0; i < dt.Rows.Count; i++)
                    {
                        TreeNode firstchild = new TreeNode();
                        firstchild.Text = dt.Rows[i][1].ToString();
                        headnode.ChildNodes.Add(firstchild);
                        //Here you can pass argument.
                        DataTable dt1 = ChildNodes();
                        //Loop for binding Child Values.
                        for (int j = 0; j < dt1.Rows.Count; j++)
                        {
                            TreeNode childnode = new TreeNode();
                            childnode.Text = dt1.Rows[j][1].ToString();
                            firstchild.ChildNodes.Add(childnode);
                            //more over can expand the list.
                        }
                    }
                }
            }
            public DataTable RootNodes()
            {
                DataTable dt = new DataTable("Root");
                dt.Columns.Add("RootId", typeof(int));
                dt.Columns.Add("RootDesc", typeof(String));
                DataRow dr = dt.NewRow();
                dr[0] = "10";
                dr[1] = "Root Node One";
                dt.Rows.Add(dr);
                DataRow dr1 = dt.NewRow();
                dr1[0] = "20";
                dr1[1] = "Root Node Two";
                dt.Rows.Add(dr1);
                return dt;
            }
    
            public DataTable ChildNodes()
            {
                DataTable dt = new DataTable("Child");
                dt.Columns.Add("ChildId", typeof(int));
                dt.Columns.Add("ChildDesc", typeof(string));
                DataRow dr = dt.NewRow();
                dr[0] = "10";
                dr[1] = "Child Node One";
                dt.Rows.Add(dr);
                DataRow dr1 = dt.NewRow();
                dr1[0] = "20";
                dr1[1] = "Child Node Two";
                dt.Rows.Add(dr1);
                DataRow dr2 = dt.NewRow();
                dr1[0] = "30";
                dr1[1] = "Root Node Three";
                dt.Rows.Add(dr2);
                DataRow dr3 = dt.NewRow();
                dr1[0] = "240";
                dr1[1] = "Root Node Four";
                dt.Rows.Add(dr3);
                return dt;
            }
    
            protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
            {
                naf.Attributes.Add("src", "Accept.aspx");
                TreeView1.SelectedNodeStyle.ForeColor = Color.Red;
            }

    Result:

    But I am not clear the meaning of "2-when I click on a node and when the iframe is display the data , both columns are being pushed down .", so I hope you could give us a detailed description about this point.

    Best Regards,

    Eric Du

    Wednesday, November 22, 2017 9:22 AM
  • User181930479 posted

    But I am not clear the meaning of "2-when I click on a node and when the iframe is display the data , both columns are being pushed down .", so I hope you could give us a detailed description about this point.

    you will find below the Gif , hope this explains my point , 

    image   (click on image link here)

    Thursday, November 23, 2017 6:20 AM
  • User181930479 posted

    Hello ,

    Still the same problem , I mean if the iframe has paragraphs , if you click on a node , once the iframe is displaying the data , it will move down , meaning that the scrollbar of the entire page will move down , and this is what i dont want , i want to have a scrollbar that appears only in the div containing the tree  . and the div width should be auto.

     

    Thursday, November 23, 2017 6:26 AM
  • User-1838255255 posted

    Hi NAF,

    According to your description, if you use treeview node to locate the content paragraph instead of to load different page? So you click node the page scroll move!

    About that gif image, it is in your Network, so I can not access it in my side? so you could upload it to this site(http://postimages.org/), we could check it.

    About you want the auto width of div that contain the treeview, I notice that you have use bootstrap grid system, so the width is responsive.

    https://v4-alpha.getbootstrap.com/layout/grid/ 

    Best Regards,

    Eric Du

    Thursday, November 23, 2017 11:09 AM