I am building a mobile application using Ionic and angularjs and Highcharts. In most of the pages there are sliders to display data. Every slide has two vertical divs containing highchart.
Now the requirement of the app is that when it is open in mobile device(Iphone 4 & 5) it should display one div per slide and when open on tablet(Ipad) it should display two vertical divs per slide containing highchart.
I have 10 charts to show. in Iphone/mobile there will be 10 slides(1 chart per slide). and in Tablet/Ipad will have 5 slides(2 chart per slide).
All the Highchart data is dynamic.
I am posting html code. As for angularJs I am not sure What approach I should take? I have posted image links of screenshots of the desired layouts for both the devices.
screenshot for Ipad/tablets
screenshot for Iphone/Mobile device
Html
<ion-view>
<div ng-controller="chartHomePage">
<ion-content>
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)" >
<ion-slide>
<div class="card chart-box">
<div class="item item-divider">
Chart 1
</div>
<div class="item item-text-wrap">
<div ng-controller="ChartController1">
<highchart id="" config="chart1"></highchart>
</div>
</div>
</div>
<div class="card chart-box">
<div class="item item-divider">
Chart 2
</div>
<div class="item item-text-wrap">
<div ng-controller="ChartController2">
<highchart id="" config="chart2"></highchart>
</div>
</div>
</div>
<iom-slide>
</ion-slide-box>
</ion-content>
</div><!--end controller div-->
</ion-view>
Thanks
I'd think something along the lines of modifying the platform css would do the trick. Try calculating the needed vh and update the .platform-ipad .chart-box class in the css
Related
I have code like
<div class="row">
<div class="col-sm-12 visible-print">
Stuff (print in full width)
</div>
<div class="col-sm-6 hidden-print">
Stuff (same as above but only half width for screen)
</div>
<div class="col-sm-6 hidden-print">
Other stuff (I don't want to print)
</div>
</div>
What I am looking for is a function that returns true if visible-print and false if hidden-print so I can write. The code in the example is to be considered as Pseudocode
<div class="row">
<div class="{{inPrintMode() ? 'col-sm-12' : 'col-sm-6'}}">
Stuff (full width for paper, half for screen)
</div>
<div class="col-sm-6 hidden-print">
Other stuff (i don't want to print)
</div>
</div>
Does this kind of function exist?
I use bootstrap and Angular
Clarification:
I what to style the page in one way for screen/monitor/display and another way when the page is printed on paper. I use class="visible-print" for elements that only should appear on paper, and class="hidden-print" for elements that only should appear on the screen. Elements without these tags appear on both paper and screen.
What I am looking for how to write a function, I have called 'inPrintMode()' in this example, that detects if the user is viewing the page om a screen or if it is being rendered to be printed and returns a boolean.
visible-print and hidden-print is talked about here:
Hide a div in a page and make it visible only on print bootstrap 3 MVC 5
Thanks in advance for any help.
[ngClass] is suitable in your case
<div class="row">
<div [ngClass]="inPrintMode() == true ? 'col-sm-12' : 'col-sm-6'">
Stuff (full width for paper, half for screen)
</div>
<div [ngClass]="col-sm-6 hidden-print">
Other stuff (i don't want to print)
</div>
</div>
Sure there's [ngClass] and you can use it like this:
<div class="row">
<div [ngClass]="inPrintMode() ? 'class-a' : 'class-b'">
Stuff (full width for paper, half for screen)
</div>
<div class="col-sm-6 hidden-print">
Other stuff (i don't want to print)
</div>
</div>
Here's a Working Sample StackBlitz for your ref.
<div class="row">
<div class="col-lg-7">
<div>block1 with IDs and classes</div>
<div>block2 with IDs and classes</div>
</div>
<div class="col-lg-5">
<div>block3 with IDs and classes</div>
</div>
</div>
How to make it look like
block1
block3
block2
for mobile?
P.S. Of course I took a look at this questions before I asked mine:
SO: How do I change Bootstrap 3 column order on mobile layout?
It doesn't help.
Also, adding hidden-xs and visible-xs for two blocks of
<div>block2 with IDs and classes</div>
in different places doesn't help as IDs should be unique on the page.
Any suggestions? Thank you.
Example:
IMPORTANT: block 3 may be (and it is) taller (the height is bigger) than block1.
No need to use push/pull. Just think "mobile-first"..
<div class="row">
<div class="col-lg-7">
<div>block1</div>
</div>
<div class="col-lg-5">
<div>block3</div>
</div>
<div class="col-lg-7">
<div>block2</div>
</div>
</div>
http://www.codeply.com/go/jgvSJrMOnk
In the case where block 3 is taller than the other columns, create a special class to float it to the right on large screens..
#media (min-width:1200px) {
.pull-lg-right {
float:right;
}
}
Related:How do I change Bootstrap 3 div column order
Bootstrap with different order on mobile version (Bootstrap 4)
using push and pull properties of grid will do your work try this the push and pull will be only applied for small device
<div class="row">
<div class="col-lg-3">block1 with IDs and classes</div>
<div class="col-lg-3 col-sm-push-12">block2 with IDs and classes</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-lg-6 col-sm-pull-12">block3 with IDs and classes</div>
</div>
Edit clearfix added for large device
On a small screen, div1 and div2 are showing side by side overlapped, and I want div1 content shows first and div2 content to be shown just underneath div1. How do I achieve these requirements with or without media queries?
<div class="row">
<div class="col-xs-6" id="div1">
test column1
</div>
<div class="col-xs-6" id="div2">
test column 2
</div>
</div>
Update your elements' classes to this:
<div class="row">
<div class="col-xs-12 col-sm-6" id="div1">
test column1
</div>
<div class="col-xs-12 col-sm-6" id="div2">
test column 2
</div>
</div>
This way, at viewports >= 768px, they'll be side-by-side and at 767px & below they'll display one below the other.
As mentioned in a comment on the OP, please refer to the documentation, which covers this in greater detail: http://getbootstrap.com/css/#grid
I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.
I am using div to layout a page. The page has two columns. The first column is a map. The second column contains three rows of graphs. I used the code below. The result gives me just one column (instead of two) with four rows. What am I doing wrong?
<!-- This is where the map will live -->
<div id="map-container" style="width:1000px; height:500px"></div>
<!-- CHARTS!!! -->
<div class="row">
<!-- row chart -->
<div class="col-md-1">
<div id="rowchart2" class="dc-chart"></div>
<center><div class="title">Severity</div></center>
</div>
<!-- Histogram-->
<div class="col-md-2 col-md-offset-1">
<div id="rowchart" class="dc-chart"></div>
<center><div class="title">Histogram(Delta Speed)</div></center>
</div>
<!-- row chart -->
<div class="col-md-4 col-md-offset-0">
<div id="rowchart3" class="dc-chart"></div>
<center><div class="title">Direction</div></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
Column 1:
<div id="map-container" class="col-md-12" style="width:100%; height:500px"></div>
</div>
<div class="col-md-6">
OTHER DATA HERE
</div>
</div>
</div>
Assuming you're using Bootstrap here, you need to layout your two columns within a single row so that they will sit side by side. For example, if you want to have two columns that are equal widths, you could use:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div>Chart 1</div>
<div>Chart 2</div>
<div>Chart 3</div>
</div>
</div>
There are always 12 columns in a row, so using "col-md-6" for each column results in two equally sized columns.
Within the second column, you could nest more rows and columns to give you more control:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div class="row">
<div class="col-md-12">Big Chart 1</div>
</div>
<div class="row">
<div class="col-md-6">Small Chart 2</div>
<div class="col-md-6">Small Chart 3</div>
</div>
</div>
</div>
For an example layout, here's a JSFiddle: http://jsfiddle.net/q3vdex96/2/
In your example, you're setting the map to have a width of 1000px. You shouldn't set an explicit width in this way - let Bootstrap handle the sizing using its grid system. Bootstrap's responsive CSS means your charts and map will collapse into a single column on a small screen, and will automatically expand into the correct layout as the screen size increases.
You aren't showing your CSS so part of what I say is just a wild guess.
First, the center element is obsolete. Don't use that.
Second, div elements are block level and will extend the entire width of the page by default. This is why you only get one column but, as I said, without a link or a jsfiddle with the complete markup, it's all a guess.