The last node in the TreeView (ASP) control is being displayed at a different location, though the hierarchical logic remains and I can collapse the node.
The TreeView is nested within a Panel, which is inside a <div>. I have made enough place for it to expand, and even maximized the TreeView size, but same issue. Now after some days of searching for help here, and because I'm new in Web designing. Also, there is no Scrollbar Property for the TreeView.
I'm coding using .NET 3.5
CODE:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Genographic._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>
<style type="text/css">
#form1
{
height: 100%;
}
.bigDiv
{
width: 100%;
height: 155px;
background-color: red;
}
.imageDiv
{
width: 50%;
height: 600px;
background-color: white;
}
.labelDiv
{
width: 39%;
height: 600px;
background-color: control;
}
div > div
{
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv">
<asp:Panel ID="Panel_Menu" runat="server" BackColor="#336699" Width="100%" Height="155px">
<center>
<asp:Label ID="Label1" runat="server" Text="..."
Font-Size="X-Large" ForeColor="White"></asp:Label>
</center>
<br>
</asp:Panel>
<div class="imageDiv">
<asp:Image ID="Image_Map" runat="server" Height="600px" Width="600px" ForeColor="#CCCCFF" />
</div>
<div class="labelDiv">
<asp:Panel ID="Panel1" runat="server" Height="582px" Width="640px" Style="display: inline-block;">
<br>
<asp:Label ID="Label2" runat="server" Text="Level: "></asp:Label>
<br>
<asp:TreeView ID="TreeView_Level" runat="server" PopulateNodesFromClient="False"
ShowLines="True" Height="300px" Width="251px">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<asp:Label ID="Label3" runat="server" Text=""></asp:Label>
<br>
<asp:TreeView ID="TreeView_2" runat="server" ShowLines="True">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
</asp:Panel>
</div>
</div>
</form>
</body>
</html>
I got it working using absolute positioning.
<!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>
<style type="text/css">
#form1
{
height: 100%;
}
.bigDiv
{
width: 100%;
height: 155px;
background-color: red;
}
.imageDiv
{
position: absolute;
top: 180px;
left: 510px;
width: 600px;
height: 100%;
background-color: green;
}
.labelDiv
{
position:absolute;
top: 180px;
left: 5px;
width: 500px;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv" style="background-color: #3366CC">
<center>
<asp:Label ID="Label1" runat="server" Text="..."
Font-Size="X-Large" ForeColor="White"></asp:Label>
</center>
<br>
<div class="imageDiv">
<asp:Image ID="Image_Map" runat="server" ForeColor="#CCCCFF" />
</div>
<div class="labelDiv">
<asp:Label ID="Label2" runat="server" Text="Level:"></asp:Label>
<br>
<asp:TreeView ID="TreeView_Level" runat="server" PopulateNodesFromClient="False"
ShowLines="True" Width="416px">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
<br>
<br>
<asp:Label ID="Label3" runat="server" Text="...:"></asp:Label>
<br>
<asp:TreeView ID="TreeView_H" runat="server" ShowLines="True">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
</div>
</div>
</form>
</body>
</html>
Related
Following is my ASP .NET Master page. Bootstrap.min.cs is present in my theme and the theme is defined in my webconfig file.
<%# Master Language="C#" CodeFile="HomePage.master.cs" Inherits="HomePage" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>e-Recruitment</title>
</head>
<body style="padding-left: 5px; padding-right: 5px">
<style type="text/css">
html, body {
height: 100%;
}
.center {
overflow: auto;
}
footer {
position: fixed;
height: 50px;
bottom: 0;
width: 100%;
}
.borderless td, .borderless th {
border: none;
}
.checkboxlist-inline li, .radiobuttonlist-inline li {
display: inline-block;
}
.checkboxlist-inline, .radiobuttonlist-inline {
margin-left: 8px;
}
.checkboxlist-inline label, .radiobuttonlist-inline label {
padding-left: 0;
padding-right: 8px;
}
</style>
<script src="../Scripts/jquery-3.2.1.slim.min.js"></script>
<script src="../Scripts/popper.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery-ui.css" rel="stylesheet" />
<form id="MainForm" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Company" Name="Company.JavaScript.CompanyScript.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="MainUpdPanel" runat="server">
<ContentTemplate>
<div id="ParentDiv" class="container-fluid center">
<div class="row">
<div class="col-md-1">
<img src="../Content/Images/logonew.png" class="img-responsive" />
</div>
<div class="col-md-11">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<asp:ContentPlaceHolder ID="PageContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<footer class="footer fixed-bottom">
<table class="table table-hover">
<tr>
<td style="width: 10%">
<asp:Label ID="lblTheme" runat="server" Text="Site Theme"></asp:Label>
</td>
<td style="width: 20%; text-align: left">
<asp:DropDownList ID="ddlTheme" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td style="width: 70%; text-align: right">
<small><i>©<asp:Label ID="lblComp" runat="server" Text=" Company 2018"></asp:Label>
®<asp:Label ID="lblRights" runat="server" Text=" Some message"></asp:Label></i></small>
</td>
</tr>
</table>
</footer>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Everything works fine, Footer stays at the bottom and pages work perfectly, but only problem is when the page content increases it is clashing with the footer, I have a save button in one of my child pages at the extreme bottom of the page, it is getting hiiden by my footer, User is able to view the button but unable to click because it is behing my footer, how to avoid this page content clashing into the footer.
I'm using html and CSS to create a master page for ASP.NET. However my top banner is not working, unlike the rest of the pictures. It does however show on the design tab of Visual studio. I have place the necessary code only below, can someone help please?
HTML:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div runat="server" id="top">
</div>
</div>
</form>
</body>
</html>
CSS:
body
{
background-image: url(../Images/background_5.jpg);
/*font-family: Arial;
color: rgb(0, 0, 0);
background-color: rgb(225, 201, 201);
line-height: normal;
font-size: 12px;
background-position: 0% 0%;
background-repeat: repeat;
background-attachment: scroll;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;*/
}
#form1
{
width: 1200px;
}
#container
{
background-color: White;
padding-left: 20px;
padding-right: 20px;
float:left;
left: 50%;
position:relative;
margin-left: -450px;
width: 910px;
height: 1800px;
}
#top
{
background: url(../Images/Banner.jpg);
/*padding-left: 10px;*/
height: 250px;
width: 900px;
}
#loginDiv
{
float: right;
padding-right: 20px;
text-align: right;
height: 142px;
font-family:Century Gothic;
}
#middle
{
padding-left: 10px;
width: 900px;
}
If you would like to see the entire HTML code, it's attached below:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div runat="server" id="top">
<asp:Label ID="WelcomeLabel" runat="server" Text="Label" Font-Italic="False"
Font-Names="Century Gothic" Font-Overline="False" Font-Size="Medium"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Sign out" BackColor="Black"
BorderColor="Black" BorderStyle="Outset" Font-Names="Century Gothic"
ForeColor="White" Width="75px" />
<br />
<div id="loginDiv" runat="server">
<asp:Label ID="Label1" runat="server" Text="Username"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Login"
BackColor="Black" BorderStyle="Outset" Font-Names="Century Gothic"
ForeColor="White"/>
<br />
<asp:Label ID="Label3" runat="server"></asp:Label>
</div>
</div>
<div runat="server" id="middle">
<div id="left" runat="server" style="float: left; width: 33%; margin: 0; ">
Categories
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
<div>
<asp:Label ID="lblItemsShoppingCart" runat="server" Text=""></asp:Label>
</div>
</div>
<div id="Right" runat="server" style="float: left; width: 67%; margin: 0; " class="sf_colsOut">
<asp:contentplaceholder id="contentplace" runat="server" />
</div>
</div>
</div>
</form>
</body>
</html>
can you try this path "~/Images/Banner.jpg" . To me sometimes some paths do not work, others are not. sometimes solve so.
Link to css file:
<link href="~/css/StyleSheet.css" rel="stylesheet" type="text/css" />
Also, to the images
does it actually look like this in your code?: background: url(../Images/Banner.jpg);
The ../ isn't the proper way to write a path, take that bit off and you should be golden, like so:
(images/banner.jpg);
edit: I also recommend putting the banner in a <div>, giving it an ID and using position: fixed; top: 0px; to attach it to the top of the page. Remember to give it a width and height as well or it won't display.
I am trying to add background images to only a few pages where as the other pages will not have one. Do I need a separate masterpage for the pages with background images or can I do this by overriding the existing styles?
My last attempt has a nested div with the image...
page with background:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Burgundy.aspx.cs" Inherits="WineCellar.UI.Pages.Burgundy.Burgundy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ApplicationContent" runat="server">
<div style="background-image: url(~/Images/burgundy.png); height: 430px; width: 940px;">
</div>
</asp:Content>
masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="WineCellar.UI.MasterPage" %>
<!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>
<link rel="Stylesheet" type="text/css" href="/Styles/Site.css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="PageWrapper">
<div id="Header"><a id="A1" href="~/" runat="server">need a header</a></div>
<div id="MenuWrapper">
<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
<StaticMenuItemStyle HorizontalPadding="6px" VerticalPadding="2px"/>
<DynamicHoverStyle BackColor="#CC3300" ForeColor="#310062" />
<DynamicMenuStyle BackColor="#310062" />
<StaticSelectedStyle BackColor="#CC3300" />
<DynamicSelectedStyle BackColor="#310062" />
<DynamicMenuItemStyle HorizontalPadding="6px" VerticalPadding="4px"/>
<StaticHoverStyle ForeColor="White" BackColor="#310062" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<div id="MainContent">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="breadCrumbTrail">
<RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath>
<br />
<h1>Title</h1>
<br />
<br />
<asp:ContentPlaceHolder ID="ApplicationContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="Footer"><%=DateTime.Now.Year.ToString() %></div>
</div>
</form>
</body>
</html>
maincontent style:
#MainContent
{
background-color: #310062;
width: 940px;
height: 480px;
color: #ffffff;
min-height: 480px;
padding: 10px;
font-size: 0.8em;
float: left;
}
Thanks for any help!
put a contentplaceholder in the head, and in each page put a style tag with the extra div styling in it. probably not the best way to do it, but would work for a few pages only.
<style>#MainContent{background-image:url(~/Images/burgundy.png);height:430px;width:940px;</style>
this should override the style you set in your external css file.
(although ideally all css should be placed in external css files, and not style tags)
Create a style sheet just for the child page. Use the body tag to apply the CSS style.
body {
background-image: url('images/background-image.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
vertical-align: top;
background-position: 0% 20%;
}
Tested and working solution.
i am trying to align a few buttons in my asppanel. So but1 and but3 need to be left aligned?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.flo
{
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel CssClass="fl0" ID="pnl1" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px"
Height="42px">
<div style="margin-top: 0px; margin-left: -28px; float:left">
<asp:Button ID="Button1" runat="server" Text="but1" />
<asp:Button ID="Button2" runat="server" Text="but2" Visible="true" />
<asp:Button ID="Button3" runat="server" Text="but3" Visible="true" />
</div>
</asp:Panel>
</div>
</form>
</body>
</html>
try this:
div style="text-align:left; padding:10px 0 0 0;">
<div style="padding:3px 0 0 0; height: 36px;">
<asp:Button ID="Button1" runat="server" Text="but1" />
<asp:Button ID="Button2" runat="server" Text="but2" Visible="true" />
<asp:Button ID="Button3" runat="server" Text="but3" Visible="true" />
</div>
</div>
I have a dropdownlist (asp.net) and when user change the selection from the dropdownlist it display respected div.
i need help in aligning the controls. and want to look like this:
DropdownListControl -- > selected_div -- > button
below is my soucr code....
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
<div id="divDateRangeSearch">
<div style="float: left">
<asp:Label ID="lblDateRange" runat="server" Text="Date Range"></asp:Label>
<br />
<uc1:DatePicker ID="FromDate" runat="server" />
<uc1:DatePicker ID="ToDate" runat="server" />
</div>
</div>
<div id="divSearchSubject" >
<div style="float: left">
<asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label><br />
<asp:TextBox ID="txtSubject" runat="server" Width="225px"></asp:TextBox>
</div>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<br />
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
UPDATE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#main {
width: 800px;
}
#select {
float: left;
width: 250px;
border: 1px solid blue ;
}
#holder {
position: relative;
width: 300px;
float: left;
margin-left: 20px;
border: 1px solid red ;
}
#div_date, #div_subject, #div_status {
position: absolute;
top: 0;
left: 0;
}
#button {
float: left;
margin-left:20px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$('#filterResultsBy').change(function () {
var sel = $(this).val();
$('#div_date').hide();
$('#div_subject').hide();
$('#div_status').hide();
if (sel === 'Date') {
$('#div_date').show();
}
else if (sel == 'Subject') {
$('#div_subject').show();
}
else if (sel == 'Status') {
$('#div_status').show();
}
});
});
</script>
<div id="main">
<div id="select">
Filter Results by:
<select id="filterResultsBy">
<option value="">Select...</option>
<option value="Date">Date</option>
<option value="Subject">Subject</option>
<option value="Status">Status</option>
</select>
</div>
<div id="holder">
<div id="div_date" style="width: 250px; display: none;" >
Date Range:
<asp:textbox width="50px" id="startdate" runat="server" /> - to - <asp:textbox width="50px" id="enddate" runat="server" />
</div>
<div id="div_subject" style="display: none;" >
Subject:
<asp:TextBox ID="txtSubject" runat="server" Width="225px" ></asp:TextBox>
</div>
<div id="div_status" style="display: none;" >
Status:
<asp:DropDownList ID="ddlStatus" runat="server" Width="152px">
</asp:DropDownList>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>
</form>
</body>
</html>
Sure, not a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:
select {
float: left;
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
float: left;
margin-left: 20px; /* put some space between the elements */
}
The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:
#divHolder {
position: relative;
float: left;
width: 200px; /* adjust as needed */
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
position: absolute;
top: 0;
left: 0;
}
And the HTML:
<div id="divHolder">
<!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<div style="float:left">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
<div style="float:left">
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>