2

I have a Collapsible set in my jQuery mobile app , the problem is that when I added a background image for the Page as I expand , close the collapsible the background image is stretch and moves with collapsibles , When i removed these lines from my css : 

background-repeat: no-repeat; 
background-size: 100% 100%;

this prolem has solved but this has caused another big problem which is that when I expand a collapsible and then close it the background will shrink " move to up with the collapsibe "and the page part beneath this collapsible becomes without a background "transparent " this happens on mobile devices more than jsFiddle ,this is my jsfiddle

Please help me how can I solve this Problem So the collapsibles can be expanded and closed without affecting the page background image ?

user
  • 621
  • 15
  • 46

1 Answers1

1

You can size your content to the device size using javascript: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

Updated FIDDLE

$(document).on("pageshow", function(){
    SizeContent();
});
$(window).on("resize orientationchange", function(){
    SizeContent();
});

function SizeContent(){
    var screen = $.mobile.getScreenHeight();
    //if you have a page header
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    //if you have a page footer
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

    /* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;

    $(".ui-content").height(content);   
}
ezanker
  • 24,628
  • 1
  • 20
  • 35
  • @ezankerThanks alot this solved the problem , but there is a strange issue occured which is some times not always i need to click the third collapsible "Governorate3" many times to be expanded and if there is a nother collapsible is expanded this third collapsible didnt close ! – user Feb 27 '14 at 23:30
  • this occures just with collapsible #3 ! – user Feb 27 '14 at 23:31
  • i can't reproduce that behavior... if the op is answered, please accept. – ezanker Feb 27 '14 at 23:36
  • @ezankerIts occured on the mobile and some times not always , I have reviewed the code but it still occure :( , Sure i will accept and +1 – user Feb 27 '14 at 23:40
  • Thanks. I don't see anything obviously wrong with the code. – ezanker Feb 27 '14 at 23:46
  • mmmStrange, you are welcome this is the minimum thing that can I do :) – user Feb 27 '14 at 23:57
  • @ezankerI have added a background image to a page that contains only a list view and as the list element becomes larger as the background also stretch I should do the same thing for this page also ? – user Feb 28 '14 at 00:02
  • Probably. Because you have set the image to grow/shrink as the page size changes, setting the size keeps the page the same size and instead adds a scrollbar to the content div. – ezanker Feb 28 '14 at 02:07
  • @ezankerI have tried the same concept of using SizeContent() in my Page which contains alist view and this solve the issue the background becomes not stretch as the list element becomes larger but this cause a big problem on android version 2.3.6 the content becomes not scrollable at all I cant scroll the list view and overflow: auto didnt work on android less than version 4.x Please How can I solve this problem? – user Feb 28 '14 at 14:24
  • @ezankerIs size content the only possible solution to prevent the Page background from being stretch ? Or Can we solve this Problem in another way ? – user Feb 28 '14 at 14:36
  • If your background image is a repeating pattern, the best solution is to create a tile and have it repeat on the background instead of stretching it. – ezanker Feb 28 '14 at 14:38
  • @ezankerNo it didnt a repeating and i use background-repeat: no-repeat; in my CSS to prevent it from repeating – user Feb 28 '14 at 14:41
  • @ezankerWhat can we do Now to solve this issue its very important for me to solve it Please I really need your help .. – user Feb 28 '14 at 14:42
  • as well as overflow: auto, try -webkit-overflow-scrolling: touch; if that does not work, you should post a new question and see if anyone else has encountered this issue. – ezanker Feb 28 '14 at 14:55
  • @ezankerI have tried it also and it didnt work on android version lower than 4.x :( – user Feb 28 '14 at 15:01
  • @ezankerSo the only possible solution to prevent Page background from stretching is to scroll the content only ?? – user Feb 28 '14 at 15:03
  • @ezankerDid you find any thing new ? I have searched for a soltion with no success :( I have posted a question about this issue http://stackoverflow.com/questions/22102458/how-to-prevent-the-page-background-image-from-stretching-in-jquery-mobile-1-4-0 if you can help me – user Feb 28 '14 at 18:01
  • @ezankerCan you help me in finding an answer for this , since Iam new in jQuery mobile Is this possible to do with it http://stackoverflow.com/questions/22105359/how-to-make-drop-down-panel-in-jquery-mobile-1-4-0 – user Feb 28 '14 at 20:43
  • @ezankerI am very thankful of your help, no one can help me like you Please can you help me more in this question ? Is it possible to make drop down panel in jQM? – user Feb 28 '14 at 21:53
  • Thanks I will read it , I have thought that we can adjust the Panel using css , I have not thought about using popup – user Feb 28 '14 at 22:26