I have a simple jQuery mobile site with three pages in it.
In every page's div I've added
data-add-back-btn="true"
Still on none of the pages (not even on the sub-pages) a back button appears.
Is there some trick to this?
As of jQuery Mobile 1.4, data-add-back-btn="true" should be added to header div not page div.
<div data-role="page">
<div data-role="header" data-add-back-btn="true">
<h1>Header</h1>
</div>
</div>
Related
On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.
When I click on an icon, a popover shows.
I realize that there is delay set with the popover, but when I scroll, the popover moves as well.
How can I make it stay where the icon is and not work with scroll?
<md-badge class="current-plan-type__icon--badge" direction="right" [mdPopover]="tootltipTemplate" delay="10000"
popoverTrigger="MouseEnter">
<i class="cui-icon icon icon-info_16 current-plan-type__icon--info"></i>
</md-badge>
Just move tootltipTemplate outside of your scrolleable div it will be called even if is not at the same level.
I think you have this problem: the popover template inside of the scrolleable div.
<div #root>
<div #scrolleable>
<div #tootltipTemplate></div>
</div>
</div>
Then my suggetion is: moving out the popover template of the crolleable div.
<div #root>
<div #scrolleable>
</div>
<div #tootltipTemplate></div>
</div>
I hope it works for you.
I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox.
I have a menu bar, a main div, and a footer.
In the main div, I have a "main box" (will rotate in 3D) and a loading div.
The loading div hosts the animation for loading.
Html is kind of the following:
<div id="site">
<div id="menuDiv" class="mainSection"> Menu bar</div>
<div id="mainDiv" class="mainSection">
<div id="mainBox">
<div class="mainBoxSide front">
</div>
<div class="mainBoxSide right">
</div>
<div class="mainBoxSide back">
</div>
<div class="mainBoxSide left">
</div>
</div>
<div id="loadingDiv">
<div id="loadingBox">
<div class="loadingBoxSide loading-front"></div>
<div class="loadingBoxSide loading-right"></div>
<div class="loadingBoxSide loading-back"></div>
<div class="loadingBoxSide loading-left"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="mainSection">Footer</div>
I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox.
So in term of z-index : footer < mainBox < loadingDiv.
I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG
When opened in Chrome, everything works fine.
When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.
There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ
Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.
Thanks!
Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.
I have a 'big' problem with iframe. I had to make an iframe inside a container div witch has a Bootstrap modal inside. everything is working fine on desktop (Chrome, firefox, safari etc.)but on tablets, when i call the open function for the modal, it is remove every other content except the iframe.
here is the html code:
<div class="content">
<div class="container-fluid header">
<div class="container">
<div class="row">
<!-- SOME HTML CODE HERE-->
</div>
</div>
</div>
<div style="clear: both;"></div>
<iframe src="/game/" width="100%" height="786" style="border: none" id="table-1"></iframe>
</div>
The iframe is an html document too, and i know that i souldn't had to use it for this, but thats what they want me to do.
I am facing a weird problem in my HTML template.
Expected Layout is :
Navbar
Slider - Text on the slider
Some Section.
Result:
Navbar
1. Some Section
Slider - Text on the slider - Section on the slider i.e., below the navbar
I am using bootstrap.
Using 'Developers Tools' I found out that, the slider.js appends some div tags just before any other tags in the body. The whole area is covered by the slider div first. Then comes the navbar and section. Looks like there is no connection between navbar - section and slider.
The existing code looks like this in the browser in developer tools option:
<body>
<div class="slider></div>
<div class="container">
<div class="panel">
<img src="" class="" />
</div>
</div>
<nav>
</nav>
<section>
</section>
</body>
Please help me. I am unable to understand.
Thanks.