For the life of me, I can't figure out how to prevent the dropdown menu, seen below, from riding behind the other buttons. I've changed the z-indexes of all the pertinent elements, but nothing seems to work.
I've setup a jsfiddle to demonstrate: http://jsfiddle.net/theoryshaw/44HPM/3/
(4 jsFiddle alerts will popup... please close them)
Any clues would be greatly appreciated.
Change the .dropdown-menu class in the css to:
.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 1px 0 0;
min-width: 160px;
padding: 4px 0;
position: relative;
top: 100%;
z-index: 1000000;
}
This fixes the z-index issue, however you are then stuck with buttons going haywire, but may be this helps you to get closer to the problem :)
Related
I am trying to put a JS chart inside a <div> but the issue is that when I put it inside the div tag, nothing shows!
I have tried with different libraries (C3, AmCharts, HighCharts) and all of them the same issue, nothing appears when calling the div of the charts inside another div:
<div id="chartdiv"></div>
The below one, does not work :
<div class="block"><div id="chartdiv"></div></div>
However, when placing it outside of the div tag, it works. I've tried to debug, but no errors shows on the console!
CSS of block class:
.block {
display: block;
width: 98%;
margin-right: auto;
margin-left: auto;
padding-top: 6px;
padding-bottom: 0px;
border: 1px solid #e2e2e2;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 0 0 hsla(0, 0%, 91%, .75);
}
There are 5 graphs on the page, and I believe that a conflict of a JavaScript happens which is causing the issue.
Any ideas about what's happening? I am not sure if there is an issue with the library itself; however, if you have charting libraries and that have the ability to show real-time data, please share it.
Try adding some explicit CSS rules - your HTML may be inheriting something unexpected:
.block {
width: 98%;
margin-right: auto;
margin-left: auto;
padding-top: 6px;
padding-bottom: 0px;
border: 1px solid #e2e2e2;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 0 0 hsla(0, 0%, 91%, .75);
/* Sure you don't want inline-block here? */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
I have a simple ul/li navigation menu in my wordpress site. It looks good on Chrome, Firefox but when website opened in Internet Explorer, it behaves strangely and pushes the "Blog" menu item on next line where as it's fine and on same line on other browsers.
Link: http://construction.windoverdevelopment.xyz/construction/
I understand that this is not an upto mark question but please support with this issue - I haven't been able to resolve it. Thanks in advance
Screenshot 1: (in Chrome - whole menu in same line)
Screenshot 2: (in IE - BLOG is moved on next line)
The css for navigation is:
.main-navigation {
background: rgba(0, 70, 127, 0.95);
margin: 0;
padding: 0;
-webkit-box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
/*
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
*/
}
.main-navigation li {
margin: 0;
padding: 5px 0;
font-size: 16px;
}
.main-navigation li:last-child {
position: absolute;
top: 95px;
right: 30px;
background-color: rgba(255, 255, 255, 0.75);
}
#menu-main-menu>li.menu-item:last-child>a {
color: #00447C;
font-family:"Open Sans", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
text-transform: none;
padding-top: 10px;
}
.main-navigation li ul li {
padding: 0;
}
.main-navigation li ul li:last-child {
position: relative;
top: 0;
right: 0;
background-color: transparent;
}
.main-navigation li > a {
display: block;
padding: 0 35px;
}
I think sum of child controllers width exceeds the parent div container width. You can optimize padding value for IE browser. But better way is that remove the rule that works different in IE and Chrome.
In style.css; (line: 535)
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
font-family: "adrianna-condensed-demibold",sans-serif;
font-style: normal;
font-weight: 600;
border: none;
display: none;
padding: 3px 0 2px;
text-align: center; /*This one is problematic*/
width: 100%;
}
text-align: center; rule works different in IE and Chrome you can adjust this rule.
The rule:
/*media all*/
.main-navigation li > a {
display: block;
padding: 0 35px;
}
looks to be causing your issue, adjust the right padding for that last element.
A css reset would likely have helped to resolve this, but it can be a PITA to deal with adding one late in the game.
You can try this only for IE, for specific version use some CSS hack.
.main-navigation li > a {
padding-right: 34px;
}
Similar to a previous question but I gave up on that an decided to come back to it later, now things are different as I'm using jQuery. I'm having a dropzone on my site and for image files I would like there to be a border shadow, but for files I don't want one. Multiple files can be dropped and the previews display inline, so say if 2 images and one file were dropped, I would want the shadow on both the images, but not the file preview box. I made 2 CSS classes, identical except for the shadow:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
.dz-preview-noshadow {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
Simplest way to go seemed to be with jQuery and I was using it in the project anyway, so I made this (.dz preview is the default class):
mydropzone.on("addedfile", function(file) {
if (!file.type.match(/image.*/)) {
$('.dz-preview').addClass('dz-preview-noshadow').removeClass('dz-preview');
mydropzone.emit("thumbnail", file, "http://i.local.dev:5000/jLNutaV.png")
}
});
It works initially-but goes wrong. I drop 2 images and they get their shadowed border just fine, but when I drop a file, it loses its shadow, which is what I wanted - but so do the two images that were dropped before it. If I drop another image it will get its shadow again, but the previous elements don't change. I know I'm missing something really stupid here about the scope of how JS is affecting these classes, but is there a way to change the class for JUST that instance, without muddling up everything before it, or do I need to run more checks and manually add the class back on?
Can't post codes in comments, so I'll make it an answer.
Since .dz-preview and .dz-preview-noshadow shares a lot of same codes, you can have a class that just holds the shadow. For eg:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
.shadow {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
So instead of adding and remove, you can just do a remove.
This question already exists:
How to make this into a sliding left/right div
Closed 9 years ago.
Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?
I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2
If anyone can provide a jsfiddle, I'd greatly appreciate it ;)
HTML
<div id="left">
Edit Profile
Settings
Sign Out
</div>
CSS
#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
width: 145px;
height: 22px;
padding: 5px 12px;
margin: 0;
border-bottom: 1px solid rgba(204, 204, 204, 0.09);
float: left;
display: inline-block;
position: relative;
top: 34px;
color: #15ADFF;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
width: 138px;
background: rgba(204, 204, 204, 0.4);
border-right: 7px solid #15ADFF;
color: #111;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}
I'm assuming I'd need to add an id or class as either #open, #close and/or .open, .close.
You could use jQuery's animate function, should do the job easy enough.
Tutorial/Information on .animate:
http://viralpatel.net/blogs/understanding-jquery-animate-function/
There really isn't enough info here to know what you want, because the layout of the page is important. Without knowing if the menu should be absolute, fixed or relative.
You can use jQuery's animate() method to animate CSS numeric properties, and then use mouseenter and mouseleave to slide the menu.
http://jsfiddle.net/thinkingmedia/8a7GL/1/
It's only 2 lines of code.
I have created a page in MVC Razor which includes one textbox, and which has autocomplete functionality. My problem is that the autocomplete results appear far below the textbox the first time it is used (as shown in this picture), but subsequently appears in the correct place (i.e., exactly below the textbox). Why this is happening?
My CSS is as follows:
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 2000;
float: left;
display: block;
min-width: 160px;
_width: 160px;
padding: 0px 0;
margin: 2px 0 0 0;
list-style: none outside none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
And my HTML is as follows:
<input class="contentPicker input-xxlarge ui-autocomplete-input valid"
id="Content" name="Content" placeholder="Select a content"
type="text" value="" autocomplete="off">
You should not overwrite any positioning css from jquery ui. Of course it's gonna make things behave weird.
The first time the list is showing, is reading your css, but subsequent searches are probably overwriting your css with inline styles
jquery-ui is a plug and play solution, if you include the jquery-ui css files in your page, you shouldn't need to do anything. They have a very advanced theme roller, that takes care of all styling for you, so you don't have to mess with it