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...
Related
I have two columns, left column is main feed and right column is sidebar.
I want to scroll each columns separately.
In this case left pain scroll works well.
However right pain scroll doesn't works.
Contents in right panel are dynamically generated by javascript,
so it's sometimes getting longer than screen.
<div class="container" style="padding-top: 60px;" >
<div class="row">
<div class="col-6 col-md-6 col-sm-6 col-xs-6">
Main Feed
</div>
<div class="col-6 col-md-6 col-sm-6 col-xs-6"
style="overflow-y: auto;display: block;position:fixed;right:10px;">
sidebar content this contents is generated dynamically by javascript
</div>
</div>
</div>
<div class="col-6 col-md-6 col-sm-6 col-xs-6"
style="overflow-y: auto;
display: block;
max-height:100vh;
right:10px;
position: fixed;">
</div>
Check https://codepen.io/ashishkrtewari/pen/BaaJXWy
I just added some generated content and max-height of 100vh. Without a max height you will not see the scrollbar as there is nothing restricting the height to reveal a scrollbar.
Please check
I use bootstrap 3.3.7 for its grid and responsiveness in my web app (Flask App). It works pretty well with all the plotly subplots I created except for a single plot. When the browser is in full-page or if I resize a little bit, I don't have any problem :
However, if I resize too much the plot exceeds the section height and generates a white space.
I have tried to add a margin-right, a padding-right, to change the class of the div col-lg-6 col-md-6 col-sm-6 into col-lg-6 col-md-6 col-sm-6 col-xs-6 (the chart become very very small), to change the margin inside the javascript code that produces the plot...
And as you can see the subplots in the below the GREEKS title are well displayed whatever the resize applied...
Here is the html code for this section :
<section id="payoff" class="background-img">
<!-- Table code here -->
<div class="container-fluid" id="results">
<div class="row" style="padding-top: 0px; padding-bottom: 30px;">
<div class="col-lg-6 col-md-6 col-sm-6" style="padding-top:40px;">
<div class="plotly-graph-div" id="plot-payoff"></div>
</div>
</div>
</div>
</section>
Any help would be really appreciated! Thanks a lot
I have a chart bar below:
And I wrapped it in a bootstrap columns: col-lg-6 col-md-6 col-sm-6
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-database"></i> Web API Requests
</div>
<div class="panel-body">
<canvas id="barRequests" legend="false" class="chart chart-bar" data="requestsData" labels="requestsLabels" options="requestsOptions"></canvas>
</div>
</div>
</div>
</div>
The issue is on resizing the browser, the graph most of the times comes as below:
What have I done wrong?
I found the answer myself, wanted to update the post for others just in case if someone having the same issue.
Apparently that was an issue that is resolved with the latest version regarding auto scaling the charts. I updated to https://github.com/chartjs/Chart.js/releases/tag/v2.4.0 and everything works fine.
In bootstrap nav we can show the menu in collapsing format.
Similary I want to show div in the collasing format. e.g if it is is mobile view then only show the top div and hide all the div in collapse mode . I am aware of the below supports in bootstrap responsive
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
If it is not supported please all share the idea how it can be implemented.
nirajkumar, have a look at this Fiddle.
You can use the .hidden-xsBootstrap class to do what you want here.
Using version 3.3.4.
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-1 col-lg-3 col-lg-offset-1 text-center block2 hidden-xs">
Div #1
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2 col-lg-3 col-lg-offset-4 text-center block2">
Div #2
</div>
This is listed in the official Bootstrap docs. Here's the link:
http://getbootstrap.com/css/#responsive-utilities-classes
I've only just started learning so please stick with me and I'll try provide as much info as I can.
Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.
I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.
Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
Above is my html, the second content area has the large amount of copy
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
Thanks for any help / advice
You can try using CSS negative margins (no jQuery needed)..
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
http://bootply.com/92230
EDIT - another option
Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437
Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more.
Just add this class on your current row like this:
<div class="row row-eq-height">
your columns
</div>
Warning: You have to add a new div.row.row-eq-height each 12 columns
You can use this plugin. It works pretty good.