Im building an App in Android and i have a div that have many divs inside, but when the amount of divs overflows the container size the screen does not scroll. I have tryed a lot of things:
- Overflow:auto and chidren with position:relative, doesnt work, not even a little.
- IScroll: It only works when i load it on the index.html and call it there. But the container im using is created later, when i go to another page, so when i call if from there it does not work at all.
- Other many CSS styles and properties and none worked.
Here is the divs hierarchy:
<div id="pageContent">
<div id="wrapper">
<div id="container" style="height: 100%; overflow:auto">
// HERE I LOAD THE PAGE
<div id="search" style="height: 100%">
</div>
<div id="mapHeader" class="resultsModeBar">
</div>
<div id="pharmacyResultsList" style="padding: 15px;">
<div id="pharmacyResultListHeader" class="rounded" style="background-color:#f0f0f1;margin: 0 auto;padding: 10px;margin-bottom: 10px;">
</div>
<div id="pharmacyResultListBody" class="rounded" style="border: 1px solid;border-color:#EA600A;margin: 0 auto;">
// HERE ARE THE DIVS THAT I WANT TO SCROLL
</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thanks.
If this app is built as a webpage, you should be able to open it in an installed browser or using a WebView and have it scroll correctly.
Beyond that, I'm not entirely sure I understand what you're trying to do, but here are my thoughts:
If you want "HERE I LOAD THE PAGE" to stay in place, you can do it one of two ways. Either wrap the part you want static in a position: fixed span
<span style="position: fixed">// HERE I LOAD THE PAGE</span>
or you can put the text that you want scrollable into a ScrollBox! ScrollBoxes have defined widths and heights and will basically define a section of the page to be scrollable.
<div style="height:120px; width:120px; overflow:auto;">
<div id="pharmacyResultListBody" class="rounded" style="margin: 0 auto;">
// HERE ARE THE DIVS THAT I WANT TO SCROLL
</div>
</div>
Check it out live here.
Related
When user is clicking on input field to put email or password my footer is coming up on the fields .
<div class=" bar bar-footer myfooter ">
<p class="login-p">Don't have an account?
<b class="forgot-details-link">
<a ng-href="#/signup" ng-click="reload('signup')">Sign Up</a>
</b>
</p>
</div>
Css
.myfooter{
background-color: transparent;
display: block;
position: fixed;
background: rgba(250, 250, 250, 0.07);
border-top: solid 1px rgba(250,250,250,0.30)
}
What I want to know is because it occupies the directives ionic delivery for you, for example in the documentation is clearly the footer in question.
<ion-content class="has-footer">
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
If you take this structure, combined with its css, you should not have display problems. Also I suggest that modifications of these classes and added to the framework, only modify colors, text sizes, fonts, etc, since they are ready to run correctly. This is only if you occupy these directives.
just add scroll="false" to your <ion-content scroll="false">
and also please check in controller to add this :
cordova.plugins.Keyboard.disableScroll(true);
I'm designing a page containing footer which contains long text box depending on the mobile device and a button adjacent to it, which will remain fix without considering the mobile device.
Following is the code:
<div data-role="footer" data-position="fixed"
data-theme="e" style="position: fixed;" class="ui-grid-a">
<div class="ui-block-a">
<input type="text" id="addComment" name="addComment" data-inline="true"></div>
<div class="ui-block-b">
</div>
</div>
Can we manipulate the ui-block-a width, to capture 80% of the width and remaining 20% only for the button??
Or is there some other possibility?
I want to make the appearance of the footer resembling as it is instagram while viewing comments or adding comments.
Use this
<div class="ui-block-a" style="width:80% !important">
jsFiddle
I have a bigger image, on which I have placed smaller images on specific positions. When I run my application on different devices, the smaller images get misplaced from their specified positions. Following is the code. Please suggest a solution.
<div data-role="content" data-theme="e">
<img id="m1" src="images/MTsupermarket.jpg" width="600" height="500" style="float:left; display:inline; margin-left:200px">
<div style="position: absolute;top:112px;left:387px;">
<img class="img1" src="images/cctvleft.jpg">
</div>
<div style="position: absolute;top:205px;left:460px;">
<img src="images/area1.jpg">
</div>
<div style="position: absolute;top:268px;left:576px;">
<img src="images/area2.jpg">
</div>
<div style="position: absolute;top:300px;left:676px;">
<img src="images/area3.jpg">
</div>
</div>
I have found that overlapping images with Android layouts is very hard to execute.
One thing I would suggest is scaling all the images and placing them in appropriate folders and using
"wrap_content"
for length and widths. I would not set the absolute position (absolute layouts are deprecated) I would rather try to set the margins.
I am using Phonegap with JQuery-mobile, I have a popup with a lot of text in it, it scrolls fine on iOS, but when I test on various Android versions, the scroll just doesn't work. It seems the popup is not listening to the scrolling events.
Here is a example of my setup, not exactly the same because I am using Backbone view to handle the loading of everything, but the final html should be similar.
my code setup more or less is like
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div id="scrollable_div">
<div id="inner">
<ul>
.....
....
</ul>
</div>
</div>
</div>
<div data-role="footer">...</div>
</div>
<div id="popup_wrapper">popup is loaded into this div programmatically and called popup</div>
http://jsfiddle.net/VRwLX/
What if you try forcing a height to popup? Seems like Android is not being aware of the popup's size.
[data-role="popup"] {
position: relative; // the parent container probably needs a position context also.
height: 90%; //just not to block the full screen - it is a popup :)
overflow-y: scroll;
}
Worked on my JellyBean Android stock browser, should behave similarly on Phonegap's webview.
If the above doesn't work, delete the position: relative and replace the height by a 'real' value (pixels) instead of a relative value.
I have the following HTML, mostly generated on the fly using JS, as a dynamic popup that appears when you click in several points on a map.
<div class="bubble">
<span class="topPaisCont"></span>
<span class="globalContent">
<h1>ASIA</h1>
<div class="contPais">
<a href="#" target="_blank">
<img src="images/flags/asia.png" style="visibility: visible; "> Asia
</a>
<br>
<!-- A few more <a>s with the same structure -->
</div>
</span>
<a class="close"></a>
</div>
I'd post an image but it seems I can't since I'm a new user...
The scrollable list of links is rendered correctly in most PC browsers and also on the iPhone and iPad, where it can be scrolled swiping one or two fingers.
However, I can't make it work on Android, where it can't be scrolled down.
Can you help with this? Is it the way it's implemented?
I can post the CSS if needed.