Radio button align horizontally, but not vertically

Radio button align horizontally, but not vertically - c#

My radio buttons align horizontally, but not vertically. I would like my radio buttons to line up with the length of my text. I don't know if it's because my css is placed in the wrong div.. here is my code for my cshtml view:
<h1 style="text-align:center"><b>INSPECTION DE TYPE HEBDOMADAIRE</b></h1>
<div class="container">
#{
int itemCounter = 0;
int camionCounter = 0;
}
#foreach (var camion in Model)
{
<br />
<h2 style="text-align:center">#camion.CamionNumero</h2>
<hr style="margin-bottom:0px; margin-top:0px" />
camionCounter++;
<table class="table">
<thead>
<tr>
<th>
<div>
#if (camion.composanteContent != null)
{
foreach (var composante in camion.composanteContent)
{
<h3><u>#composante.ComposanteName</u></h3>
if (composante.itemContent != null)
{
foreach (var item in composante.itemContent)
{
<div class="item-radio-comment-container">
<div style="font-size: 1.2em;" id="itemText_#(itemCounter)">· #item.ItemName</div>
<div class="radio">
<label>
<input type="radio" id="chkOK_#(itemCounter)" name="chkInventaire_#(camion.CamionNumero)_#(composante.ComposanteName)_#(item.ItemName)">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign" color="green"></i></span>
Ok
</label>
<label>
<input type="radio" id="chkAVerif_#(itemCounter)" name="chkInventaire_#(camion.CamionNumero)_#(composante.ComposanteName)_#(item.ItemName)">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign" color="darkorange"></i></span>
À Vérifier
</label>
</div>
<div style="display: inline-block; padding: 10px; display: none;" id="dvComment_#(itemCounter)">
<input type="text" class="form-control" style="width:20em;" id="txtComment_#(itemCounter)" placeholder="Veuillez entrer votre commentaire.." />
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#chkAVerif_#(itemCounter)").click(function () {
$("#dvComment_#(itemCounter)").show();
$('#itemText_#(itemCounter)').css('text-decoration', 'none');
});
$("#chkOK_#(itemCounter)").click(function () {
$("#dvComment_#(itemCounter)").hide();
$('#itemText_#(itemCounter)').css('text-decoration', 'line-through');
});
});
</script>
itemCounter++;
}
}
}
}
<hr />
</div>
</th>
</tr>
</thead>
</table>
}
Here is my css or did i try with item-radio-comment-container to make my radio button and my dvComment all align vertically so it is the same length relying on the text of the longest item while remaining on the same line horizontally :
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 20%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
transform: scale(3) rotateZ(-20deg);
opacity: 0;
transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
transform: scale(1) rotateZ(0deg);
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
opacity: .5;
}
.radio input[type="radio"] {
vertical-align: middle;
}
.item-radio-comment-container {
display: flex;
align-items: center;
}
#media (max-width: 767px) {
.item-radio-comment-container {
display: block;
}
}
And here is a picture of the result :

Related

setting div to row but nothing happens

