Click here to Skip to main content
15,885,309 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Dear friends,

I got a weird bug today. I'm trying to show a list off data on a tablet with mvc c#.

I got this container where i want to load the data.

<div class="nav-table-container"></div>


loading th data with ajax

$(".tabblad-container").click(function () {
    jQuery('.tabblad-container').removeClass("tabblad-container-active");
    jQuery(this).addClass("tabblad-container-active");

    var url = "Tabel/" + jQuery(this).attr("id");
    $("#loaderoverview").show();
    $.ajax({
        type: "GET",
        url: url,
        data: "",
        success: function (data) {
            $("#loaderoverview").hide();
            $(".nav-table-container").html(data);
        },
        error: function (xhr) {
            $("#loaderoverview").hide();
            alert("error");
        },
    });
});


The data is a partialView which returns data(test):

<div class="table-responsive">
    <div class="Note-table">
            @for (int x = 0; x < 14; x++)
            {
                <div class="note-row">
                    <a>@Model.notitie</a>
                    <p>Gemaakt op @Model.datum door: @Model.gemaaktdoor</p>
                    <hr />
                </div>
            }
    </div>
</div>


On the pc version Chrome browser is showing evrything fine. Already tested the data passing serveral times and the data is returnd and shown on the computer and tablet.

If I directrly navigate from to this partialview everything is fine.
But if I navigate from this partial view to another partial view on the tablet it is not showing me the data (html code is showing the data in the source code but not onscreen). But only a white screen without the data (data is in source at that moment).

If i remove any css tags in chrome browser or rotate the tablet the data is back.
Anyone which had the same problem and know how to fix?

On the chrome desktop version evrything is oke.
Posted
Updated 1-Oct-15 1:10am
v2
Comments
Nathan Minier 1-Oct-15 7:25am    
Do you have your initial viewport set?
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

Also, if you're running bootstrap, have you followed the steps here:
http://getbootstrap.com/2.3.2/scaffolding.html

Finally, are you set properly for HTML 5?
<!DOCTYPE html>
Wessel Beulink 1-Oct-15 7:28am    
Thanks for your quick support. I was using the table-responsive. working fine on all browsers and desktop version. The chrome tablet edition... well it did support it but when I tried to reload this class it was showing me a blanc page.

1 solution

Solved!


I was using bootstrap the class table-responsive for nice layout.
When I switched from this one to another it bugged with the same class table-responsive.

Only the chrome browser (tablet edition) did this!

table-responsive
 
Share this answer
 
v2
Comments
Nathan Minier 1-Oct-15 7:31am    
It might be worth reporting:
https://github.com/twbs/bootstrap/issues
Wessel Beulink 1-Oct-15 7:33am    
Thanks for the tip, reported it!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900