I'm using ruby on rails 4.2.2 with gem foundation-rails 6.1.2.
I've installed everything as in the docs and now trying to make simple reveal modal window, like in foundation docs here
I've imported motion-ui, but it still doesn't work. Here is the code in slim:
.reveal#exampleModal1 data-reveal='data-reveal'
h1 Awesome. I Have It.
p.lead Your couch. It is mine.
p I'm a cool paragraph that lives inside of an even cooler modal. Wins!
button.close-button data-close="data-close" aria-label="Close modal" type="button"
span aria-hidden="true"×
And the link itself to open the modal:
a.open-modal data-open="exampleModal1" Open modal
So the modal is opening but has strange styles for the first opening. It's too wide(inline styles are added to the modal) and close button doesn't close the modal. If I close the modal by clicking outside the modal or ESQ - it's closed. The second time I open the reveal, it has correct width of 600px(styles pane in console shows that now styles come from some css file). But close button still doesn't work.
What am I doing wrong? Any ideas? Thank you
Oh, dealing with close button was easy thanks to opened issue on github
As stated in the issue, still have problem with initial styling..
Related
I have a modal in a react component and when I open it, it does not completely close with any sort of action clicking away or even hitting the close button by completely I mean it removes the backdrop but the modal stays in screen(I will attach a screenshot for that)
I figured it out. It seems that my button in the modal header was messing something up somehow. When I removed it, it worked!
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.
I'm using angular-ui with bootstrap and when I try to use the modal, it brings up something and darkens the background, but does not display my content. I see it requesting the proper background and window files. If I use Chrome tools to troubleshoot, I only see this inside the content:
<div class="modal-content" modal-transclude=""></div>
Should I see the transcluded HTML inside this? If I edit it manually within Chrome tools, and then enter in some text, it displays properly.
All other aspects of the modal seem to work; clicking outside kills the dialog, and it accepts the 'sm' and 'lg' size parameters.
Any suggestions on how to troubleshoot?
I'm using:
angular 1.2.21
ui-bootstrap-0.11.0
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
Maybe there is an incompatibility with these three?
I'm new here (and also with bootstrap and JavaScript) and hopefully im not asking a question already asked before. I did google plenty and search on here and could not find anyone mentioning this specific problem.
I found a bug I think with Bootstrap 2.2.1 .. when you close a modal, the href link which called it now has a blue border around it. This happens with buttons, nav items, anything. This can be seen on the Bootstrap live demo itself - click the blue button "Launch demo modal" under the section "Modals bootstrap-modal.js". You can see a light blue border around the button after closing the modal.
http://twitter.github.com/bootstrap/javascript.html#modals
This issue drove me mad, I messed with the CSS for ages, then tried different browsers, until I downgraded and the issue above is not present on bootstrap 2.0.4.
Does anyone know if this is a known issue with 2.2.1 or has it been present since a particular version?, or what the problem is here?
It's pretty simple fix once you locate what the CSS property is. I think it came from some issue with the modal's focus and they decided to modify the generated html. You need to define the following CSS. It comes from the following link.
.modal-open .modal,.btn:focus{
outline:none!important
}
Hope it helps! I made a jsfiddle of the result (including bootstrap's css + js) so you watch a live demo of it, here. Note that if you're using something that isn't a button the outline may come back, since we're only applying it there. Since you're referring to a href, it's likely that you're calling the modal from a link, and therefore should also trigger a:focus
I am using #font-face on a site I am working on, and all is working perfectly cross-browser until I use a modal window to display an iframe.
When a link is clicked within the iframe or a form is submitted, Internet Explorer 8 loses the #font-face styling and reverts to Arial. This problem also occurs if a modal window is opened with an iframe, then closed again, and then the user highlights text. As soon as the text is highlighted, it loses its font styling.
Has anyone else had this problem before or found a way around this?
I've found this issue too. I've done some work on trying to reproduce, and found it's extremely variable. Sometimes it will happen, sometimes not.
See my full post here:
http://kenneth.kufluk.com/blog/2010/02/losing-face-with-ie8/
Things to try:
Check your doctypes match
Remove all fallback fonts (bit harsh, but seemed to work)
Use javascript to reload the stylesheet after the window closes