I'm currently working on a couple of drop-down menus on the following page:
http://icao.tungsten.hireserve-test.com/home.html
Originally, we only had one of these menus but our client has since changed their template and we now need to implement two drop-down menus. Previously this was done with jQuery hover() events which fired show() and hide() but now I have replaced this with CSS.
li.dynamic-children{
position: relative
}
li.dynamic-children ul{
display: none;
position: absolute;
}
li.dynamic-children:hover ul{
display: block;
left: -1px;
top: 18px;
position: absolute;
z-index: 100
}
li.dynamic-children:hover ul span{
width: 100%
}
The dropdown menu is displayed successfully on hover however because it is done with CSS there does not appear to be any way of ensuring that the drop-down persists when the user moves off of the link which triggers the drop-down. This means that the user cannot select any of the items in the dropdown menu rendering it useless.
Do any of you have any ideas as to how I can force the menu to persist long enough for users to be able to make a selection for the drop-down menus?
EDIT:
Based upon some of the code provided below I have now included the following CSS rules:
.s4-tn .horizontal ul.dynamic {
background-color: #ECF4FC;
border-top:4px solid #003D78;
margin: 0;
width: 255px;
z-index: 1000 !important;
}
.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static {
float: left;
padding-bottom: 5px;
}
These rules cause the menu to persist however in IE7 the drop-down menu now falls behind other elements on the page rendering it still useless in this browser. I have tried numerous z-index fixes to no avail.
try this one,
.s4-tn .horizontal ul.dynamic {
background-color: #ECF4FC;
border: 0 solid #003D78;
margin: 0;
width: 255px;
z-index: 101;
}
li.dynamic-children:hover ul {
display: block;
left: -1px;
position: absolute;
top: 22px;
}
Either 1 of the two:
Option 1 (Line 2840)
. .s4-tn li.static > .menu-item {
color: #3b4f65;
white-space: nowrap;
border: 1px solid transparent;
padding: 4px 10px;
display: inline-block;
height: 34px;
vertical-align: middle;
}
Option 2 (Line 99)
.s4-tn .horizontal ul.dynamic {
margin: 0 0 0 0;
border: 0px #003D78 solid;
width: 255px;
background-color: #ecf4fc;
}
Related
I'm writing a simple website and have pretty much the same issue as described in these two posts:
Stop CSS transition from firing on page load
Chrome transition fires on page load when form element added
The issue is aparent when testing in Brave Browser, not for example in Edge. Although I have not used any <form> tag in my site..
Anyway, I can resolve this issue as described in those posts by putting a <script> </script> into the footer. My problem is, that I have a bad habit of letting VS Studio format my code with CTRL-K + CTRL + D, which will delete the space between the script tags. Also, copying the footer to a new file will do the same, thus I quite often have to resolve the same issue again and again.
Question now is: Since the linked posts are quite old therefore this issue has been known for quite a long time, is there another - better - way to resolve it?
Transition Code in Question:
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#selected .navunderline {
height: 5px;
margin: 0;
}
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
I have a problem that has been confusing me for the past day. I have to create a table like the attached image. I have to follow the CSS rules and however I cannot figure out how to draw the single black bar in between EDIT and DELETE. I tried the | however it does not look quite correct. I did a colspan=2 for the header and just got the grey bar per the CSS between EDIT and DELETE.
I appreciate any suggestions that you may have.
I would approach it using a pseudo element like this:
button {
border: 0;
background: transparent;
position: relative;
padding: 0;
}
button + button {
margin-left: 10px;
padding-left: 10px;
}
button + button:after {
content: '';
width: 1px;
height: 10px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background: black;
}
<button>Edit</button>
<button>Delete</button>
Addin this to the "edit" button in css:
display: block;
Padding: 0 10px;
Border-right: 1px solid black;
td:after{
content:"|";
margin-left:5px; /*To make it look good*/
}
do this
I have several images which have a Tooltip on hover ( which display another image)
The thing looks like this
http://i.stack.imgur.com/PjywK.jpg
Now my problem is that, everytime I hover over one image it locks the tooltip to the image. So the tooltip is in a different position everytime I hover over a different image. my css for this looks like this:
.playertooltip {
outline: none;
text-decoration: none;
position: relative;
}
.playertooltip span {
display: none;
position:absolute;
border: 5px solid white;
}
.playertooltip:hover span {
display: block;
position:absolute;
border: 5px solid white;
z-index: 99;
}
Well, I want to find a fixed position for EVERY tooltip so that, when I hover over different images the tooltip appears in the same place.
Thanks for the help :)
For clarifycation:
http://jsfiddle.net/auNVb/
The hovered position needs to be changed to fixed, add a left/right position of 50% and a variable top position like the following:
.playertooltip {
outline: none;
text-decoration: none;
position: relative;
}
.playertooltip span {
display: none;
position:absolute;
border: 5px solid white;
}
.playertooltip:hover span {
display: block;
position:fixed; /* Changed from absolute */
border: 5px solid white;
z-index: 99;
left: 50%; /* Move it to the "half" of the page */
top: 20%; /* Move it to the "half" of the page (from the top).
You have to experiment with this,
as I had variable results depending
on the elements present in the page. */
}
Whenever I click on the checkbox, the browser window (firefox) will scroll on the top of the screen.
How can I prevent this behavior so when I click on the checkbox the browser window will not scroll on top?
Here is the code found from here http://jsfiddle.net/zAFND/6/
Thank you.
<html>
<head>
<title>Test</title>
<style>
div label input {
margin-right: 100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button:hover {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
#ck-button label {
float: left;
width: 4.0em;
}
#ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#ck-button label input {
position: absolute;
top: -20px;
}
#ck-button input:checked + span {
background-color: #911;
color: #fff;
}
</style>
</head>
<body>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
</body>
The problem is this rule:
#ck-button label input {
position:absolute;
top:-20px;
}
When you click on a label the browser tries to focus the related input. In your case the checkbox element is lying at the top of the page, even outside the viewport – so Firefox tries to scroll there.
You can solve it like this by adding:
#ck-button label {
display: block;
position: relative;
overflow: hidden;
}
Demo
Try before buy
Alternative
Heisenberg points out a problem in his answer which can occur when using extreme values. Unfortunately the proposed idea has the same quirk as the one shown above.
So an alternative solution is simply to hide the input. The functionality is not affected.
CSS
#ck-button label input {
display: none;
}
Demo
Try before buy
The answer accepted is not entirely true. Works, but not in all cases.
If you use the common css to hide elements (probably -999em or similar) at the "top" attribute, in this case position:relative has nothing to do because always -999em will be much higher than the viewport.
The answer accepted works fine because the "top" is only -20px . Try to set it a more higher number and you´ll see the problem.
So, the solution is not to set a relative position.
I think the correct way is only to set a negative value at left position (not top).
Try it. :)
you could hide your checkbox input like this:
#ck-button label input {
position:absolute;
top:+20px;
visibility: hidden;
}
I am using a custom select/dropdown menu per the solution here: https://stackoverflow.com/a/10190884/1318135
This functions great, except that the options only display if you click on the box. Clicking on the 'arrow' on the right does not bring up the dropdown options. What's a workaround?
http://jsfiddle.net/XxkSC/553/
HTML:
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
CSS:
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}
.no-pointer-events .custom-select:after {
content: none;
}
Depending on your client base,
One very simple bit of code:
pointer-events:none;
See the browser support here: http://caniuse.com/pointer-events
Edit: just in bed and possibly thought of another solution but can't test on my phone, but maybe the jQuery mousedown trigger could be an option, to momentarily hide the arrow a split second before the click, maybe?
Or this, not sure how it'd be used, but saw it in another thread:
$('#select-id').show().focus().click();
If I was at my pc I'd test it...
That's nice. Thanks for the info. Like the use of content. Don't have an Android but from what I'm seeing in Mac on FF, Saf, and Chrome it works pretty good. May try adding:
-moz-border-radius: 0px 20px 20px 0px;
-webkit-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;`=
to it to .custom-select:after to align the borders.