0

I have an angularjs app that i use cordova for android and ios devices. Normally the table is horizontally scrollable within the screen's innerWidth. But there is a problem only occurs in some android devices(in the browser and ios it's not happening). I'm sharing the image of the issue below. Scrollable table overflows screen's width. I think that the problem is about "fieldset" tag. Here's the html part;

<section class="col-xs-12">

    <!-- other fields -->

    <fieldset class="form-group">
        <!-- horizontal table -->
    </fieldset>
</section>

default bootstrap "fieldset" tag styles;

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

It seems that the problem is about "min-width: 0;" style. When I replace fieldset with a div and give all styles of the fieldset ("min-width: 0;" excluded) problem doesn't occurs.

Is this a bug? Is there a way to fix the problem without removing the fieldset tag? ("min-width" style's default value is 0 so i can't override it.)

screenshot(black part of the image is out of screen's width);

IMAGE

Ismail Gül
  • 119
  • 12
  • You can override bootstraps default by adding a custom rule, so which value does not cause the issue? – Asons Jun 24 '16 at 18:15
  • https://github.com/twbs/bootstrap/blob/master/less/forms.less first fieldset selector in this file. Can I override it without min-width:0? – Ismail Gül Jun 24 '16 at 18:40
  • Adding a custom CSS with this will: `fieldset { min-width: min-content; }` ... or use what ever value you need or want ... just make sure it loads _after_ bootstrap's CSS – Asons Jun 24 '16 at 19:16
  • I saw this answer: http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content. I checked it on firefox and it was same as cordova app. As I understand from the answer we can't override min-width style. I added display: table-cell and it worked on firefox. But it's not working on cordova app. User agent: Mozilla/5.0 (Linux; U; Android 4.3; en-us; GT-I9300 Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 – Ismail Gül Jun 27 '16 at 16:34
  • Okay, as I don't have an Android to test on I can't advice further – Asons Jun 27 '16 at 19:49

0 Answers0