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;}
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.
After doing quite a bit of research on the topic, I am attempting to figure out how to achieve BarbaJS-like page transitions with Vue/Nuxt.
My goal is to have the URL change upon the dynamic transition of, for example, a portfolio project. So, sort of like an expanding grid layout that also changes the URL when clicked. Examples of what I am trying to achieve are at the following two websites:
https://strakzat.com/
https://infinum.co
The first website actually uses BarbaJS, but the second just uses pushState to achieve the desired effect. When you click on the examples of their work, the project element does an expanding effect into a new page, along with the URL change.
I do know that this is much simpler to achieve using Vue/Nuxt but I cannot seem to figure out how I would go about it within the test project I am working on. In Nuxt, my assumption would be to use a combination of page transitions along with middleware, which would "catch" the data while undergoing the transition and then
the router would take care of the URL change. But then again, maybe it is even much simpler than this.
Any ideas or help would be appreciated.
If you are implementing your VueJS project as a Single Page Application or SPA.
You would probably use vue-router.
Vue-router has explained in their documentation how to add a transition when you navigate from one page to another. It is as simple as wrapping the <router-view> component with <transition> just like the example below:
<transition>
<router-view></router-view>
</transition>
For Future Googler. Just add these in default .vue in layout.
<style>
.page-enter-active {
transition: all 0.25s ease-out;
}
.page-leave-active {
transition: all 0.5s ease-in;
}
.page-enter,
.page-leave-active {
opacity: 0;
}
</style>
That's all. Keep experimenting with it to get the desired effect.
There is a great article here by Sarah Drasner that explains how you can do it either with simple CSS transitions or with more complex transitions using libraries like GSAP.
I'm using materialize 0.100.2 and have used multiple card-panels. Each card-panel has a button that opens a dropdown. The dropdown is same for every trigger. I searched for the solution and I even found a problem just similar to mine. But I did not understand the solution that was proposed. The problem and solution I found is can be seen on github on following link -
https://github.com/Dogfalo/materialize/issues/2051
My problem is like I import data from backend and I iterate card-panels up to the length of data I receive. I put the dropdown below this iteration so for it to be common for all the card-panels.
Consider 'actionLists' with the data.
<div class="card-panel" data-ng-repeat="actionItem in actionLists">
.....
<button class="dropdown-button btn btn-floating" data-activates="dropdown-example"><i class="material-icons">edit</i></button>
</div>
<div id="dropdown-example" class="dropdown-content">
....
</div>
Can you please help me out. I'm quite new to materialize. Thanks in advance.
Before anything else, I'd recommend updating to version 1.0 rc1.
There have been some changes since the 0.x versions.
Then you can have multiple dropdown-trigger element reference the same dropdown-content.
See https://materializecss.com/dropdown.html
I use the slick carousel on a regular basis and today I am experiencing an issue thats making me feel like I'm going insane.
When I apply the .slick() method to the parent element all the slides appear to the left of the page, the page extends horizontially by a lot and then when you attempt to slide it just jumps all over the place.
I have created a codepen to show the issue I'm having which you can see here https://codepen.io/harrietmcmahon/pen/pLWMbX?editors=1111
I've got
<div class="js--sc">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Applying .slick to js--sc
I've tried this with additional settings and without, I even tried just copying another codepen where it works, and it broke on that too!
Would really appreciate if someone could point out what I'm missing, or if anyone has experienced this issue?
Thank you
You just need to include the Slick CSS
https://cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css
https://cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css
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.