Laden...

[Gelöst] Div-Container (Menü) mit TreeView-Element -> Darstellungsfehler

Erstellt von tikra vor 13 Jahren Letzter Beitrag vor 13 Jahren 1.895 Views
tikra Themenstarter:in
185 Beiträge seit 2007
vor 13 Jahren
[Gelöst] Div-Container (Menü) mit TreeView-Element -> Darstellungsfehler

Hallo,

ich habe folgendes Problem: In einem Div-Container, welcher sich als eine Art Menü auf der linken Seite erstreckt befindet sich ein TreeView-Element in einem UpdatePanel (neben anderen UpdatePanels). Expandiere ich nun ein Element innerhalb dieses UpdatePanels und ragt es über die zur Verfügung stehende Auflösung nach unten hinaus, so habe ich die Möglichkeit nach unten zu scrollen, dieser neu gewonnene Platz wird allerdings nicht mit durch den Style des Div-Containers gerendert (Hintergrund + rechter Rand zur Abgrenzung des Menüs).

Eine Lösung wäre mit Sicherheit um das gesamte Div-Menü-Element ein UpdatePanel zu legen und dies via .Update() neu rendern zu lassen, das kann allerdings doch nicht des Rätsels Lösung sein und finde ich auch alles andere als elegant, vor allem würde dies doch auch die (nicht benötigten) zu übertragenen Daten erhöhen.

Anhang: Vor der Expansion.

tikra Themenstarter:in
185 Beiträge seit 2007
vor 13 Jahren

Anhang: Nach der Expansion.

3.170 Beiträge seit 2006
vor 13 Jahren

Hallo,

ein paar Fragen dazu:

  • tritt das Problem in unterschiedlichen Browsern gleich auf?
  • hat das DIV noch andere Styles ((position / width / height etc.)?
  • hat das DIV noch übergeordnete Elemente, die verantwortlich sein könnten?
  • benutzt Du evtl. die "strict"-DTD?
  • kannst Du ggf. mal eine Art "Skelettstruktur" der Seite posten?

Gruß, MarsStein

Non quia difficilia sunt, non audemus, sed quia non audemus, difficilia sunt! - Seneca

tikra Themenstarter:in
185 Beiträge seit 2007
vor 13 Jahren

Hi, es tritt sogar ohne irgendwelches Nachladen oder UpdatePanels auf und mit "height: 100%" funktioniert es ebenfalls nicht, denke es ist ein einfacher HTML-/CSS-Fehler:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._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>Unbenannte Seite</title>
    
    <style type="text/css">
    
        #menu
        {
            background-color: #e8f2ff;
            
            border-right: 1px solid #2375af;
            width: 360px;
            
            position: absolute;
            top: 60px;
            left: 0px;
            bottom: 0px;
        }    
    
    </style>
    
</head>
<body>
    <form id="form1" runat="server">
    <div id="menu">
        
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode Text="Neuer Knoten" Value="Neuer Knoten">
                    <asp:TreeNode Text="Neuer Knoten" Value="Neuer Knoten"></asp:TreeNode>
                    <asp:TreeNode Text="Neuer Knoten" Value="Neuer Knoten"></asp:TreeNode>
                    // n-Knoten (copy & paste), bis sie über den Bildschirmrand hinaus ragen.
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
        
    </div>
    </form>
</body>
</html>

Edit: Mit margin: 0px erweitert er die background-color zwar passend zum Inhalt, damit ist das Problem aber quasi nur umgekehrt vorhanden... wenn der Inhalt zu "kurz" ist, wird die background-color nicht über den gesamten sichtbaren Bereich "aufgetragen".

Edit 2: Falscher Alarm, min-height funktioniert ebenfalls nicht.

tikra Themenstarter:in
185 Beiträge seit 2007
vor 13 Jahren

Das obere Beispiel ist nicht aussagekräftig und nicht vergleichbar.

Es WÜRDE nun zwar funktionieren, wenn das Menü sich erweitert, wenn aber der Content-Bereich sich erweitert, bleibt das Menü ebenfalls wieder statisch:

(Abwechselnd auf root- und child-Elemente klicken um hinzuzufügen.)

Codebehind:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                TreeView1.Nodes.Add(new TreeNode("root"));
                TreeView2.Nodes.Add(new TreeNode("root2"));
            }
        }

        protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
        {
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("child"));

        }

        protected void TreeView2_SelectedNodeChanged(object sender, EventArgs e)
        {
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));
            TreeView2.Nodes[0].ChildNodes.Add(new TreeNode("child"));

        }
    }
}

Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>Unbenannte Seite</title>
    <style type="text/css">
        #menu
        {
            background-color: #e8f2ff;
            border-right: 1px solid #2375af;
            width: 360px;
            position: absolute;
            top: 60px;
            left: 0px;
            min-height: 100%;
        }
        #content
        {
            background-color: White;
            padding-left: 10px;
            position: absolute;
            top: 75px;
            left: 375px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div id="menu">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
                </asp:TreeView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div id="content">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:TreeView ID="TreeView2" runat="server" OnSelectedNodeChanged="TreeView2_SelectedNodeChanged">
                </asp:TreeView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

3.170 Beiträge seit 2006
vor 13 Jahren

Hallo,

jaja, das CSS kann einen manchmal schon Nerven kosten 😉

Ich habe Deinen Code mal so geändert daß es funktionieren müsste. Der Trick ist ein zusätzliches DIV mit den selben Styles und position:fixed (bleibt beim Scrollen stehen) in den Hintergrund des eigentlichen Menüs zu legen, damit wird der Effekt ausgegliche.
Beachte, wo bottom und position gesetzt sind:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>Unbenannte Seite</title>
    <style type="text/css">
        #menu, #backgr
        {
            background-color: #e8f2ff;
            border-right: 1px solid #2375af;
            width: 360px;
            top: 60px;
            left: 0px;
        }
        #backgr
        {
           position:fixed;
           bottom:0px;
        }
        #menu
        {
           position:absolute;
        }
        #content
        {
            background-color: White;
            padding-left: 10px;
            position: absolute;
            top: 75px;
            left: 375px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div id="backgr" />
    <div id="menu">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
                </asp:TreeView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div id="content">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:TreeView ID="TreeView2" runat="server" OnSelectedNodeChanged="TreeView2_SelectedNodeChanged">
                </asp:TreeView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Gruß, MarsStein

Non quia difficilia sunt, non audemus, sed quia non audemus, difficilia sunt! - Seneca

tikra Themenstarter:in
185 Beiträge seit 2007
vor 13 Jahren

jaja, das CSS kann einen manchmal schon Nerven kosten 😉

Ja, wem sagst du das... da hat man sowieso Projektstress und dann muss man sich mit solchen Kleinigkeiten rumschlagen, die u. U. wahnsinnig Zeit fressen können...

Vielen Dank auf alle Fälle, es funktionuckelt. 👍 🙂