I am trying to make the three items in the top_three div to be displayed in a row but when I set it to row nothing happens, but if I set the .scoreboard to row then I get the row, but I don't want the .restplaces div to be in a row I want it to be displayed underneath, I really don't understand why it's not working.
I use a css file with a Razor component:
Razor component:
#if (Teams is not null)
{
<div class="confetti_container">
<div class="confetti"></div>
**(There are like 20 more of this div but i don't wanna clutter this here)**
</div>
<div class="scoreboard">
#do
{
_place++;
var allteams = Teams.Where(team => team.TeamPoints ==
Teams[0].TeamPoints).ToList();
foreach (var team in allteams)
{
<div class="top_three">
#if (_place == 2)
{
<div class="secondplace">
<div class="secondplaceimg"></div>
<h1>#team.TeamName</h1>
</div>
}
#if (_place == 1)
{
<div class="firstplace">
<div class="firstplaceimg"></div>
<h1>#team.TeamName</h1>
</div>
}
#if (_place == 3)
{
<div class="thirdplace">
<div class="thirdplaceimg"></div>
<h1>#team.TeamName</h1>
</div>
}
</div>
#if (_place > 3)
{
<div class="restplaces">
<p>#_place. #team.TeamName</p>
</div>
}
Teams.Remove(team);
}
if (Teams.Count == 0)
{
_scoreboardCreated = true;
}
} while (_scoreboardCreated == false);
</div>
}
else if (_deleted is true)
{
<h1>Session expired</h1>
}
else
{
<h1>Loading...</h1>
}
And here the CSS-file (I use a div with a background-image because the img htmltag just doesn't seem to load the image).
.scoreboard {
display:flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.top_three {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.firstplace {
padding: 8vh 5vw 5vh 5vw;
}
.firstplaceimg {
background-image: url("/images/Firstplace.png");
height: 340px;
width: 315px;
}
.secondplace {
padding: 15vh 5vw 5vh 5vw;
}
.secondplaceimg {
background-image: url("/images/Secondplace.png");
height: 270px;
width: 250px;
}
.thirdplace {
padding: 28vh 5vw 8vh 5vw;
}
.thirdplaceimg {
background-image: url("/images/Thirdplace.png");
height: 170px;
width: 155px;
}
.restplaces {
display:flex;
margin: 0vh 0vw 5vh 3vw;
background-color: #bd8379;
width: 10vw;
border-radius: 20px;
box-shadow: 0 0 5px 2px rgba(0,0,0, .30);
}
/*CONFETTI*/
.confetti_container {
min-height: 70vh;
overflow: hidden;
padding: 60px;
position: absolute;
width: 95%;
}
.confetti {
background: rgb(166,124,0);
background: linear-gradient(0deg, rgba(166,124,0,1) 0%, rgba(191,155,48,1) 10%,
rgba(255,191,0,1) 20%, rgba(255,207,64,1) 30%, rgba(255,220,115,1) 40%,
rgba(255,216,99,1)
50%, rgba(255,220,115,1) 60%, rgba(255,207,64,1) 70%, rgba(255,191,0,1) 80%,
rgba(191,155,48,1) 90%, rgba(166,124,0,1) 100%);
border: 1px solid #A57C01;
position: absolute;
display: flex;
width: 10px;
height: 25px;
top: -100px;
}
.confetti:nth-child(1) {
animation: fall 2.5s linear infinite;
left: 10%;
}
It feels like I'm just missing a tiny detail
Thanks for the help!

You can try to use display: inline-block; to make the divs in one row,change the css of scoreboard and top_three like this:
.scoreboard {
flex-direction: column;
text-align: center;
align-items: center;
}
.top_three {
display: inline-block;
flex-direction: row;
justify-content: center;
align-content: center;
}
result:

How can I handling with nested data-parent

I want to do a Menu with 3 levels using data-parents do close like that:
Menu1
---SubMenu1
------Sub_SubMenu1
------Sub_SubMenu2
---SubMenu2
Menu2
---SubMenu22
------Sub_SubMenu21
------Sub_SubMenu22
---SubMenu22
So I have the following sample code (not with full menu):
<div id="Menu1">
<button data-toggle="collapse" data-target="#div1">
Menu1
</button>
<div id="div1" data-parent="Menu1">
<div id="SubMenu1">
<button data-toggle="collapse" data-target="#div1">
SubMenu1
</button>
<div id="submenu1"></div>
<button data-toggle="collapse" data-target="#submenu2">
SubMenu2
</button>
<div id="submenu2"></div>
</div>
</div>
</div>
My problem is when I open any SubSubMenu And after I open a Menu , SubSubMenu isn't closed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<style>
.animate-menu-push {
left: 0;
position: relative;
transition: all 0.3s ease; }
.animate-menu-push.animate-menu-push-right {
left: 200px; }
.animate-menu-push.animate-menu-push-left {
left: -200px; }
.animate-menu {
position: fixed;
top: 0;
width: 200px;
height: 100%;
transition: all 0.3s ease; }
.animate-menu-left {
left: -200px; }
.animate-menu-left.animate-menu-open {
left: 0; }
.animate-menu-right {
right: -200px; }
.animate-menu-right.animate-menu-open {
right: 0; }
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
background-color: #222d32; }
.sidebar-menu > li {
position: relative;
margin: 0;
padding: 0; }
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
border-left: 3px solid transparent;
color: #b8c7ce; }
.sidebar-menu > li > a > .fa {
width: 20px; }
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc; }
.sidebar-menu > li .label,
.sidebar-menu > li .badge {
margin-top: 3px;
margin-right: 5px; }
.sidebar-menu li.sidebar-header {
padding: 10px 25px 10px 15px;
font-size: 12px;
color: #4b646f;
background: #1a2226; }
.sidebar-menu li > a > .fa-angle-left {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
margin-top: 3px; }
.sidebar-menu li.active > a > .fa-angle-left {
transform: rotate(-90deg); }
.sidebar-menu li.active > .sidebar-submenu {
display: block; }
.sidebar-menu a {
color: #b8c7ce;
text-decoration: none; }
.sidebar-menu .sidebar-submenu {
display: none;
list-style: none;
padding-left: 5px;
margin: 0 1px;
background: #2c3b41; }
.sidebar-menu .sidebar-submenu .sidebar-submenu {
padding-left: 20px; }
.sidebar-menu .sidebar-submenu > li > a {
padding: 5px 5px 5px 15px;
display: block;
font-size: 14px;
color: #8aa4af; }
.sidebar-menu .sidebar-submenu > li > a > .fa {
width: 20px; }
.sidebar-menu .sidebar-submenu > li > a > .fa-angle-left,
.sidebar-menu .sidebar-submenu > li > a > .fa-angle-down {
width: auto; }
.sidebar-menu .sidebar-submenu > li.active > a, .sidebar-menu .sidebar-submenu > li > a:hover {
color: #fff; }
.sidebar-menu-rtl {
list-style: none;
margin: 0;
padding: 0;
background-color: #222d32; }
.sidebar-menu-rtl > li {
position: relative;
margin: 0;
padding: 0; }
.sidebar-menu-rtl > li > a {
padding: 12px 15px 12px 5px;
display: block;
border-left: 3px solid transparent;
color: #b8c7ce; }
.sidebar-menu-rtl > li > a > .fa {
width: 20px; }
.sidebar-menu-rtl > li:hover > a, .sidebar-menu-rtl > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc; }
.sidebar-menu-rtl > li .label,
.sidebar-menu-rtl > li .badge {
margin-top: 3px;
margin-right: 5px; }
.sidebar-menu-rtl li.sidebar-header {
padding: 10px 15px 10px 25px;
font-size: 12px;
color: #4b646f;
background: #1a2226; }
.sidebar-menu-rtl li > a > .fa-angle-left {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
margin-top: 3px; }
.sidebar-menu-rtl li.active > a > .fa-angle-left {
transform: rotate(-90deg); }
.sidebar-menu-rtl li.active > .sidebar-submenu {
display: block; }
.sidebar-menu-rtl a {
color: #b8c7ce;
text-decoration: none; }
.sidebar-menu-rtl .sidebar-submenu {
display: none;
list-style: none;
padding-right: 5px;
margin: 0 1px;
background: #2c3b41; }
.sidebar-menu-rtl .sidebar-submenu .sidebar-submenu {
padding-right: 20px; }
.sidebar-menu-rtl .sidebar-submenu > li > a {
padding: 5px 15px 5px 5px;
display: block;
font-size: 14px;
color: #8aa4af; }
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa {
width: 20px; }
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-left,
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-down {
width: auto; }
.sidebar-menu-rtl .sidebar-submenu > li.active > a, .sidebar-menu-rtl .sidebar-submenu > li > a:hover {
color: #fff; }
</style>
<body>
<section style="width: 200px">
<ul class="sidebar-menu">
<li class="sidebar-header">MAIN NAVIGATION</li>
<li>
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-share"></i> <span>Multilevel</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level One</li>
<li>
<i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level Two</li>
<li>
<i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level Three</li>
<li><i class="fa fa-circle-o"></i> Level Three</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-circle-o"></i> Level One</li>
</ul>
</li>
</ul>
</section>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$.sidebarMenu = function(menu) {
var animationSpeed = 300,
subMenuSelector = '.sidebar-submenu';
$(menu).on('click', 'li a', function(e) {
var $this = $(this);
var checkElement = $this.next();
if (checkElement.is(subMenuSelector) && checkElement.is(':visible')) {
checkElement.slideUp(animationSpeed, function() {
checkElement.removeClass('menu-open');
});
checkElement.parent("li").removeClass("active");
}
//If the menu is not visible
else if ((checkElement.is(subMenuSelector)) && (!checkElement.is(':visible'))) {
//Get the parent menu
var parent = $this.parents('ul').first();
//Close all open menus within the parent
var ul = parent.find('ul:visible').slideUp(animationSpeed);
//Remove the menu-open class from the parent
ul.removeClass('menu-open');
//Get the parent li
var parent_li = $this.parent("li");
//Open the target menu and add the menu-open class
checkElement.slideDown(animationSpeed, function() {
//Add the class active to the parent li
checkElement.addClass('menu-open');
parent.find('li.active').removeClass('active');
parent_li.addClass('active');
});
}
//if this isn't a link, prevent the page from being redirected
if (checkElement.is(subMenuSelector)) {
e.preventDefault();
}
});
}
$.sidebarMenu($('.sidebar-menu'))
</script>
</body>
</html>

If you want to test it in the "Code snippet" will appear exactly as it appears on smart phones, but the appearance will vary completely on the desktop
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen ul {
width: 100%;
display: none;
}
#cssmenu.small-screen.align-center > ul {
text-align: left;
}
#cssmenu.small-screen ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
float: none;
}
#cssmenu.small-screen ul ul li a {
padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
color: #ffffff;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu.small-screen ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Test</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li><i class="fa fa-fw fa-bars"></i> Menus
<ul>
<li>Menu 1
<ul>
<li>Sub menu 1.1
<ul>
<li>Sub_SubMenu 1.1.1</li>
<li>Sub_SubMenu 1.1.2</li>
</ul>
</li>
<li>Sub menu 1.2</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub menu 2.1
<ul>
<li>Sub_SubMenu 2.1.1</li>
<li>Sub_SubMenu 2.1.2</li>
</ul>
</li>
<li>Sub menu 2.2</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-fw fa-cog"></i> Settings</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

Generate menu dynamically using c# in asp.net with css for parent and sub menu

I generate following structure for menu dynamically using recursive function.
<ul >
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Menu 2.1</li>
<li>Menu 2.2</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5
<ul >
<li>Menu 5.1</li>
<li>Menu 5.2</li>
</ul>
</li>
<li>Menu 6</li>
</ul>
I want to generate same with saperate class for parent menu & sub menu as
<ul class="nav parent-menu">
<li>Home</li>
<li>Menu 1</li>
<li class="dropdown" >Menu 2
<ul class="sub-menu">
<li>Menu 2.1</li>
<li>Menu 2.2</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li class="dropdown">Menu 5
<ul class="sub-menu">
<li>Menu 5.1</li>
<li>Menu 5.2</li>
</ul>
</li>
<li>Menu 6</li>
</ul>
I need to add three different classes nav parent-menu class="dropdown" class="sub-menu"
C# Code
Not sure where i should should change the code to make it work.
private string GenerateMenu(DataRow[] menu, DataTable table, StringBuilder sb)
{
sb.AppendLine("<ul class='nav navbar-nav'>");
if (menu.Length > 0)
{
foreach (DataRow dr in menu)
{
string menuName = dr["MenuName"].ToString();
string menuURL = dr["MenuURL"].ToString();
string line = string.Empty;
line = String.Format(#"<li>" + menuName + "", handler, menuName);
sb.Append(line);
string pid = dr["MenuId"].ToString();
string parentId = dr["MenuInheritance"].ToString();
DataRow[] subMenu = table.Select(String.Format("MenuInheritance = {0}", pid));
if (subMenu.Length > 0 && !pid.Equals(parentId))
{
var subMenuBuilder = new StringBuilder();
sb.Append(GenerateMenu(subMenu, table, subMenuBuilder));
}
sb.Append("</li>");
}
}
sb.Append("</ul>");
return sb.ToString();
}
//Call Function
GenerateMobileUL(parentMenus, table, sbMobile);
Table Structure
MenuID
MenuName
MenuURL
MenuInheritance
MenuNewPage

Copy And Paste and name it as Menu.css
#cssmenu {
position: relative;
background:#DCDCDC;
width:100%;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background:Skyblue;
width: 100%;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family:Times New Roman;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 16px;
font-weight: bold;
padding: 15px 10px;
color: Black;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu li.has-sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 0.5px solid #eeeeee;
padding: 10px 20px;
font-size: 14px;
color: Black;
background:#DCDCDC;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu ul ul li:hover > a {
background: #f2f2f2;
color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #ffffff;
position: absolute;
top: -12px;
left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
border-left-color: transparent;
border-right-color: #9ea2a5;
right: auto;
left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu.align-center ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: none;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul > li:hover > ul,
#cssmenu.align-right ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
padding-right: 0;
right: auto;
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 12px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 0.5px solid rgba(150, 150, 150, 0.1);
}
#cssmenu ul ul::after {
display: none;
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 0px solid #7a8189;
border-bottom: 0px solid #7a8189;
right: 20px;
top: 15px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 0px solid #7a8189;
right: 20px;
top: 25px;
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
}
In form
<table width="100%">
<td style="width: 200px" valign="top">
<div id="cssmenu">
<ul id="">
<li><span>Admin</span>
<ul>
<li>Test1</li>
</ul>
</li>
<li><span>Master</span>
<ul>
<li>test2</li>
</ul>
</li>
<li class="dropdown"><span>test</span>
<ul>
<li>Test2
<ul>
<li>Test2-test
</ul>
</li>
</ul>
</li>
</ul>
</div>
</td>
</table>
Use For Has Sub else Avoid
<script>
(function($) {
$(document).ready(function() {
$('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
var activeElement = $('#cssmenu>ul>li:first');
$('#cssmenu>ul>li').each(function() {
if ($(this).hasClass('active')) {
activeElement = $(this);
}
});
var posLeft = activeElement.position().left;
var elementWidth = activeElement.width();
posLeft = posLeft + elementWidth / 2 - 6;
if (activeElement.hasClass('has-sub')) {
posLeft -= 6;
}
$('#cssmenu #pIndicator').css('left', posLeft);
var element, leftPos, indicator = $('#cssmenu pIndicator');
$("#cssmenu>ul>li").hover(function() {
element = $(this);
var w = element.width();
if ($(this).hasClass('has-sub')) {
leftPos = element.position().left + w / 2 - 12;
}
else {
leftPos = element.position().left + w / 2 - 6;
}
$('#cssmenu #pIndicator').css('left', leftPos);
}
, function() {
$('#cssmenu #pIndicator').css('left', posLeft);
});
$('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
$("#menu-button").click(function() {
if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open');
}
else {
$(this).parent().addClass('open');
}
});
});
})(jQuery);
</script>

<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Page Permission Comfig Form</div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<div class="col-lg-4 col-md-4 col-sm-4">
<label>User Type
<select id="txtusertype" class="form-control">
<option value="ALL">Select user type</option>
</select>
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" >
<div class="col-lg-12 col-md-12 col-sm-12" id="getlist">
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<input type="button" class="btn btn-success " value="Save" onclick="SaveRecords();" />
</div>
<asp:HiddenField ID="MailMenuList" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="SubMenuList" runat="server" ClientIDMode="Static"/>
</div>
</div>
</div>
</div>
</div>
//page load function
$(document).ready(function () {
getusertype();
GetPagNameAll();
})
//get all page name in db menu and sub menu type display
function GetPagNameAll() {
$.ajax({
type: "POST",
url: "/PagePermission/PagePermission.aspx/getDisplayALLPageName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var jsdata = JSON.parse(msg.d);
// var SubMenu = jsdata.SubMenuList;
$.each(jsdata, function (key, value) {
$("#MailMenuList").val(value.mainmenulist);
$("#getlist").append('<ul style="padding:5px"><li><input type="checkbox" id="main' + value.id + '" value="' + value.id + '" onclick="Maincheck_fun(' + value.id + ');"/>' + value.pagename)//onclick="checkSubMenufun(' + value.id + ');" onclick="check_fun(\'' + value.id + ',' + value.SubMenuList +'\');"
//'<ul><input type="checkbox" id="' + value.id + '" value="' + value.pagename + '" />"' + value.pagename+'"'
var sub_length=value.SubMenuList.length;
for (i = 0; i < sub_length; i++) {
//'<li><input type="checkbox" id="' + value.id + '" value="' + value.pagename + '" />"' + value.pagename+'"</li>'
$("#getlist").append('<ul><li><input type="checkbox" id="sub' + value.SubMenuList[i].id + '" class="cl_name' + value.id + '" value="' + value.SubMenuList[i].id + '" onclick="Subcheck_fun(' + value.id + ',' + value.SubMenuList[i].id + ');"/>' + value.SubMenuList[i].pagename + '</li><ul>')//onclick="checkUncheckMainMenufun(' + value.id + ',' + value.SubMenuList[i].id + ');"
}
'<li></ul>';
});
},
failure: function (msg) {
alert("failure");
},
error: function (msg) {
alert("error");
}
});
}
//get drop down values in db
function getusertype() {
$.ajax({
type: "POST",
url: "/PagePermission/PagePermission.aspx/GetUserType",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$('#txtusertype').empty().append('<option value="ALL">Select user type</option>');
var jsdata = JSON.parse(msg.d);
$.each(jsdata, function (key, value) {
$('#txtusertype').append('<option value="' + value.Sno + '">' + value.pagename + '</option>');
});
//$(".side-menu").empty();
},
failure: function (msg) {
alert("failure");
},
error: function (msg) {
alert("error");
}
});
}
#region Select Drobdowm List
[WebMethod]
public static string GetUserType()
{
try
{
registerEntities1 db = new registerEntities1();
var usertype = db.user_type_table.Select(x => new { x.user_id, x.user_name }).ToList();
List<details> obj = new List<details>();
foreach (var append in usertype)
{
details objd = new details();
objd.pagename = append.user_name;
objd.Sno = append.user_id.ToString();
obj.Add(objd);
}
JavaScriptSerializer objsr = new JavaScriptSerializer();
return objsr.Serialize(obj);
//return "";
}
catch (Exception ex)
{
return "";
}
}
#endregion
#region display all page name in page load
[WebMethod]
public static string getDisplayALLPageName()
{
registerEntities1 db = new registerEntities1();
var main_menu_list = db.page_name_table.Select(x => new { x.page_id, x.page_name }).ToList();
var sub_menu_list = db.page_name_submenu.Select(x => new { x.page_id, x.page_name, x.main_menu_id }).ToList();
List<mainMenu> MainMenuList = new List<mainMenu>();
foreach (var main_menu in main_menu_list)
{
List<subMenu> SubMenuList = new List<subMenu>();
mainMenu mainMenuDetails = new mainMenu();
foreach (var sub_menu in sub_menu_list)
{
subMenu sunMenuDetails = new subMenu();
if (main_menu.page_id == sub_menu.main_menu_id)
{
sunMenuDetails.id = sub_menu.page_id.ToString();
sunMenuDetails.pagename = sub_menu.page_name;
sunMenuDetails.menutype = "Sub menu";
//sunMenuDetails.submenulist = sub_menu_list.Count.ToString();
SubMenuList.Add(sunMenuDetails);
}
}
mainMenuDetails.id = main_menu.page_id.ToString();
mainMenuDetails.pagename = main_menu.page_name;
mainMenuDetails.menutype = "main Menu";
mainMenuDetails.SubMenuList = SubMenuList;
mainMenuDetails.mainmenulist = main_menu_list.Count.ToString();
MainMenuList.Add(mainMenuDetails);
}
JavaScriptSerializer objsr = new JavaScriptSerializer();
return objsr.Serialize(MainMenuList);
}
endregion

I have converted static menu code to dynamic menu code

I have converted static code to dynamic my static is working well but in dynamic mouser-hover effect has stop working when I do mouse hover it will show me sub menu.
<head runat="server">
<title></title>
<style>
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428bca;
}
li
{
float: left;
}
li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn
{
background-color: inherit;
}
li.dropdown
{
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li class="dropdown">MY ARTICLES
<div class="dropdown-content">
Aapnu Surat ચોકલેટી અભિનેતા વિનોદ મેહરા <a href="#">
ઋષિસમાન સંગીતકાર સચિનદેવ બર્મન</a>
</div>
</li>
<li class="dropdown">MY PRESENTATIONS
<div class="dropdown-content">
Safaltani Sargam Part I Safaltani Sargam Part II
The Art Of Illusion <a href="#">100 Years Of Indian Cinema - Part I
Silent Film Era</a>
</div>
</li>
<li class="dropdown">DRAMA
<div class="dropdown-content">
Result Of SMC Drama Contest RESULTS OF 39th SMC DRAMA CONTEST
The Result Of SMC Drama Contest 2012 An Enemy Of The People
</div>
</div> </li>
<li class="dropdown">GUJARAT
<div class="dropdown-content">
Link 1વી ધ પીપલ ઓફ ગુજરાત
</li>
<li class="dropdown">INDIAN CULTURE
<div class="dropdown-content">
The Vedic Culture - Guj
</div>
</li>
</ul>
</form>
</body>
</html>
Select all
Open in new window
this is for static
<style>
/* ul */
.submenu
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428bca;
}
.submenu li
{
float: left;
}
.submenu li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 12px 36px;
text-decoration: none;
}
.submenu li a:hover, .dropdown:hover .dropbtn
{
background-color: inherit;
}
.submenu li.dropdown
{
display: inline-block;
}
.submenu .dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.submenu .dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.submenu .dropdown-content a:hover
{
background-color: #f1f1f1;
}
.submenu .dropdown:hover .submenu .dropdown-content
{
display: block;
}
</style>
<div class="Container">
<ul class="submenu" id="topicmenu" runat="server">
</ul>
</div>
private void fillMenu()
{
clsTopic objTopic = new clsTopic(true);
objTopic.SelectAll();
string str = string.Empty;
int i = 0;
for (i = 0; i < objTopic.ListclsTopic.Count; i++)
{
str +=#"<li class='dropdown'><a href='#' class='dropbtn' style='text-transform:uppercase;'>"+ objTopic.ListclsTopic[i].TopicName+#"</a></li>";
}
topicmenu.InnerHtml = str;
}
I want to convert it to dynamic coding I have converted it but when I do hover on menu I don't find sub menu.

My page will not display my multiview views

My views will not be displayed. They were showing but the they suddenly would not show and I do not know why. Please help/advise.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs"
inherits="index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css' />
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.0.js"></script>
<script>
$("#menu-toggle1").click(function (e) {
e.preventDefault();
$(".wrapper").toggleClass("toggled");
});
</script>
<style>
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.jumbotron {
display: flex;
align-items: center;
background-image: url(Images/jquery-site-bkground.jpg);
background-size: cover;
color: #ffffff;
height: 650px;
width: 100%;
text-shadow: 0.25px 0.25px 0.25px #000000;
}
.jumbotron h2 {
font-size: 60px;
font-weight: 700;
margin: 0;
color: #ffffff;
}
.jumbotron h3 {
margin: 0 0 20px;
color: #fff;
}
.sidebar {
float: left;
width: 200px;
margin: 0px;
padding: 0px 20px 0px 0px;
color: #FFFFFF;
border-right-color: black;
border-right-style:solid;
border-right-width: 1px;
}
.wrapper
{
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.wrapper.toggled
{
padding-left: 200px;
}
.sidebar-wrapper
{
z-index: 1000;
position: fixed;
left: 200px;
width: 0;
height: 100%;
margin-left: -200px;
overflow-y: auto;
background: #000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.wrapper.toggled .sidebar-wrapper
{
width: 200px;
}
.page-content-wrapper
{
width: 100%;
position: absolute;
padding: 15px;
}
.wrapper.toggled .page-content-wrapper
{
position: absolute;
margin-right: -200px;
}
/* Sidebar Styles */
.sidebar-nav
{
position: absolute;
top: 0;
width: 200px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li
{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a
{
display: block;
text-decoration: none;
color: #fff;
}
.sidebar-nav li a:hover
{
text-decoration: none;
color: #ffff80;
font-weight:bold;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus
{
text-decoration: none;
}
.sidebar-nav > .sidebar-brand
{
height: 65px;
font-size: 20px;
font-family:Arial;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a
{
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover
{
color: #fff;
background: none;
}
#media (min-width:768px)
{
.wrapper
{
padding-left: 200px;
}
.wrapper.toggled
{
padding-left: 0;
}
.sidebar-wrapper
{
width: 200px;
}
.wrapper.toggled .sidebar-wrapper
{
width: 0;
}
.page-content-wrapper
{
padding: 20px;
position: relative;
}
.wrapper.toggled .page-content-wrapper
{
position: relative;
margin-right: 0;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="sidebar-wrapper">
<br />
<!-- Side Bar -->
<div style="text-align: center;">
<br />
<ul class="sidebar-nav">
<li class="sidebar-brand">Aptest</li>
</ul>
<br />
<ul class="sidebar-nav">
<li><asp:LinkButton ID="Tview1" runat="server">Top Page</asp:LinkButton></li>
<li><asp:LinkButton ID="Tview2" runat="server">Index</asp:LinkButton></li>
<li><asp:LinkButton ID="Tview3" runat="server">iPhone 7</asp:LinkButton></li>
<li><asp:LinkButton ID="Tview4" runat="server">Page 4</asp:LinkButton></li>
<li><asp:LinkButton ID="Tview5" runat="server">Page 5</asp:LinkButton></li>
</ul>
</div>
<div class="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h3>Click button for more!</h3>
<script>
$(document).ready(function () {
$(".wrapper").toggleClass("toggled");
});
</script>
<asp:Button ID="Top1" runat="server" Text="Button" OnClick="Top1_Click" />
</div>
</div>
</section>
</asp:View>
<asp:View ID="View2" runat="server">
<h1>1</h1>
</asp:View>
<asp:View ID="View3" runat="server">
<h1>2</h1>
</asp:View>
<asp:View ID="View4" runat="server">
<h1>3</h1>
</asp:View>
<asp:View ID="View5" runat="server">
<h1>4</h1>
</asp:View>
</asp:MultiView>
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I don't know if I have done something wrong. Also I didn't know whether include the CSS/style in the code but it contains the code for the side bar.
The C# code is below
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Top1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
}
protected void Tview1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0;
}
protected void Tview2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
}
protected void Tview3_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 2;
}
protected void Tview4_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 3;
}
protected void Tview5_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 4;
}
}
I'm new to C# but I learnt online I think this it right.
This is all the page comes up with. It didn't do this before but now it does, I don't know why.

I think this might just be because the OnClick event is not present on the LinkButton. For example, change:
<li><asp:LinkButton ID="Tview3" runat="server">iPhone 7</asp:LinkButton></li>
to add:
OnClick="Tview3_Click"
so it becomes:
<li><asp:LinkButton ID="Tview3" runat="server" OnClick="Tview3_Click">iPhone 7</asp:LinkButton></li>

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Radio button align horizontally, but not vertically - c#

Related

setting div to row but nothing happens

How can I handling with nested data-parent

Generate menu dynamically using c# in asp.net with css for parent and sub menu

I have converted static menu code to dynamic menu code

My page will not display my multiview views

Categories

Resources