Click here to Skip to main content
15,867,835 members
Articles / Web Development / HTML5
Tip/Trick

Pure HTML5/CSS3/JS Panel and Splitcontainer in .NET Style; JQuery Not Needed

Rate me:
Please Sign up or sign in to vote.
5.00/5 (16 votes)
13 Nov 2016CPOL2 min read 41.4K   905   15   11
Some templates for HTML5, CSS3 and pure JS to create .NET style panels and splitcontainers, using CSS classes for docking. Pure HTML/CSS/JS solution, JQuery not needed.

Introduction

Recently, I have been busy developing an intranet GIS application and found myself needing the old faithful .NET panels and splitcontainers. I thought of sharing the code here. Note: I'm not an expert writing HTML, CSS and JS and there are raging discussions on HTML5, CSS3 and JS on the internet. Please don't start a new discussion with me. If you can use my templates, good! If not, too bad. I presume you have some experience with HTML5, CSS and JS (JavaScript), otherwise this may be not a good starting point for learning those topics. This trick/tip was inspired by GitHub repository of Nathan Cahill: nathancahill/Split.js.

How It Works...

Just download the zip file and load the HTML files in your browser. The veetpanels.html is pure HTML5/CSS3, no JavaScript (JS) involved. It makes use of the CSS3 FlexBox. In the HTML file, just create divs with classes panelcontainer and vertical or horizontal to set the direction of the flexbox. Within the panelcontainer, define your panels and how they should dock.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>veet panels</title>

    <!-- style sheets local -->
    <link rel="stylesheet" href="./veetbase.css">
    <link rel="stylesheet" href="./veetpanels.css">

</head>

<!-- gui -->
<body class="application">
    <header>Header</header>
    <nav class="veetcolormenu">Navigation</nav>
    <div class="panelcontainer vertical ">
        <div class="panel docktop " style="background:rgba(200,200,0,0.2);">p1 docktop</div>
        <div class="panel dockfill " style="background:rgba(0,200,200,0.2);">
            <div class="panelcontainer horizontal ">
                <div class="panel dockleft" style="background:rgba(200,200,0,0.2);">p3 dockleft</div>
                <div class="panel dockfill " style="background:rgba(0,200,200,0.2);">last dockfill</div>
                <div class="panel dockright " style="background:rgba(200,0,200,0.2);">p4 dockright</div>
            </div>
        </div>
        <div class="panel dockbottom " style="background:rgba(200,0,200,0.2);">p2 dockbottom</div>
    </div>
    <footer>Footer</footer>
</body>

<!-- js -->
<script>
</script>
</html>

Points of interest in the veetpanels.css (below) are:

  1. To make the panel either float to the right or bottom, use the margin-left or top: auto;
  2. If the panels are to remain flexible, never use anything but min-width or min-height. As soon you put in height: 100px; or width: 100%;, you will break the flexbox logic and behaviour becomes erratic (found out the hard way).
  3. To make a panel completely flexible to its neighbours, use the flex: 1 1 auto; option.
CSS
.panel.dockleft {
    min-width: 100px;
}

.panel.docktop {
    min-height: 100px;
}

.panel.dockright {
    min-width: 100px;
    margin-left: auto;
}

.panel.dockbottom {
    min-height: 100px;
    margin-top: auto;
}

