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?
Related
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..
I am trying to make a similar offcanvas element in one of my projects. I found few examples, but since I am using bootstrap 3 I went on with this one: http://getbootstrap.com/examples/offcanvas/ I replicate it in my project, but instead of the toggle button on mobile I use Hammer.js like this:
Hammer("body").on("hold", function() {
$(".row-offcanvas").toggleClass("active");
});
The tricky part is that whenever my content inside the visible div, is shorter than the div containing the list of links (on the right) the page is scrolling. Once I add more content to the visible div, I do not get any scrolling and everything works as it should. I made a simple example here http://florin-cosmin.dk/offcanvas/index1.html , but it can only be tested on mobile, if you really want to see the scrolling (just HOLD not click anywhere in the body). The working example is here: http://florin-cosmin.dk/offcanvas/itworks.html
I tried to set overflow-x: hidden on the visible div, but that doesn't help.
Again, how can I remove scrolling on mobile even when the content on the left is shorter than the one on the right side?
It is very frustrating. Please help :)
UPDATE: I am testing it on default Android browser on 4.3 and 4.1.2. I need to use the default browser as my Android app uses a webview.
I have an issue with Google Chrome: 19.0.1084.52 m when I have the Ask Toolbar installed
it breaks the website layout.
See print screen:
Is it usual behaviour that toolbars in Chrome would effect the website?
EDIT: I guess I should wrap everything inside a <div> and move the background-image from the <body> although is there a better option without adding this extra markup?
Website link
A Javascript snippet can disable ask toolbar in chrome. I hope this function spreads quickly!!
function removeAsk(){
if(document.getElementById("apn-null-toolbar") != null){
// mainMenu had a style change for its top positioning, returning it to normal
// perhaps a function can be made which iterates over every element ask has changed
document.getElementById("mainMenu").style.top = "-16px";
// Just remove the iframe and style elements
(elem=document.getElementById("apn-null-toolbar")).parentNode.removeChild(elem);
(elem=document.getElementById("apn-body-style")).parentNode.removeChild(elem);
}
}
Call this method after body onload
<body onload="removeAsk()">
There is no Chrome extensions API for creating a toolbar so mentioned extension must have created it via content script. What it means is that for each page you open, CSS and JavaScript files are injected by this extension to create a DOM element within the page acting as a toolbar. Problem with this solution is that using the content script it is possible to mess up website look or even the way it works.
I ran into this exact same issue with the Ask Toolbar. I basically took out my positioning attributes and top/left/right/bottom 's and replaced with margins. Margin uses less space and it comes out cleaner.
Although i do agree, it's kind of ridiculous to accommodate for a toolbar because the end-user could have anything installed that breaks and gives your layout bugs. Even Skype extensions will break a layout just changing the phone number.
So there's not much you can do, but use margins and keep CSS to a minimum. Just my 2 cents. and if you have to use CSS then stick with margins.
I am having a problem with the visibility of my LIKE BUTTON social plugin.
the problem only occurs on IE (it works just fine in Chrome & Firefox), and only to the type of "box_count".
I tried multiple ways to implement the plugin (iframe, fb:like etc...) and the result in IE is the same (as the picture demonstrates in the following link):
print screen of the messed-up FB LIKE-BUTTON
The problem is ONLY while i'm toggling a div (in a "talkbacks" area), while to plugin is inside a DIV with "Display:NONE" (before the display changes to "display:block" by clicking on another link).
I think the property "display:none" effects the plugin on IE somehow, altough the display changes after toggling the div.
You can't have a div with an ID that starts with a number - it's invalid.
Try and use the HTML version:
<div class="fb-like" data-href="http://www.example.com" data-send="true" data-layout="box_count" data-width="70" data-show-faces="true" data-font="arial"></div>
Make sure you don't have any CSS styles that alter the width of the DIV - as Anagio said - use the developer tools on chrome/firefox to inspect the div element that has shrunk. Also look for any javascript errors.
If you can post the actual URL, people will be able to offer more help
I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.
There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn't have this issue I could do that too.
Thanks!
When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.
// detach iframe
_frame = $(_viewerFrame).detach();
function reattach(frame) {
// append it back to the div it was in (reattaching essentially)
$(_viewerDiv).append(frame);
setButtonStates();
setViewerState();
}
function onOk() {
... // other code
reattach(_frame);
}
function onCancel() {
... // other code
reattach(_frame);
}
// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...
Hope that helps...
This is likely because PDFs are displayed in a plugin, rather than natively in the web browser. CSS will not have an effect on this, because CSS only applies to content rendered in the web browser. Google does have a system that converts PDFs to HTML for display in browsers, at which point there would be no z-index issues, but some formatting may be lost in the process, and of course it is no longer a PDF document. Unless there is some way to tell the PDF plugin itself to lower its z-index (and consider that not all users will be using the Adobe plugin, some may use Foxit or other programs) you may be out of luck.
Try position:relative and z-index adjustment to get it in front of the iframe.
You're showing a pdf in an iframe? I'm guessing it has some sort of flash viewer? If so, then make sure you set the wmode of the flash embed code appropriately.
http://kb2.adobe.com/cps/155/tn_15523.html