fc2ブログ

記事一覧

DIVで囲れたコントロールを横並びに配置しスクロールを表示する方法 | asp.net


asp.net のコントロールを横並びに配置し、かつ、はみ出した部分はスクロールすることにより表示したい場合がありますが、そのhtml上のレイアウト方法についてご紹介いたします。今回はTreeViewをDIVで囲んだものを横並びに表示してスクロールを表示しています。横幅はjQueryで調節していきます。


aspnet_div_float_scroll_01.png



前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降



1.CSSの設定

aspnet_div_float_scroll_02.png
最初に横並びにしたいコントロール(今回はTreeView)をDIVで囲い(孫DIV)、左から横並びになるように設定します。
    float: left;
次に複数の孫DIVをDIVで囲います(子DIV)。子DIVには最小の横幅を設定します。これによりスクロールの中でも改行されずに表示されます。
    min-width : 1200px;
最後に親のDIVに縦横のスクロールを表示するための設定と、高さと横幅を設定します。
    overflow :auto;
    height : 300px;
    width : 800px;




2.jQueryで横幅を動的に変更する

コントロールの大きさがデータによって変更になる場合、子DIVの大きさを超えてしまう場合があります。その場合、超えたコントロールが改行されて表示されてしまう事を防ぐために、jQueryで孫DIVの横幅を合計し、子DVIの横幅を調節することが必要です。これにより横スクロールの大きさも動的に変更されます。
//ページ表示時に設定を変更する。
$(window).load(function () {
    ResizeTrvArea();
});
//孫DIVの横幅を全て加算し、子DIVの横幅を設定する
function ResizeTrvArea() {
    var boxes = $(".trv-area .wrapper-area .box")
    var width = 0;
    for (var i = 0; i < boxes.length - 1; i++) {
        if (boxes[i] != null && boxes[i] != undefined) {
//boxの幅 + boxの余白 + 50px?←要調整
            width += boxes[i].clientWidth + 90
        }
    }
    $(".trv-area .wrapper-area").css({
        "width": width,
    });
}



3.サンプルコード

aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TreeViewTest.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TreeViewTest</title>
    <link rel="stylesheet" type="text/css" href="~/Scripts/Style.css" media="all" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        function PostBackForTreeView()
        {
            var o = window.event.srcElement;
            if (o.tagName == "INPUT" && o.type == "checkbox")
            {
                __doPostBack("","");
            }
        }
//ページ表示時に設定を変更する
        $(window).load(function () {
            ResizeTrvArea();
        });
//孫DIVの横幅を全て加算し、子DIVの横幅を設定する
        function ResizeTrvArea() {
            var boxes = $(".trv-area .wrapper-area .box")
            var width = 0;
            for (var i = 0; i < boxes.length - 1; i++) {
                if (boxes[i] != null && boxes[i] != undefined) {
                    width += boxes[i].clientWidth + 90
                }
            }
            $(".trv-area .wrapper-area").css({
                "width": width,
            });
        }
    </script>
    <div class="trv-area">
        <div class="wrapper-area">
            <div class="box">
                <asp:TreeView ID="trvTest1" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="RedFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest2" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest3" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest4" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest5" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest6" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

CSS
body {
}
.RedFont {
    color:#FF0000;
    font: bold 12px;
}
.BlueFont {
    color:#0000FF;
    font: bold 12px;
}

.trv-area {
    overflow :auto;
    height : 300px;
    width : 800px;
}
.wrapper-area{
    min-width : 1200px;
    min-height : 500px;
}
.box {
    float: left;
    margin : 20px;
}


TreeViewでポストバックを発生させる方法については以下のURLでご紹介しております。
/blog-entry-122.html

TreeViewにおいて親子関係のチェックを付ける方法については以下のURLでご紹介しております。
/blog-entry-123.html





最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。