0

Update:

Please do read through my jsfiddle code and than provide your answers, please do not just simply copy a answer/links of similar questions to this post. As I mentioned before, the topic looks similar, but the causes of this problem may be quite different.

I know this question might look like some questions which have been asked many times, but trust me, I have tried whatever I have found from the similar questions and none of them works for me.

Okay, back to my question.

I have several similar jQuery Mobile pages, and I use its ui-grid-a, ui-block-a and ui-block-b to make the layout responsive(hopefully). But I found that when the screen height is higher then the current active page height, the cells/rows on the pages do not expand high enough to cover the full screen height. I have been stuck on this issue a week already. Please help.

.timeCol, .rightCol {
    min-height : 100% !important;
    line-height: 50px !important; 
    height: 100% !important;
}

Here is the jsfiddle code at: http://jsfiddle.net/franva/26We4/22/

As you can see from my HTML and CSS, I have removed any height from HTML and only put the height in CSS and height: 100% !important; min-height:100% !important;

It's okay for when a page is higher than the screen, but I do not want to see some blank space between the last row of the timetable and the bottom of the screen.

Update 2

I copied and tried Omar's code on my machine, but surprisingly I found 2 strange places.

  1. My Monitor resolution is 1920 * 1080, but the screen height shown was 248(I guess it's pixels).
  2. Everytime, the value of $(this).find(".ui-content").outerHeight() and $(this).find(".ui-content").height() are always 0?!

Here are a list of variables and their values when debugging to the pagecreate event.

$(".ui-content").height(): 0 " $(this).find(".ui-content").outerHeight()": 0 $(this).find(".ui-content").height(): 0 check: 39 screen: 248 blocks: 32 header: 39 contentCurrent: 0 content: 209 colHeight: 13.0625

Now, I'm thinking is it because of the place where I put it is wrong?(I put the code inside the pagecreate event.) But in Omar's code, it's not put into any event. Any thoughts?

Update 3

I tried to move the code into document.ready like below:

  $(function () {

            var blocks = $(this).find(".timeCol").length + $(this).find(".rightCol").length,
            screen = $.mobile.getScreenHeight(),
            header = $(this).find(".ui-header").hasClass("ui-header-fixed") ? $(this).find(".ui-header").outerHeight() - 1 : $(this).find(".ui-header").outerHeight(),
            contentCurrent = $(this).find(".ui-content").outerHeight() - $(this).find(".ui-content").height(),
            content = screen - header - contentCurrent,
            colHeight = content / (blocks / 2),
            check = header + $(this).find(".ui-content").height();

            if (check < screen) {
                $(".timeCol, .rightCol").css({
                    height: colHeight + "px"
                });

                $(".rightCol > div").css({
                    height: (colHeight / 2) + "px"
                });
            }
        })

But it still doesn't work. The reason why I tried to put the code outside pagecreate was because I thought by the time when the event is called, the content of that page might not be "filled in" to the DOM, so that's why it's always 0. But now it's still doesn't work. Seems like this question has become more and more weird.

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Franva
  • 6,565
  • 23
  • 79
  • 144
  • Are you using the media queries for the various screen sizes. Try that. – Learner Feb 12 '14 at 06:49
  • @Learner hi, yes, I heard that and I'm still a learner of media queries. But I think that one is used for re-sizing the width of web pages, not for the height. If I am wrong, could you please provide me some example code? thx – Franva Feb 12 '14 at 07:07
  • http://mobile.dzone.com/articles/responsive-design-and-jquery go through this , may be it helps. – Learner Feb 12 '14 at 07:20
  • Also if you reuire a fully responsive desgin you can also club Twitter Bootstrap css with Jquery. The grid feature and the responive feature is too good in that. Hope it helps. – Learner Feb 12 '14 at 07:24
  • Check this http://stackoverflow.com/questions/21552308/set-content-height-100-jquery-mobile/21553307#21553307 – Omar Feb 12 '14 at 07:31
  • @Omar Hi Omar, I've checked your solution and it doesn't work for me. Actually before posting this question, I have tried yours already. Please have a look my code in order to understand my real question. thank you. – Franva Feb 12 '14 at 15:16
  • @Learner Hi, I have gone through the article you provided, Yes I am using one of techniques mentioned in that article and it doesn't work.Please have a look my code in order to understand my real question. thank you. – Franva Feb 12 '14 at 15:18
  • the fiddle doesn't reproduce the real problem. If you have 3 rows, you want them to fill the page? – Omar Feb 12 '14 at 15:25
  • @Omar, Hi thx for trying it. try to resize the Result window to its highest and drag the browser onto a high resolution screen say 1920*1080, then you will see the problem. I got your point, but the timetable will always have at least 17 rows(one for each time), so I want those 17rows to fill the page. Once again, I appreciate your help. – Franva Feb 12 '14 at 15:31
  • is this what you want? [demo](http://jsfiddle.net/Palestinian/xmxSZ/show/) - [code](http://jsfiddle.net/Palestinian/xmxSZ/). – Omar Feb 12 '14 at 15:46
  • @Omar, Hi Omar, this time the code works in jsfiddle, good job. But when I copy the javascript code into my project, it stops working. What else have you changed? Btw, I don't have .ui-header/footer/content classes, so I use [data-role='header'] /footer/content to replace them. I actually even don't have footer in my project because a footer is not necessary on a timetable. Could you please point me out about what else I need to do other than the JS code? – Franva Feb 12 '14 at 17:10
  • @Omar, Hi Omar, this time the code works in jsfiddle, good job. But when I copy the javascript code into my project, it stops working. What else have you changed? Btw, I don't have .ui-header or footer or content classes, so I use [data-role='header'] [data-role='header'] [data-role='content'] to replace them. I actually even don't have footer in my project because a footer is not necessary on a timetable. Could you please point me out about what else I need to do other than the JS code? – Franva Feb 12 '14 at 17:19
  • @Omar, why colHeight = content / (block/2)? For some period of time, there could be 3 training classes. For this reason, I think we should use each method to loop through rightCol and count the inside divs. What do you think? – Franva Feb 12 '14 at 17:20
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47340/discussion-between-omar-and-franva) – Omar Feb 12 '14 at 18:00

1 Answers1

0

In previous JQM projects I've also had a similar issue,

The root of it begins with the fact that JQM pages do not have a pixel-based height defined but are rather set at height:99.9% which makes it impossible for the browser to calculate relative heights thereafter.

I use such a code at the page/app initialization or rotationChange event

viewPortHeight = $(window).height();
$('div[data-role="page"]').css({
    'height': (viewPortHeight) + 'px'
});

From there on you can give a table a height of 100% and the TR and TD's will expand accordingly. You will have to refactor your "table" to become a true table. Also you may need to set the height of the table on a pixel based amount if you want to have static headers/footers.

Rob Schmuecker
  • 8,934
  • 2
  • 18
  • 34
  • Hi Rob, thank you for your reply. I really do not want to convert my divs to a big table. But I will give it a try when there are no options left. Thank you. – Franva Feb 12 '14 at 12:53