locked
Treeview on right iframe on left bootstrap RRS feed

  • Question

  • User181930479 posted

    I need to create a page that holds a treeview on the right and an iframe that displays the page based on the node click ,  nodes are fetched from the database , by far the programing part is done , and I am using bootstrap , but the problem is the iframe is not 100 % fitting as well as when i resize the page , the column containing the treeview has padding space, I will only share below my HTML BOOTSTRAP CODE , hope someone can help .

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    
        <title></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>
    </head>
    <body>
        <form id="form1" runat="server">
           
               
    
        <div class="container-fluid">
    	<div class="row">
    		<div class="col-md-12">
    			<div class="row">
    				<div style="float:right;" class="col-md-8">
    					<h2>
    						Tree Section
    					</h2>
    
    
                        
    						<asp:TreeView ID="tv" ShowLines="true" runat="server"  Target="naf" ></asp:TreeView>
    					
    					
                          
                            <br />
    					
      
                     
    				</div>
    				<div class="col-md-4">
    					<h2>
    						Iframe Section
    					</h2>
                  
    
                     <p ><iframe class="col-lg-12 col-md-12 col-sm-12" style="border:0px; height:auto;" src="" id="naf" name="naf" runat="server"></iframe></p>
    
                   
                     
    			
    					
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    
       
        </form>
    
    
           
    </body>
    </html>
    

    Tuesday, October 10, 2017 7:30 AM

Answers

  • User-707554951 posted

    Hi  NAF,

    Are you want something as below?

     <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>
    
        <div class="container-fluid">
                <div class="row"> 
                            <div style="background-color:lavender" class="col-sm-8 col-sm-push-4" >
                                <h2>Tree Section
                                </h2>
                                <asp:TreeView ID="tv" ShowLines="true" runat="server" Target="naf" ></asp:TreeView>
                                <br />
                            </div>
                            <div class="col-sm-4 col-sm-pull-8"  style="background-color:cadetblue;">
                                <h2>Iframe Section
                                </h2>
    
                                    <iframe  style="border:0px; height:auto; width:100%;background-color:coral;"    src="~/Test/Applying CSS on Button click through AngularJS.aspx" id="naf" name="naf" runat="server"></iframe>
                            </div>
                    </div>
            </div>

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 11, 2017 5:46 AM

All replies

  • User-707554951 posted

    Hi  NAF,

    Are you want something as below?

     <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>
    
        <div class="container-fluid">
                <div class="row"> 
                            <div style="background-color:lavender" class="col-sm-8 col-sm-push-4" >
                                <h2>Tree Section
                                </h2>
                                <asp:TreeView ID="tv" ShowLines="true" runat="server" Target="naf" ></asp:TreeView>
                                <br />
                            </div>
                            <div class="col-sm-4 col-sm-pull-8"  style="background-color:cadetblue;">
                                <h2>Iframe Section
                                </h2>
    
                                    <iframe  style="border:0px; height:auto; width:100%;background-color:coral;"    src="~/Test/Applying CSS on Button click through AngularJS.aspx" id="naf" name="naf" runat="server"></iframe>
                            </div>
                    </div>
            </div>

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 11, 2017 5:46 AM
  • User181930479 posted

    Hello , this is exactly what I wanted thank you so much.

    but I still have a small question , if i want on resize ( when screen is adjusted for tablets or phones ) to transform the tree into a combo box , and hint ? 

    Wednesday, October 11, 2017 5:53 AM
  • User-707554951 posted

    Hi  NAF

    For your problem, you should have treeview(visible) and combo box (invisible)in your page 

    Then to make combo box visible when screen is adjusted for tablets or phones

    Following code is helpful for you:

    $(window).resize(function() {
      // This will execute whenever the window is resized
      $(window).height(); // New height
      $(window).width(); // New width
    });

    Best regards

    Cathy

    Thursday, October 12, 2017 2:31 AM