Is there some way to provide different image sizes for the carousel for different screen sizes ? I understand the CSS media query can get this information to provide different CSS settings for different devices/screens, but I don't see anyway to pass this information into the carousel. For a full-screen carousel this seems to mean it only works properly on devices matching the image size.
You could make the images take up a certain percentage of the screen by scaling them.
ons-carousel-item {
text-align: center;
}
ons-carousel-item img {
width: 95%;
}
And the carousel:
<ons-carousel overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item>
<img src="http://placehold.it/350x150">
</ons-carousel-item>
<ons-carousel-item>
<img src="http://placehold.it/700x100">
</ons-carousel-item>
</ons-carousel>
Related
I'm building a Rails app with Bootstrap 4. I have a number of large tables to display and since the app users are not very tech-savvy I would like to display a hint when a full table doesn't fit their screen and becomes scrollable. Any tips on how to achieve this?
You can add a alert with class="something".
<div class="alert alert-primary something" role="alert">
The table is scrollable!!!
</div>
Then, In the CSS file you can do:
.something{
display: none;
}
Then also write a media query to update the something class to display block.
#media (min-width: 576px) {
.something{
display: block;
}
}
Result: It'll not display the alert until the window size reduced to 576px.
I´m trying to do the following on a website. I guess it´s quite simple for thoose who have programmed alot but for me it´s new. Can someone show me how to code this? Thanks!
Layout on computer screen and mobile screen
You need to use media queries to make your HTML and CSS code produce different results in user's browser on different devices.
Media queries usually based on max-width of the browser viewport.
So, if browser viewport will be less than 800px wide, additional styles will be applied.
.box
{
display: inline-block;
margin: 0 10px;
width: 180px;
height: 180px;
border: 1px solid #CCC;
background: #DDD;
}
#media screen and (max-width: 800px)
{
display: block;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
For iPads & iPhones
If you need to have different layouts on iPads and iPhones, you need to take proper media queries from this article: http://stephen.io/mediaqueries/.
You have to write specific CSS rules for each device you'd like to support in particular.
Layout examples:
Desktop layout
Tablet layout
Phone layout
(Pictures are from w3schools.com)
About media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
How would i come across the effect from this website http://www.theqcamera.com or http://plugandplaydesign.co.uk (the video + image at top) so that the image fills the screen on any screen size. Im not sure if this is responsive height but really would like to know how to do it.
There are a few ways to do this. The easiest is to use vh (vertical height) in your CSS. A setting of 100vh will make your div be 100% of the height of the screen being used to view the page. Combine this with a background image that is set to "cover" and a 100% width on the domain and you should be good to go.
<body>
<div class="container">
<div class="div_1">
content
</div>
<div class="div_2">
other content
</div>
</div>
</body>
.div_1 {
width: 100%;
height: 100vh;
}
.div_2 {
width: 100%;
height: auto;
}
Please note: vh is not supported in IE8. If you need to support IE8 for your project, going with position:absolute; height:100%; width:100%; margin: 0; is a slightly more complicated, but more backwards compatible answer.
try using height 100% , position absolute , margin 0 auto
this is how I've made my picture 100% on my website (http://www.dotto.be)
I'm using Ionic Framework to develop a mobile application for Android.
My issue is that I need to have a list of containers at random positions and are able to be clicked.
The list of containers are displayed correctly at the random positions but the click areas only work when i click at the top of the view, not at the position itself.
The clicking works fine in the mobile browsers at the correct position but when I run the app as a native application in Android, the clicks messed up.
It seems like clicking areas are lined up at the top of the view, does anyone know what is causing this?
The codes are here:
HTML file
<div class="col" ng-model="qtablelayout">
<div qtable ng-model='qtable' ng-repeat='qtable in qtablelayout.qtables' class="tablediv" ng-class="qtable.tstatus" ng-style="{'left': {{qtable.x}}+'px', 'top':{{qtable.y}}+'px'}" ng-click="tblActions(qtable)">
<h2>{{qtable.tableNo}}</h2>
<ul>
<li class="tablesize">{{qtable.currentHP.qsize}}/{{qtable.maxSize}}</li>
<li class="tabletime">{{qtable.tabletime.hours}}h {{qtable.tabletime.mins}}m {{qtable.tabletime.secs}}s</li>
</ul>
</div>
</div>
CSS file
div.tablediv
{
position: absolute;
background: url("../img/table/tablestatus.png") no-repeat;
color: #fff !important;
width: 178px;
height: 178px;
padding: 0;
margin: 0;
text-align: center;
display: block;
overflow: hidden;
}
The Controller side
$scope.tblActions = function(m)
{
alert("x:" + m.x + ",y:" + m.y);
}
I found out the cause of the problem is that I had an Ion-Refresher before the list of containers and it seemed to have shifted up the clicking areas together with the space for the Ion-Refresher.
It worked when I put the Ion-Refresher at the bottom of the HTML.
I am trying to create a header with a image which responds to screen size like one: http://appex.no/referanser
Any ideas on how they did it?
<div id="banner" style="width:auto;overflow:hidden;">
<img src="..." style="width:100%;" />
</div>
should work; then the div stays auto for responsive layouts and the img takes the size of the parent div
they removed the image with something like:
#media handheld, only screen and (max-width: 400px){
div#banner { display:none;
}
(just used inline for sake of the demonstration but can be class of course)