Bootstrap Mobile menu button hide when scroll - responsive-design

I have this responsive website, but for the menu part in Mobile when I scroll it doesn't show the buttons anymore, I should scroll back to the top to get to the buttons.
I don't know why the buttons in the mobile menu don't scroll within the screen.
HTML
/* ------------------------------------------------------------------------------
Header
-------------------------------------------------------------------------------*/
#header {
position: fixed;
width: 100%;
z-index: 999;
}
#header .header-content {
margin: 0 auto;
max-width: 1170px;
padding: 20px 0;
width: 100%;
-moz-transition: padding 0.3s;
-o-transition: padding 0.3s;
-webkit-transition: padding 0.3s;
transition: padding 0.3s;
}
#header .logo {
float: right;
font-size:24px;
font-weight:700;
color:#fff;
text-decoration:none;
text-transform:uppercase;
letter-spacing:7px;
}
#header.fixed {
background-color: #181818;
padding: 0;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
#header.fixed a {
color: #fff;
}
#header.fixed .header-content {
border-bottom: 0;
}
#header.fixed .nav-toggle {
top: 18px;
color: #000;
}
.navigation.open {
opacity: 0.9;
visibility: visible;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.navigation {
float: left;
padding-top: 20px;
}
.navigation li {
display: inline-block;
}
.navigation a {
color: rgba(255, 255, 255, 0.75);
font-size: 20px;
margin-left: 40px;
text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
color: #fff;
}
.nav-toggle {
display: none;
height: 44px;
overflow: hidden;
position: fixed;
left: 5%;
text-indent: 100%;
top: 32px;
white-space: nowrap;
width: 44px;
z-index: 99999;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-toggle:before, .nav-toggle:after {
border-radius: 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
.nav-toggle:before {
background-color: #1192cf;
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav-toggle:after {
background-color: #1192cf;
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.nav-toggle span {
background-color: #fff;
bottom: auto;
display: inline-block;
height: 3px;
left: 50%;
position: absolute;
right: auto;
top: 50%;
width: 18px;
z-index: 10;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.nav-toggle span:before, .nav-toggle span:after {
background-color: #fff;
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.nav-toggle span:before {
-moz-transform: translateY(-6px) rotate(0deg);
-ms-transform: translateY(-6px) rotate(0deg);
-webkit-transform: translateY(-6px) rotate(0deg);
transform: translateY(-6px) rotate(0deg);
}
.nav-toggle span:after {
-moz-transform: translateY(6px) rotate(0deg);
-ms-transform: translateY(6px) rotate(0deg);
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.nav-toggle.close-nav:before {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
.nav-toggle.close-nav:after {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-toggle.close-nav span {
background-color: rgba(255, 255, 255, 0);
}
.nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
background-color: #fff;
}
.nav-toggle.close-nav span:before {
-moz-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
.nav-toggle.close-nav span:after {
-moz-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
#media screen and (max-width: 1024px) {
#header .header-content {
width: 90%;
padding:20px 0px;
}
#header.fixed a {
color: #000;
}
.nav-toggle {
display: block;
}
.navigation {
position: fixed;
background-color: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99999;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.navigation .primary-nav {
position: relative;
top: 45%;
-moz-transform: translateY(-45%);
-ms-transform: translateY(-45%);
-webkit-transform: translateY(-45%);
transform: translateY(-45%);
}
.navigation li {
display: block;
margin-bottom: 20px;
}
.navigation a {
display: block;
font-size: 25px;
margin: 0;
text-align: center;
}
.flex-control-nav {
bottom: 20px;
}
}
<header id="header">
<div class="header-content clearfix"> <a class="logo" href="index.html"><img style="logo-size" src="images/logo-awaed.png" width="150px" height="62px"></a>
<nav class="navigation" role="navigation">
<ul class="primary-nav">
<li>عن الشركة</li>
<li>خدماتنا</li>
<li>اتصل بنا</li>
</ul>
</nav>
Menu<span></span> </div>
</header>

Don't reinvent the wheel. Read the Bootstrap documentation and use the navbar and the navbar components Bootstrap 4 provides.
Here's a working navbar example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Reference:
https://getbootstrap.com/docs/4.0/components/navbar/

Related

Displaying dropdown ul in list

I have tried everything but iam stuck on this one. i would like the ul ul li to be shown when hovering the ul li. Anyone who can see what i need to do? I think i'm doing something wrong with the declaration of the ul's and li's but i'm not shure if that's the only problem.
By the way: it's a vertical menu/list
HTML:
<!--::::: SIDEBAR :::::-->
<div class="sidebar"> <!-- sidebar starts-->
<!-- menu starts-->
<div id="menu_nav">
<ul class="main">
<li class="selected"><a class="selected" href="#featured_work1">Wat is D-day</a></li>
<li>Waarom een invasie</li>
<li class="sub">Het doel</li>
<ul >
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<li>Operation Fortitude</li>
<li>Landingsplaats</li>
<li>Atlantische muur</li>
<li>Organisatie Todt</li>
<li>Batterijen</li>
<li>Luchtlandingen</li>
<li>Amfibische landingen</li>
<li>Tijdlijn</li>
<li>Na D-day</li>
<li>Cijfers</li>
<li>De Facties</li>
<li>Materiaal</li>
<li class="last">Kaarten</li>
</ul>
</div><!-- menu ends -->
CSS:
/* A) SIDEBAR MENU ++++++++++++++++++++++++++++++++++++++++++++ */
#menu_nav { }
#menu_nav ul li { display: block; border-bottom: 1px dashed #555; }
#menu_nav ul ul li { display: block; border-bottom: 0px dashed #555; }
#menu_nav ul ul li a {
display: none;
border-bottom: 0px dashed #555;
padding: 7px 0 0px 58px;
font-size: 12px;
margin-top: -4px;
background: url(style/images/forward_light2.png) no-repeat;
background-position: 38px 7px;
color: #000;
text-align: left;
text-shadow: none;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease; }
#menu_nav ul li.sub a:hover ul { display: block; }
#menu_nav ul li a {
display: block;
padding: 7px 0 11px 40px;
font-size: 14px;
margin-top: 3px;
color: #9b2929;
text-align: left;
text-shadow: none;
background: url(style/images/arrow-right.png) no-repeat;
background-position: 0px 7px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease; }
#menu_nav ul li.last { border-bottom: 0 solid #444; padding-bottom:10px; }
#menu_nav ul li a.selected {
display: block;
padding: 7px 0 11px 40px;
font-size: 14px;
color:#252525;
text-align: left;
text-shadow: none;
background: url(style/images/arrow-right-red.png) no-repeat;
background-position: 0px 7px;
}
#menu_nav ul li a:hover {
padding: 7px 0 11px 45px;
-moz-opacity: 0.85;
-ms-filter:progid: DXImageTransform.Microsoft.Alpha(Opacity=85);
filter: alpha(opacity=85);
opacity: 0.85;
-khtml-opacity: 0.85;
text-decoration: none; }
#menu_nav ul ul li a:hover{
padding: 7px 0 0px 62px;
text-decoration: none; }
You've got a lot of complicated descendant selectors, which I think is your problem.
First off, delete the display: none line right after #menu_nav ul ul li a.
Then add these declarations to your CSS:
li.sub ul {
display: none;
}
li.sub:hover ul {
display: block;
}
Then, in your HTML, change the following lines:
<li class="sub">Het doel</li>
<ul >
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
To the following:
<li class="sub">Het doel
<ul >
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul></li>
In other words, put the <ul> inside <li class="sub">.
That works for me in Chrome 25. Is this what you're after?
Transitions
You're somewhat limited with the types of transitions you can do in this scenario. CSS transitions won't work on the display rule, and they won't work on height unless you use exact sizes (so switching from height: 0 to height: auto will not animate). Using an exact height is pretty tricky, and would immediately break if you ever changed your content. So you've got two options: perform a less-perfect transition on the opacity of the <ul> (a fade-in effect), or use jQuery to add a slide-down effect for visitors with JavaScript turned on.
If you change your CSS to this:
li.sub ul {
height: 0px;
overflow: hidden;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
li.sub:hover ul {
opacity: 1;
height: auto;
}
the space for the ul will "pop" into view, then the content will fade in.
Alternatively, you can use jQuery just to add a slideDown effect:
$(document).ready(function() {
$('.sub').hover(function() {
$(this).find('ul').show();
}, function() {
$(this).find('ul').hide();
});
});
Then change your CSS rule to this:
li.sub ul.sub-menu {
display: none;
}
(The :hover rules are no longer needed.) That might look more elegant to you. If you choose this route, be sure to create a fallback which "unwrites" the display:none; rule for visitors without JavaScript turned on, or they won't see anything!

my page doesnt have a scrollbar

i don't know whats wrong but my page doesnt have a scrollbar, when the page exceeds, i cant scroll below it. what seems to be the probblem with my code?
i am new to ASP.NET so yeah, i do not know much yet. thanks in advance!
here is my full aspx page.
<form id="form1" runat="server">
<div style="width:100%;height:100%;overflow:scroll;overflow-y:auto;">
<div class="body">
<div class="pull-right">
<br />
<div class ="dropdown" runat="server">
<asp:Label ID="hideID" runat="server" Text="#" Visible="false"></asp:Label>
<asp:Label ID="lblLogged" runat="server" CssClass="dropbtn" Text="Name" />
<div class="dropdown-content">
<asp:LinkButton ID="btnMain" runat="server" OnClick="btnMain_Click">Main Menu</asp:LinkButton>
<asp:LinkButton ID="btnLogO" runat="server" OnClick="btnLogO_Click">Log Out</asp:LinkButton>
<%--<a id="btnLogOut" runat="server" href="LogIn.aspx">Log Out</a>--%>
</div>
</div>
<%-- Current User: --%>
 
and here is my CSS, i dont know if its correct
<style type="text/css">
.*{
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
.body{
position:absolute;
left:24%;
width:800px;
height:400px;
z-index:0;
}
.home{
position:absolute;
top: 200px;
left: 38%;
z-index: 2;
}
.yusenlogo{
position:center;
left:40%;
}
.exist{
position:absolute;
height:10%;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: darkred;
border-top:5px;
}
.added{
position:absolute;
height:8%;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: forestgreen;
border-top:5px;
}
.well2 {
position:absolute;
width:40%;
top: 310px;
left: 30%;
z-index: 2;
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
/*background-color: #f5f5f5;*/
/*border: 1px solid #e3e3e3;*/
border-radius: 4px;
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);*/
}
.well3 {
position:absolute;
width:70%;
top: 80px;
left: 13%;
z-index: 2;
}
.buttons{
cursor:default;
}
.banner{
position:absolute;
top: 50%;
left: 50%;
z-index:2;
}
.character{
position:absolute;
height:60px;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: darkred;
border-top:5px;
}
.lowerleft {
position: fixed;
bottom:8px;
left:16px;
width:100%;
}
.lowerleftuser {
position: fixed;
bottom:8px;
left:16px;
width:100%;
z-index:1000;
}
.forGridView {
position:fixed;
top:30%;
left:30%;
z-index:1000;
}
.container {
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
.dropbtn {
background-color: cornflowerblue;
color: white;
padding: 12px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: cornflowerblue;
}
#txtFrom
{
background-image: url(Images/Calendar2.png);
background-position: right;
background-repeat: no-repeat;
/*padding: 3.5px 10px;*/
padding: 6px 12px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
#txtTo
{
background-image: url(Images/Calendar2.png);
background-position: right;
background-repeat: no-repeat;
padding: 6px 12px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
</style>
In your CSS:
.*{
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
remove "overflow-y: hidden;"
overflow-y is the vertical scrollbar, this CSS is suppressing it, see http://www.w3schools.com/cssref/css3_pr_overflow-y.asp for more information.

Css and c# problems fitting an image on a circle

Im trying to fit a image that comes from the database on that circle as you can see! But if i put a background image on a class via css it fits perfectly
https://i.gyazo.com/cf7f8332acd5967f109f58de6ef1a578.gif
And if i put with asp:image it stops working
https://i.gyazo.com/5c06753b959a698d276e13fd44d90c61.gif
Any ideas?
This is my c# code of the image
<div id="imagemuser" style="display:none">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-2 ">
<asp:Image ID="Image1" runat="server" imageurl="http://i.kinja-img.com/gawker-media/image/upload/x1hua0lnuultijaxcafc.jpg"/>
<div class="ch-info" >
<a onclick="$('#email').hide();$('#escolherimag').show();$('#idade').hide();$('#idadeeditar').show();$('#Buttonseditar').show();$('#Buttons').hide();$('#cocktailcriado').hide();$('#biografia').hide();$('#biografiaeditar').show();$('#Nomedoperfil').hide();$('#fechar').show();$('#Nomedouser').hide();$('#Nomedousereditar').show();$('#telefone').hide();$('#telefoneeditar').show();" >
<h3>
Edita aqui
</h3>
<p class="tex">Edite o seu perfil há sua maneira!</p>
</a> </div>
</div>
</li>
</ul>
</div>
And this is the css code that i use for this circle
#imagemuser .ch-grid {
bottom: 50%;
display: inline;
left: 42%;
position: absolute;
width: 15%;
z-index: 10;
}
#imagemuser {
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
.ch-img-2 {
background-image: url(https://cdn.meme.am/images/300x/2793196.jpg);
}
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: white;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
.ch-info p:hover {
color: rgba(255,242,34, 0.8);
}
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
This is one way to do the job, basicly it will make the background image dynamic.
variable = query....
<div class="ch-item" style="background-image:url(variable); background-position:center; background-size:cover;">

ASP.NET Textbox not showing up during test run [closed]

I have this semestral project that i need to complete and i am having problems with my ASP webform.
My asp text box "magically" disappears when i test my application.
Is there any possible method where i can make sure that my asp text box does not disappear during application testing?
<div class="content-1">
<h2>Track by Order Number!</h2>
<p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<!-- the label appears in the div tag, but not the textbox-->
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<!-- i want the asp textbox to be in this div -->
</p>
</div>
Thank you so very much, i appreciate it alot .
css code:
.content {
background: #fff;
position: relative;
width: auto;
margin: -175px 0 0 120px;
height: 400px;
z-index: 5;
overflow: hidden;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
border-radius: 3px;
}
.content div {
position: absolute;
top: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
-ms-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.content div{
-webkit-transform: translateY(-450px);
-moz-transform: translateY(-450px);
-o-transform: translateY(-450px);
-ms-transform: translateY(-450px);
transform: translateY(-450px);
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all ease-out 0.3s 0.3s;
-moz-transition: all ease-out 0.3s 0.3s;
-o-transition: all ease-out 0.3s 0.3s;
-ms-transition: all ease-out 0.3s 0.3s;
transition: all ease-out 0.3s 0.3s;
}
.content div h2,
.content div h3{
color: #398080;
}
.content div h2
{
font-size: 20px;
}
.content div p {
font-size: 14px;
line-height: 22px;
font-style: italic;
text-align: left;
margin: 0;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}
It seems there is some problem either with visibility from server side or display in client side.
To check this remove the css-class from the div. If you see the textbox, you know where to find the problem.
Still if it doesn't show-up then paste the complete cs code, aspx code and css code.

How to keep dropdown item list on top

I have a dropdown menu, that looks like this:
<div class="container">
<section class="main" >
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Location</span>
<ul class="dropdown">
<li><i class="icon-envelope icon-large"></i>Dubai</li>
<li><i class="icon-truck icon-large"></i>Sharjah</li>
<li><i class="icon-plane icon-large"></i>Ras Al Khema</li>
</ul>
</div>
</div>
</section>
</div>
This is the css I use to style it:
body {
font-family: 'Lato', 'Arial', sans-serif;
background: #ddd url(../images/bg.jpg);
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main {
width: 90%;
margin: 0 auto;
position: relative;
height:400px;
}
.container > header {
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}
.container > header h1 {
font-size: 30px;
line-height: 38px;
margin: 0;
position: relative;
font-weight: 300;
color: #666;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
.container > header h2 {
font-size: 14px;
font-weight: 300;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
font-family: Cambria, Georgia, serif;
font-style: italic;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
#import url('demo.css');
#import url('font-awesome.css');
/* GLOBALS */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
.wrapper-demo {
margin: 60px 0 0 0;
*zoom: 1;
font-weight: 400;
}
.wrapper-demo:after {
clear: both;
content: "";
display: table;
}
.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;
/* Styles */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(50,50,50,0.1);
cursor: pointer;
outline: none;
/* Font settings */
font-weight: bold;
color: #8AA8BD;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;
/* Styles */
background: white;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border: none;
border-radius: 0 0 7px 7px;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}
/* Active state */
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display: block;
}
Here's an image of this problem to explain it.
You need to use z-index to 'push' the active item to the 'front'.
You would set a lower z-index on your 'inactive' menu item and a higher z-index on your 'active' state of the menu items. Something like:
.wrapper-dropdown-3 .dropdown {
z-index: 1;
}
/* Active state */
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
z-index: 2;
}
Here's a very useful article on z-index:
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Resources