I implemented the Fullcalendar API.
Now, when I select one of my items in the header, Fullcalendar always overlaps the dropdown entries.
So it looks like:
As we can see the middle entry is being overlapped.
I already tried to adapt full calendar`s CSS in Eclipse but I canont adapt the jar file.
Everything is imported via Maven, maybe that is the reason.
Any help is appreciated.
I will answer my own question.
The solution is to use z-index in my index.css.
I set it to
z-index: 10000;
only to be sure.
Now, the dropdown menue is always in foreground.
Related
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
Is it possible to put the tab links in the footer
and the rest of the tab content in the main section?
I have tried it, but once I put the tab links in the footer, the tab component stops working all together.
As far as I know, tabs in the footer are not specified by Material Design. It wouldn't be supported as a default function, but could possibly be hacked and made to work. With that though, no guarantee on updates not breaking it.
If however they are specified, point it out please and we can take a look into either explaining better if it is supported or get the code fixed to work right.
I need to show different Ionic lists in a tabbed menu. The problem was include those tabs with the slide option. So i found this: tabbedSlideBox.
Made it work, edited it's styling to go with my app. But I can't get the tabs menú to stay fixed and don't move.
I made a pen to show you my problem: http://codepen.io/anon/pen/qdjxrB
Line 21 you can see the style inline with the fixed property that doesn't work. It keeps moving with the content, which is the opposite of what I need, I need to be able to move the list up and down and the tab menu should remain in it's place, but it should be able to move to right and left.
I believe it has something to do with the translate3d, but I can't figure out how to solve it without breaking the whole thing.
Tried to modify it's directive but I ended up breaking it..
Hope someone can help me.
Thank you.
EDIT
I've been reading about fixed positioning and absolute3d transitions, and they don't get along, the fixed element behaves as it was absolute positioned because it takes it's container as reference for the positioning: http://codepen.io/markdebeer/pen/qrBDm, but if anyone comes with a solution to this i'll be grateful.
I am using the latest version of Redactor and have noticed that the z-index of the toolbar is set above many other components (Bootstrap modal, drop-down menus, etc). I browsed the docs and could not find any mention of changing the toolbar's z-index.
What is the best way to fix this problem? Is there a setting I missed that can be called upon initializing?
From Art at Imperavi-
Thank you so much for reporting this. At this time, the only
workaround is to manually adjust Redactor's z-index, please see line
58 in redactor.css.
I am in the process of using Foundation to create a website, and I have come across a problem that I can't seem to find the solution too. I have noticed that when expanded, some of my drop-downs get cut off in the Mobile Version of the Top Bar, and I was wondering if anyone had come across this issue, or had a fix for it. Did I do something in the CSS that made the JS no longer count all of the elements correctly?
You can see what I am saying here.
http://www2.100foldstudio.org
Just try this by adding in css.
.jScrollPaneDrag {
height:0px!important;
}
I think the link is break in theme
Update the link from
http://www2.100foldstudio.org/wp-content/themes/100foldstudio/_/js/functions.js
to
http://www2.100foldstudio.org/wp-content/themes/100foldstudio/js/functions.js
Figured out that if I add a List Item at the end of the main top bar section in "mobile" mode, and added a clearfix class to it, the js kicked in and started calculating the height correctly.
Thanks guys,