.panel.dockfill {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

The veetsplit.html builds on the CSS classes of the veetpanels. It's <head> section loads two more files: veetsplit.css and veetsplit.js:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>veet split</title>

    <!-- style sheets local -->
    <link rel="stylesheet" href="./veetbase.css">
    <link rel="stylesheet" href="./veetpanels.css">
    <link rel="stylesheet" href="./veetsplit.css">
    <script src="./veetsplit.js"></script>

</head>

<!-- gui -->
<body class="application">
    <header>Header</header>
    <nav class="veetcolormenu">Navigation</nav>
    <div class="panelcontainer horizontal ">
        <div class="panel dockleft" style="background:rgba(255,0,0,0.2);">normal panel</div>
        <div id="mapcontainer" class="panelcontainer horizontal ">
            <div id="tools" class="splitpanel leftpanel ">
                <div id="toolcontainer" class="panelcontainer vertical ">
                    <div id="layers" class="splitpanel toppanel " 
                                     style="background:rgba(100,20,0,0.2);">layers</div>
                    <div id="splitterTool" class="splitter row"></div>
                    <div id="info" class="splitpanel bottompanel " 
                                   style="background:rgba(20,100,0,0.2);">info</div>
                </div>
            </div>
            <div id="splitterMap" class="splitter column"></div>
            <div id="map" class="splitpanel rightpanel " 
                          style="background:rgba(0,20,200,0.2);">map</div>
        </div>
        <div class="panel dockright" style="background:rgba(255,0,0,0.2);">2nd normal panel</div>
    </div>
    <footer>Footer</footer>
</body>

<!-- js -->
<script>
    veet.split.setSplit('splitterMap',{splitterSize:'10',startPosition:'75',
                         minSizePanel1:'10',minSizePanel2:'5',fixedPanel2:true});
    veet.split.setSplit('splitterTool',{splitterSize:'10',startPosition:'80',
                         minSizePanel1:'5',minSizePanel2:'10',isFixed:true,fixedPanel2:true});
    
    veet.split.logOptions('splitterMap');
</script>
</html>

If you want to create a splitterpanel, just create divs with classes splitpanel and one of the leftpanel, toppanel, rightpanel or bottompanel. And of course, add the splitter with the classes splitter and either row or column. Do not forget to give the splitter an id! It's the link with the js code.

Just initialize the split container with the js function veet.split.setSplit(splitterId,{options});. You can review the options for the current split container with the function veet.split.logOptions(splitterId);. Options you can use with the split container are: splitterSize, startPosition, isFixed, minSize, minSizePanel1, minSizePanel2, fixedPanel2. I tried to keep these as close as possible to the .NET split container options.

How It Looks

Some pictures below show the results.

HTML5/CSS3 panels using docking classes (no JavaScript needed):

Image 1

HTML5/CSS3/JS splitcontainers using docking classes (small JS module included):

Image 2

Splitcontainers used with a webgis application:

Image 3

Finally...

Let me know if it works for you!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Engineer VeeTools
Netherlands Netherlands
A (usually exploring) geologist who sometimes develops software for fun and colleagues... Check out my new website at www.veetools.xyz for online mapping and coordinate conversion.

Comments and Discussions

 
QuestionMessage Closed Pin
7-Jul-21 1:18
Member 152788597-Jul-21 1:18 
Praisegood post Pin
Member 1502653120-Dec-20 22:31
professionalMember 1502653120-Dec-20 22:31 
GeneralMy vote of 5 Pin
Farhad Reza17-Nov-16 4:29
Farhad Reza17-Nov-16 4:29 
GeneralRe: My vote of 5 Pin
veen_rp17-Nov-16 7:21
professionalveen_rp17-Nov-16 7:21 
GeneralMy vote of 5 Pin
Jay Bardeleben16-Nov-16 5:07
professionalJay Bardeleben16-Nov-16 5:07 
GeneralRe: My vote of 5 Pin
veen_rp16-Nov-16 18:46
professionalveen_rp16-Nov-16 18:46 
Tnx. Only praise sofar... I'm worried Confused | :confused:
QuestionSEO Pin
Member 1285316715-Nov-16 21:29
Member 1285316715-Nov-16 21:29 
AnswerRe: SEO Pin
veen_rp15-Nov-16 21:33
professionalveen_rp15-Nov-16 21:33 
QuestionOnline Demo Pin
Kyle A.B.15-Nov-16 6:53
professionalKyle A.B.15-Nov-16 6:53 
AnswerRe: Online Demo Pin
veen_rp15-Nov-16 17:23
professionalveen_rp15-Nov-16 17:23 
Question5ed Pin
Karthik_Mahalingam14-Nov-16 19:15
professionalKarthik_Mahalingam14-Nov-16 19:15 
AnswerRe: 5ed Pin
veen_rp14-Nov-16 21:41
professionalveen_rp14-Nov-16 21:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.