When using the Split button dropdowns component inside a panel the options is not showing, I tried playing with the z-index but cant get the options to show above the panel edge.
Here is a plunker to demonstrate the problem: http://plnkr.co/edit/3tLsR3?p=preview
I tried setting the overflow: visible; suggested here https://stackoverflow.com/a/11963047/1719181 but the dropdown still not showing.
Is there some other css or javascript I can apply to help?
For future reference, I ran into this issue and solved it by applying the overflow rule on the .panel class instead of .collapse.in:
.panel-group .panel
{
overflow: visible;
}
Working fork here: http://plnkr.co/edit/due3dHqQkeSDtkBqnfuW?p=preview
Delete this div and it works fine:
<div class="panel-group" id="accordion" style="z-index: -1;">
I haven't found an answer yet, but I can suggest going with the "dropup" until a fix is found. I've messed around with both CSS and the bootstrap source and came up with nothing.
Related
I just had a heavy problems with a vue cli project with interactjs
the latest version is installed
"interactjs": "^ 1.10.3",
I use in vue https://github.com/kimuraz/vue-interact
Now I have the following problem, in a dummy project I have a component from which several multitouch elements can be created, these can be scaled, rotated, sorted ... all of them work wonderfully with dummy content.
in a real project I have a div that acts as a container for a scrollable content, suddenly the drag in this area no longer worked. At first I thought it was because of the container/scollable div combination, but when I remove the container the problem remained.
The problem currently occurs when the element loaded into the slot is a text element with a few lines of text. with 2-3 lines it can be moved on the text, if there are more lines the drag start and move event will be triggered, the move only a few times. so the window can be moved a bit.
what can it be, how can i handle it?
here the simple structure of the component:
<div :style="scaleRotateStyle" ref="scaleit" class="scale-element" v-show="isWindowActive == true" #mousedown="touchDown">
<div class="window-content-back" ref="content">
<div class="window-content-scroll">
<div class="window-content">
<slot :idNr="idNr" ></slot>
</div>
</div>
</div>
</div>
edit: after further testing I come to the following conclusion:
it is due to the overflow-y: auto of the scroll container.
.window-content-scroll {
...
overflow-y: auto;
overflow-x: hidden;
...
}
if I set this property to hidden I can touch it anywhere as usual.
what options do i have?
Pack the class '.window-content-scroll' in ignoreFrom within interact.js. Unfortunately, the entire content area is then no longer draggable, I thought I could move the window horizontally ...
scrolling the window content via javascript, does that make sense, is there a good example?
maybe someone has a nice idea?
Closing the loop for others who might find this: touch-action: none; worked for me, as suggested in #Shmack's comment. Was working with mouse, not touch.
When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.
I am using Materialize and the sidenav is creating multiple overlays upon clicking the sidenav.
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
I found a fix here and replaced the sideNav.js file from here. But it still doesn't do any good.
Has anyone been stuck in a similar situation and found a solution?
The reason there are multiple overlays appearing behind your SideNav is because materialize's $('.button-collapse').sideNav() is being run multiple times on the same element.
A quick fix for this is to remove all previous click() events from your element before re-initializing materialize's sideNav, like so:
$(".button-collapse").off('click').sideNav({ --yourOptions-- });
Note: I am not sure what other functionality the ".sideNav()" call may be adding here, there may be a better/more specific way to remove the previous init.
what language you are programming??
I spent something like with asp.net, the mistake was declaring this:
$(".button-collapse").sideNav();
In MasterPage and ChildPages. Now declaring only MasterPage and the issue was solved.
hopefully help you in something,
Regards
For those who are using the Materialize Framework on Drupal, make sure you do not accidentally side-load another copy of Materialize / Velocity JS through Grunt or other task managers. That would cause the overlay to stack up like crazy.
This is what I tried when I faced similar issue:
#sidenav-overlay{ opacity: 0;}
#sidenav-overlay {background-color: transparent;}
This question is similar to this one but I still cannot come up with a suitable solution.
On my site I am trying to implement the dojo Tooltip (not dialog Box as in the link above; click here to see Tooltip documentation). I would like to be able to change the zIndex of the Tooltip to whatever I need. I can only seem to get Dojo to work if I use a CDN such as http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js or //cdnjs.cloudflare.com/ajax/libs/dojo/1.9.3/dojo.js, so trying to alter the javascript of the tooltip file for Tooltip.js did not seem to do anything. Note: Tooltip.js was included locally as:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<script src="dojo/Tooltip.js"></script>
Using info from the link at the top of the page, I was able to come up with a hack solution. Assuming the default z-index for the Dojo tooltip is 1000, I changed the z-indices of all other divs (that were previously > 1000) to z-index < 1000. This solved the problem, and now the Dojo tooltip can be seen in front of these divs (previously was behind).
Any suggestions on how to alter the zIndex property of the Dojo tooltip without altering Tooltip.js?
I would recommend to override css rule according to your requirement.
Like by default css rule on dijit tooltip is as follow:
.dijitTooltip {
position: absolute;
z-index: 2000; // You can write your desired z-index
display: block;
left: 0;
top: -10000px;
overflow: visible;
}
Or you can try via JS
dojo.query(".dijitTooltip:visible").style("z-index", 'You desired value'); // <1.6
//>1.7
require(["dojo/query","dojo/dom-style"],function(query, domStyle){
domStyle(query(".dijitTooltip:visible"), "z-index", "You desired value");
});
Not sure if I fully understand your problem. But maybe this will help in changing the z-index of a dojo object programmatically using javascript:
dijit.byId('<Dojo ID of Tooltip>').attr("style","z-index:999");
I would also stay away from altering Tooltip.js.
For dojo 1.10 you could use dom-attr to set/change the style.
The code above will then look like that:
domAttr.set("mywidgetId","style","z-index:999");
Regards, Miriam
I would recommend using dojo/dom-style for this.
domStyle.set(tooltip.domNode, "zIndex", "999");
Do notice that FireFox will not accept "z-index" as a valid css property name, see http://www.w3schools.com/jsref/dom_obj_style.asp. Always camelcase the css property name.
Im using yiibooster with yiibootsrap in the yii framework. I dont want the site to be responsive so i set responsive to false. The problem is the default container width is too small, 940px. I want to change this to 1045px.
You could change the width set in protected/extensions/bootstrap/assets/css/bootstrap.css here:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
Alternatively, this is what I'm currently doing, you can override the CSS in your layout. In my protected/views/layouts/main.php I've added this style to the container div like this:
<div class="container" id="page" style="width:99%;">
Hope one of those options is useful to you...
The CSS is in \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.no-responsive.css
If you look at the css carefully, you will find several places where the 940px is hard coded in the css. This is how you get the 940px.
You can edit this, but I would highly discourage doing so for 2 reasons. First it is highly discourage to hack the standard code. It is better to override it with your theme css. Second, there are other css elements that are tied to the 940px. Changing the 940px in the container css may break other css. To overcome this problem, open up the responsive css, i.e. \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.css
Search for the word #media
Keep on searching until you find
#media (min-width: 1200px) {
what ever enclosed within the braces are the css elements that tied up to the container size. Copy them and place them at the end of your non-responsive file (or better in your theme css).
Thanks