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 .
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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 ?
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
17 Points
70 Posts
Treeview on right iframe on left bootstrap
Oct 10, 2017 07:30 AM|NAF|LINK
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>Star
8660 Points
2882 Posts
Re: Treeview on right iframe on left bootstrap
Oct 11, 2017 05:46 AM|Cathy Zou|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
17 Points
70 Posts
Re: Treeview on right iframe on left bootstrap
Oct 11, 2017 05:53 AM|NAF|LINK
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 ?
Star
8660 Points
2882 Posts
Re: Treeview on right iframe on left bootstrap
Oct 12, 2017 02:31 AM|Cathy Zou|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.