0

I have a dashboard page that is dynamically built using the Dev Express Dev Extreme dx.charts.js library. I've implemented Bootstrap 3 into the site and everything works great... until I try to view on an iPad. I've spent countless hours making changes to my layout and nothing appears to help. Here's the current code:

<div style="display:none;" id="maindashboard">
    <div class="container" >
        <div class="row" >
            <div class="col-lg-6 col-md-6 col-sm-6" > <%-- left half column --%>
                <h1><strong>Container Levels</strong></h1>
                <div class="col-lg-6 col-md-6 col-sm-6" id="GuageColumn1"></div>
                <div class="col-lg-6 col-md-6 col-sm-6" id="GuageColumn2"></div>
            </div>
            <div id="PieCharts" class="col-lg-6 col-md-6 col-sm-6" > <%-- right half column --%>
                <div class="col-lg-6 col-md-6 col-sm-6" id="pie0" style="height:250px;" ></div>
                <div class="col-lg-6 col-md-6 col-sm-6" id="pie1" style="height:250px;" ></div>
                <div class="col-lg-6 col-md-6 col-sm-6" id="pie2" style="height:250px;" ></div>
                <div class="col-lg-6 col-md-6 col-sm-6" id="pie3" style="height:250px;" ></div>
            </div>
            <%--<div id="PieCharts" class="col-md-8 col-sm-6" >
            </div>--%>
        </div>
    </div>
</div>

When I view the dashboard on a PC using IE, ChromE, Safari or Firefox, it displays as expected, displaying the pie chart legend. However, when I attempt to view the page on an iPad using either Safari or Chrome, the legend doesn't display. I've examined the page source from both the PC and from the iPad and the only difference in the iPad version is there are a bunch of webkit attributes that have been added to the markup for the legend chart. All the data for the chart is in the markup. Through a lot of testing, I've noticed that if I add a bootstrap column width to the "pie0" object, it doesn't display on the iPad. However, if I remove the column width attribute, the layout looks horrible. I don't know what I'm missing here.

Thanks in advance for any help...

Craig831
  • 76
  • 1
  • 8
  • I've narrowed it down to the bootstrap column width style. When pie0 (the legend) has the property col-sm-6, it doesn't display on an iPad. If I remove that property, though, it does display. Any ideas why? And yes, I'm still trying to debug this myself. – Craig831 Oct 14 '14 at 23:20
  • 1
    Your maindashboard div has display:none style, Pie chart can not be drawn in invisible containers. Here are jsfiddles: http://jsfiddle.net/5xvr1ymr/ - without display:none all works fine; http://jsfiddle.net/5xvr1ymr/2/ - your original code, pie is not rendered. Also it looks strange that pie0, pie2.. divs in your cell also have column styles. – Pavel Gruba Oct 16 '14 at 06:34
  • Changing or removing the "display: none" was one of the first things I tried and I tried it again after reading your message. Thank you for the suggestion but that didn't fix it. Apparently what is happening is that when I use a "col-sm-n" attribute on the pie0 div, something happens behind the scenes with Dev Express that hides the legend. When I use the attribute, the div is hidden and when I don't use the attribute, the div displays. I am also working with Dev Express on this. – Craig831 Oct 20 '14 at 15:48
  • I managed to replicate the issue in a couple jsfiddles. JSFiddle with col-sm-6 attribute (legend does not display): http://jsfiddle.net/or9x5jyy/10/ JSFiddle without col-sm-6 attribute (legend does display): http://jsfiddle.net/or9x5jyy/8/ – Craig831 Oct 20 '14 at 16:10
  • OK, div just has too small width to display whole pie (with legend). It is all about Adaptive layout http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/adaptiveLayout/?version=14_1 – Pavel Gruba Oct 21 '14 at 06:24
  • Thank you, Pavel. The only part that confuses me is that this issue ONLY happens on the iPad. Any idea why that would be? – Craig831 Oct 21 '14 at 20:20
  • I think the result width of div is smaller on iPad – Pavel Gruba Oct 22 '14 at 06:29

0 Answers0