I have the following html and css which creates a popped out menu on a click of a button. I want to be able to change the width of the bubble, how can I do this?
This is how the dropdown bubble looks like: http://puu.sh/8St3e.png
screenshot http://puu.sh/8St3e.png
<div class="dropdown" style="display:inline">
<button data-toggle="dropdown" class="btn btn-success" type="button" id="pops" >Select Populations</button>
<ul id="popupDropDown" class="dropdown-menu" role="menu" aria-labelledby="dLabel" width="500px">
</ul>
</div>
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
You will need to remove this inline style from the <ul id="popupDropDown" class="dropdown-menu" role="menu" aria-labelledby="dLabel" width="500px"> so that it is as follows:
<ul id="popupDropDown" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
Then you can set the width in css or (better) leave it without a width to let it flex with the content.
Related
.ui-tabs .ui-tabs-nav li>A:hover {
background-color:#e7e7e7 !important;
}
.ui-tabs .ui-tabs-nav li:hover {
background-color:#e7e7e7 !important;
}
HTML:
<div id="tabs" style="border: 1px solid #ffffff; visibility: hidden;">
<ul style="background-color: White; border: 1px solid #ffffff; border-bottom: 1px solid #CCCCCC; background-image: none;">
<li id="liTab1" style="background-color: White;">
abc
<span id="spnTab1" class='ui-icon'></span>
</li>
<li id="liTab2" style="background-color: White;">
<a href="#tabs2" id="alTab2" >r</a>
<span id="spnTab2" class='ui-icon'></span>
</li>
</ul>
How to fix the hover on mouse hover?
It shows two events at same time:
jQuery Code:
$('[data-trigger="dropdown"]').on('mouseenter', function(){
var submenu=$(this).parent().find('.submenu');
submenu.addClass('active');
}
HTML:
<ul class="profile-menu">
<li>
<a class="profile-menu-trigger" data-trigger="dropdown" href="#">Logged in as User</a>
</li>
<ul class="profile-submenu submenu ">
<li>Login</li>
<li> Logout</li>
<li>Options</li>
<li>Circus</li>
</ul>
</ul>
CSS:
.submenu{
list-style: none;
padding: 0px;
border: 1px solid #aaa;
background: #fff;
margin-top: 30px;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
width: 250px;
position: absolute;
right: 20px;
display: none;
}
.submenu.active{ display: block; }
This program should show the menu on top right corner when touch on "User Logged in" but it can't.
I'm working on a progressive web application, where the user can create code blocks that can expand horizontally (depending on the size of the content), and also, i have a fixed top app bar, but, when the page content overflow the page in the x axis, the top app bar options are pushed to the invisible side of canvas
Live web app: https://ide.code101.com.br
/* Prevent user from clicking on page elements before loading */
html {pointer-events: none}
a,
a:hover,
a:focus {text-decoration: none}
#editArea, #codeOutput {padding: 10px}
#editArea, .sortable {
list-style-type: none;
font-size: 18px;
}
#editArea *:not(.material-icons) {clear: both}
/* FIX SIZE ISSUES WITH MDC TEXTFIELD ON DIALOG (OUTLINED) */
.mdc-dialog .mdc-text-field {width: 100%}
.mdc-dialog .mdc-text-field--outlined::before,
.mdc-dialog .mdc-text-field--outlined::after {
width: 0 !important;
height: 0 !important;
}
/* ############################## */
.mdc-top-app-bar, .mdc-drawer, .mdc-dialog {user-select: none}
.mdc-top-app-bar--fixed-adjust {height: 100vh}
.list {min-height: 44.5px}
.codeide-logo {font-family: "Press Start 2P"}
.scrollDiv {
position: fixed;
width: 100%;
padding: 20px;
bottom: 0;
z-index: -1;
}
/* BLOCKS COLOR HIGHLIGHT (MONOKAI)
#272822 - BLACK
#F92672 - RED
#66D9EF - BLUE
#A6E22E - GREEN
#FD971F - ORANGE
-----------------------------*/
.commandBlock {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: 8px 16px !important;
margin-bottom: 16px !important;
border-radius: 4px;
float: left !important;
}
.code {display: none}
.drag {
float: left !important;
margin-right: 16px !important;
}
.close {
float: right !important;
margin-left: 16px !important;
}
.editable {
white-space: nowrap;
background-color: #FD971F;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: 4px 8px !important;
border-radius: 4px;
}
.cmd_alert {background-color: #66D9EF}
.cmd_if, .cmd_else, .cmd_for {background-color: #A6E22E}
.cmd_comment {background-color: #BDC3C7}
/* ########## CODE BLOCKS ########## */
body.dragging, body.dragging * {cursor: move !important}
.dragged {
opacity: 0.5;
overflow: hidden;
}
ul.list {
padding-left: 0;
margin: 0 0 9px 0;
min-height: 10px;
}
ul.list li {
color: white;
display: block;
margin: 5px 0;
padding: 5px;
user-select: none;
box-sizing: content-box;
}
ul.list li.placeholder {
position: relative;
margin: 0;
padding: 0;
border-color: red;
border-style: dotted;
z-index: 2000;
}
ul.list li.placeholder:before {
position: absolute;
content: "";
width: 0;
height: 0;
margin-top: -8px;
left: -8px;
top: -1px;
border: 8px solid transparent;
border-left-color: red;
border-right: none;
z-index: 2000;
}
<!-- TOP APP BAR -->
<header class="mdc-top-app-bar mdc-top-app-bar--fixed w3-card">
<div class="mdc-top-app-bar__row">
<!-- CONTENT AT LEFT -->
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<!-- DRAWER BUTTON -->
<a id="drawerBtn" onclick="drawer.open = true" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<!-- APP TITLE -->
<span class="mdc-top-app-bar__title codeide-logo">codeIDE</span>
</section>
<!-- CONTENT AT RIGHT -->
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<!-- CHANGE VIEW MODE -->
<button class="mdc-icon-button material-icons" id="btnChangeView" onclick="changeViewMode()">code</button>
<!-- SIDE MENU -->
<div class="mdc-menu-surface--anchor">
<a onclick="menu.open = !menu.open" class="material-icons mdc-top-app-bar__action-item" aria-label="Opções" alt="Opções">more_vert</a>
<div class="mdc-menu mdc-menu-surface" tabindex="-1">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<!-- EXPORT FILE -->
<li onclick="exportFile($('#editArea').html())" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">save</i>
<span class="mdc-list-item__text">Exportar arquivo</span>
</li>
<!-- IMPORT FILE -->
<li onclick="importFile()" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">folder_open</i>
<span class="mdc-list-item__text">Importar arquivo</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<!-- NIGHT MODE -->
<li id="nightModeBtn" onclick="nightMode('trigger')" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">brightness_2</i>
<span class="mdc-list-item__text">Modo noturno</span>
</li>
<!-- ABOUT -->
<li onclick="displayAboutDialog()" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">info</i>
<span class="mdc-list-item__text">Sobre</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<!-- CODE101 -->
<li onclick="location.href='https://code101.com.br'" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">launch</i>
<span class="mdc-list-item__text">Visitar o code101</span>
</li>
</ul>
</div>
</div>
</section>
</div>
</header>
I Solved it!
by removing the overflow: scroll css property from the body, and passed it to the code blocks list element (#list)
Wont $('.headername').css('width',$(window).width()); not work? Considering you're only requiring your header in a viewable window space, since its floating
I am trying to develop drop down box list in HTML and CSS. I am trying to toggle drop-down box list on clicking on it. When I select some item, it is not coming in drop-down button.
Below is my code.
function toggleItems() {
$('.dropdown-menu').toggleClass('open');
}
function test() {
var element = document.getElementById("flat-example-2");
if ($(element).hasClass('on')) {
element.classList.remove("on");
} else {
element.classList.add("on");
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 150px;
max-height: 600px;
overflow-x: visible;
overflow-y: visible;
padding: 0;
margin: 0;
list-style: none;
font-size: 13px;
font-weight: 500;
text-align: left;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #464646;
transition: all .3s;
transform: translate(-100%);
}
.dropdown-menu.open {
transform: translate(0%);
}
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
toggle.btn-default {
background: #dedede;
background: rgba(0, 0, 0, 0.13);
border: 1px solid #2E92FA;
color: #464646;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" onclick="toggleItems()">
<button style="width:151px;" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Filter by<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" style="width:100%;">
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox17">Sensors</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox18">Actuators</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox19">Digital inputs</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox20">Outputs</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox21">Converters</label>
</div>
</li>
</ul>
</div>
I am not able to select item from drop down. I want to select any item
from the drop down and that item should be selected in drop-down box
list. Can someone help me to make this work? Any help would be
appreciated. Thank you.
First remove the irrelevant code like data-toggle etc...You will need to attach a click event to the dropdown items to change the button text
Also there is no need of using div and label inside of li...so better to remove it
$(".btn-toggle").on("click", function() {
$('.dropdown-menu').toggleClass('open');
});
$(".dropdown-menu li").on("click", function() {
$('.btn-toggle').text($(this).text());
$('.dropdown-menu').removeClass('open');
});
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 150px;
padding: 0;
margin: 0;
list-style: none;
font-size: 13px;
font-weight: 500;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
color: #464646;
transition: all .3s;
transform: translate(-100%);
}
.dropdown-menu.open {
transform: translate(0%);
}
.btn-group {
position: relative;
display: inline-block;
vertical-align: top;
}
.dropdown-menu li {
margin: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button class="btn-toggle" style="width:151px;" type="button">Filter by</button>
<ul class="dropdown-menu">
<li>Sensors</li>
<li>Actuators</li>
<li>Digital inputs</li>
<li>Outputs</li>
<li>Converters</li>
</ul>
</div>
You don't seem to have an event for when an item is selected from the list.
You'll need to attach a click event, preferably to the li element, and set the text of the dropdown there.
e.g.
$('.dropdown-menu li').click(function() {
var text = $(this).text(); // get text of the clicked item
$(".dropdown-toggle").text(text); // set text to the button (dropdown)
});
Full code:
function toggleItems() {
$('.dropdown-menu').toggleClass('open');
}
$('.dropdown-menu li').click(function() {
var text = $(this).text(); // get text of the clicked item
$(".dropdown-toggle").text(text); // set text text to the button (dropdown)
});
function test() {
var element = document.getElementById("flat-example-2");
if ($(element).hasClass('on')) {
element.classList.remove("on");
} else {
element.classList.add("on");
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 150px;
max-height: 600px;
overflow-x: visible;
overflow-y: visible;
padding: 0;
margin: 0;
list-style: none;
font-size: 13px;
font-weight: 500;
text-align: left;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #464646;
transition: all .3s;
transform: translate(-100%);
}
.dropdown-menu.open {
transform: translate(0%);
}
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
toggle.btn-default {
background: #dedede;
background: rgba(0, 0, 0, 0.13);
border: 1px solid #2E92FA;
color: #464646;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" onclick="toggleItems()">
<button style="width:151px;" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Filter by<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" style="width:100%;">
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox17">Sensors</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox18">Actuators</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox19">Digital inputs</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox20">Outputs</label>
</div>
</li>
<li>
<div style="margin-left:3px">
<label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox21">Converters</label>
</div>
</li>
</ul>
</div>
i designed a drop down and that second level drop down page is form now when i want that second level drop down page stay longer , for that i used java script code that is here
<script>
var timer;
$(".parent").on("mouseover", function() {
clearTimeout(timer);
openSubmenu();
}).on("mouseleave", function() {
timer = setTimeout(
closeSubmenu
, 1000);
});
function openSubmenu() {
$(".submenu").addClass("open");
}
function closeSubmenu() {
$(".submenu").removeClass("open");
}
</script>
And here is code for making multiple drop down
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" style=" padding-top: 3px; padding-bottom: 3px;"> Action <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><button class="btn btn-default btn-sm remove" ><i class="fa fa-pencil-square-o fa-lg" aria-hidden='true' style=" font-weight:10px;"> Edit-Update</i></button></li>
<div class="divider"></div>
<li class="dropdown-submenu parent">
<i class="fa fa-hand-o-left" aria-hidden="true"style="padding-left:10px;">Edit-File</i>
<ul class="dropdown-menu submenu">
Here is code of form
</ul>
</li>
</ul>
</div>
and this is css i am using , i just want when i am drop down from edit-file then my drop down page should stop for given time
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
right: 100%;
margin-top: -210px;
margin-left: -150px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float:left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.multi-level
{
position:justify;
right:100%;
margin-left:-60px;
}
Please help me .
Check this...
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
right: 100%;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float:left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.multi-level
{
position:justify;
right:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" style=" padding-top: 3px; padding-bottom: 3px;">Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>
<a href="index.php?index_edit_id=<?php echo $c_id;?>">
<button class="btn btn-default btn-sm remove" >
<i class="fa fa-pencil-square-o fa-lg" aria-hidden='true' style=" font-weight:10px;"> Edit-Update</i>
</button>
</a>
</li>
<div class="divider"></div>
<li class="dropdown-submenu parent">
<i class="fa fa-hand-o-left parent" aria-hidden="true"style="padding-left:10px;">Edit-File</i>
<ul class="dropdown-menu submenu">
<li>
<form>
<p><input /></p>
<p><input /></p>
<p><input /></p>
</form>
</li>
</ul>
</li>
</ul>
</div>
<script>
var timer;
$(".parent").on("mouseover", function() {
clearTimeout(timer);
openSubmenu();
}).on("mouseleave", function() {
timer = setTimeout(
closeSubmenu
, 1000);
});
function openSubmenu() {
$(".submenu").show();
}
function closeSubmenu() {
$(".submenu").hide();
}
</script>