1

I have problems with the content width inside a collapsible list in jQuery mobile. I am not able to scale a table to 100% of the collapsible-inner-content element..

You can see a example here: http://jsfiddle.net/2nmeh/1/

I tried to update the collapsible-set with

    $('#pegel_einzelansicht').collapsibleset( 'refresh' );

without any impact to the table width. Any idea how to manipulate and what to manipulate in css or js?

I know that there are answers present that use some css manipulation like display: table;, but this destroys the reflow effect (jumping columns) in Safari and other mobile browsers.

Kate Gregory
  • 18,808
  • 8
  • 56
  • 85
user2456008
  • 11
  • 3
  • There is already an answer to this question. http://stackoverflow.com/questions/15311756/jquery-mobile-responsive-table-is-not-100-width-despite-css-styles – idmean Jun 05 '13 at 14:22
  • this didn't solve the problem. After adding display: table-row-group the parent element is occupied, but will destroy the reflow feature of the table. – user2456008 Jun 05 '13 at 14:26
  • Look here http://jsfiddle.net/2nmeh/2/ (As you can see the reflow feautre is there) – idmean Jun 05 '13 at 14:28
  • I tried the example in Chrome and it works. In Safari i have jumping cells after resizing the browser window so that the reflow effect become active. – user2456008 Jun 05 '13 at 20:36
  • This does not appear to be a duplicate. – Chris Stratton Jun 05 '13 at 21:21
  • It would be helpful for you to edit the question with why this is not a duplicate. The comments are a bad place for this. – George Stocker Jun 06 '13 at 00:01
  • I figured out that this is not only a problem inside a collapsibleset. Although the examples at [link](http://view.jquerymobile.com/1.3.1/dist/demos/widgets/table-reflow/#&ui-state=dialog) did not occupied 100% of the parent element. After adding the css code from answer 1 the cell is 100% filled. In Chrome everything is fine now. In Safari and Mobile Browsers changing the dimension of the window several times the colls of the table are jumping. Must be a bug of the jquery-mobile core. – user2456008 Jun 07 '13 at 09:15

1 Answers1

1

Working example: http://jsfiddle.net/Gajotres/a8VZu/

CSS : 

.ui-collapsible-content {
    padding: 0 0 !important;

}
.ui-table-reflow.ui-responsive {
    display: table !important;
}
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Yes this could be a solution for Chrome, but in Safari I get jumping columns after resizing the browser window several times. Same effect on mobile device. – user2456008 Jun 05 '13 at 20:39