its not dublicated question because I didnt understand the smilar
question's answer.may I can delete after solved my question, if the answer so easy.
When bootstrap 3 modal is opened, my mega menu appear upon it.to solve this, while bootstrap modals are opened, I must reduce z-index of mega menu.mega menu's z-index is maximum now for all time.
I found this question:
Calling a function on bootstrap modal open
it says:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
for bootstap 3.
how can I write this code with jquery or javasicript?
edit: to give specific request, I want to determine bootstrap class to use it instead of #code word and then, write changing z-index value of a spesific class via jquery.
https://resimli.yedek.deniz-tasarim.site/
website is this.
bootstrap modals open with sign up/login buttons on header. ( top-right )
I am foreign to bootstap 3 and there are many classes for modals.So, it confused me.
Your menu overlaps the modal due to the default maximum z-index.
Here's what the css rules for the menu look like now:
#wp-megamenu-header-menu {
z-index: 9999; <=== /*the problem is here*/
text-align: left;
height: 90px;
background-color: #fff;
padding-top: 20px;
padding-right: -20px;
padding-bottom: 40px;
padding-left: 0;
}
And this is most likely written by you:
.wp-megamenu-wrap {
z-index: 99999;
}
To solve this problem, it is sufficient to override the z-index with the !important rule. Insert this rule into your css:
#wp-megamenu-header-menu {
z-index: 1000!important;
}
And your overlap problem will go away!
Related
So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR
Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}
So I am using smart-wizard https://github.com/mstratman/jQuery-Smart-Wizard.
I have included it in js-popup, so when I open the popup it does not show the first step. I need go to the second step and then go back to see the first step
I had the same problem, what I did was download the smartWizard css, the smart_wizard_all.ccs version and in the last line of the file add:
.tab-content {
height: auto! Important;
}
I hope it works for you. Sorry about my English I am using the google translator hahahaha,
Greetings,
i escape this case by "onmouseenter" after call show modal.
<div id="modal" onmouseenter="call_wizard()">
<div id="wizard" class="form_wizard wizard_horizontal">
<!-- step 1,2,3,4 -->
</div>
</div>
<!--$('#modal').modal('show');-->
<script>function call_wizard(){$('#wizard').smartWizard();}</script>
Not exactly a fix, but I found a workaround. Looks like the step-container initializes with height zero. Don't know why this happens, but we can override it in the css file. In the css file you are using to style your "Smart Form", look for a class called stepContainer.
.form_wizard .stepContainer {
display: block;
min-height:500px; // Add this line with your minimum height
position: relative;
margin: 0;
padding: 0;
border: 0 solid #CCC;
overflow-x: hidden; }
This should fix your problem until someone can explain why it happens in the first place.
I am getting the same kind of problem as element is previously hide and when I show that element then I am getting same problem so I tried this below code and its work for me
`$('[name = elementName ]').show(1000, function() {
$("#wizard").smartWizard("currentRefresh");
});`
Its actually load the fist step but it set its height to zero as its is previously hidden but after applying $("#wizard").smartWizard("currentRefresh"); it refresh the current step and set proper height.
I've two radio buttons with Drop down and I need to put the drop down
in parallel to the second radio button,when we add to the css code
the following its working but this is not a good solution since if I've
bigger page with other control this can override them either
#__box0 {
margin-top: 20px;
margin-left: 20px;
}
there is another option to do that with CSS?
http://jsbin.com/ziziqeyopu/edit?css,js,output
The Html is renders in the renderer method
This is SAPUI5
http://openui5.org/
code but for the question its not relevant since
renderer is related to pure html/css...
i've tried with the following which doesnt works.
.mylist-content>div:first-child {
margin-right:30px
margin-top:50px
}
.mylist-radiolist>DIV:last-child {
margin-left: 30px;
margin-top:100px;
}
If you still haven't figured it out, give this a try:
.mylist-content #__box0 {
position: relative;
top: 20px;
left: 20px;
}
What you see above should do the same thing as your first attempt, but not interfere with anything else on your page, by:
Adding extra application restrictions to the CSS rule, by having the .mylist-content scope restriction (even though this should not be necessary, in theory, because #__box0 is an ID and should be unique on the page).
Shifting the position of the dropdown without affecting any other elements - this is done with position: relative and the corresponding top and left offsets.
Without knowledge of SAP UI and/or your particular situation, I doubt someone will be able to give you a more appropriate answer.
I have Foundation installed in an application where prettyPhoto is also used.
The problem is the top-bar menu is disabled (hovering, links and dropdown are all disabled as per this page here on certain pages, whereas on any other page for example here the functions are fully enabled.
I have isolated the problem in the following generated code:
<img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" />
If it is removed, the functions return. I believe it is a javascript issue because links and css would appear to not cause the issue in other page locations...
How can both set of functions be made to co-exist?
The problem is not with JavaScript conflicts.
It is because of the
<div id="container">
according to css
#container {
margin: 0 auto;
position: absolute;
padding-top: 50px;
padding-left: 142px;
z-index: 300;
}
your z-index is 300. Which means it is on top of everything including couple of menu-options.
remove your z-index property everything should be fine
I have been modding a vbulletin forum. All I have modded is the css from within the style editor in the bulletin control panel, plus two template files.
What I have found is that one of the javascript dropdowns is no longer working (it definitely was).
The forum is http://forum.selfbuild.com/
Other dropdowns still work ("community" and "forum actions" links in header) so it relates specifically to the "notifications" dropdown menu item, that you see when logged in.
I have reverted the two template files I modded, but the problem still occurs, so it's not that I have blasted some code out of existence.
On mouseover, rather than the browser showing javascript:// in the bottom bar, it shows a URL.
So I have no idea how to fix it - I don't know how to go about tracing a javascript problem.
Any help appreciated. To log in and see the issue, you can use testuser abc123, and once logged in the notifications menu item appears.
Remove overflow: hidden from .toplinks - then your menu will show.
.toplinks {
background: none repeat scroll 0 0 #DEDEDE;
color: #417300;
float: right;
font: 11px Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
overflow: hidden; <- kill this
text-align: right;
width: 430px;
}
This class was basically hiding everything that wasn't already shown, ie. the drop downs.