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.
Related
I have a modal window that shows a few data that also has Images which open in Blueimp gallery. The problem I have is, when the image is opened in BlueImp gallery, the image is not vertically aligned in the middle of the screen. Its either to the bottom or to the top and it depends on where I have scrolled in the modal window. I need to go to the middle of the modal window and open the gallery in which case the Lightbox looks centered. This issue doesnt happen when blueimp is used directly in the page without a modal. It appears the blueimp gallery's lightbox is centered to the whole modal height instead of the viewport height. How can I override that for blueimp inside modal windows only? Is there a css fix or js fix to override this when blueimp is used in boostrap modals?
Here is a sample of my set-up:
<div uib-modal-window="modal-window" class="modal fade" role="dialog" size="xl" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-xl">
<div class="modal-content" uib-modal-transclude="">
<div class="lightBoxGallery">
<a ng-repeat="image in vm.ngModel" ng-href="{{::vm.imageurl(image.name)}}" data-gallery="">
<img ng-src="{{::vm.getImage(image.name)}}" class="img-responsive img-thumbnail animated fadeIn">
</a>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol> </div>
</div>
</div>
</div>
</div>
My set-up: Angular 1.5 + Bootstrap 3 + Bootstrap UI + BlueImp Gallery
UPDATE:
The problem I am having here is, my Bootstrap Modal window has overflow-y as scrollable and it has a fixed positioning:
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
And when the blueimp-gallery is opened, as a child div with fixed position, it is positioning the Div to the center of the parent's fixed position instead of center of the viewport:
.blueimp-gallery {
position: fixed;
z-index: 999999;
overflow: hidden;
background: #000;
background: rgba(0,0,0,.9);
opacity: 0;
display: none;
direction: ltr;
-ms-touch-action: none;
touch-action: none;
}
The blueimp-gallery is aligning to the middle, but I dont want it aligning to the middle of parent (modal) div. I want it aligned to the middle of viewport. For example, in my laptop, my modal has a height of 2000px where as my viewport height is a lot less like 860px. That is why the gallery lightbox is opening either to the top or bottom of the viewport unless the user is right in the middle of the modal window. If I place the blueimp-gallery directly in the body without the modal window, I dont have this issue. But in this use case, I have to place the blueimp-gallery inside a Modal window that has variable height depending on the dynamic content loaded in it.
I am still stuck on this, does anyone have a suggestion to this problem please?
The only way I was able to resolve this issue was to pull the "#blueimp-gallery" element out of the Modal Window and then insert it again as a direct child of the body element. Using Jquery, I added this code that fixed the issue:
$(document).ready(function(){
$("#blueimp-gallery").prependTo($("body"));
});
Now, after the above code, the BlueImp Gallery's fixed position is relative to the body element and therefore the height is that of the viewport. The Modal height no longer affects the BlueImp Gallery's height since it is now placed as a direct child of body element.
You should try to put the blueimp in a div with the class row and then another div with the class col-md-6 not 100% sure but it should be alligned in the middle then.
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="blueimp-gallery" class="blueimp-gallery vcenter ">
...
</div>
</div>
</div>
Edit tried it it has to have container tag above it to.
most likely this is not the sollution to getting it to the center vertically but this is worth a try i guess
ADDITION
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
create a costum tag add it in a css file and call on it.
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/
I have a simple div which has a transition. It transitions from a yellow background to a red one.
<div class="foo" ng-class="{'foo-visible': vm.visible}">
The transition is played once the foo--visible class is added to the div.
This works fine in Chrome, IE...etc.
However once I add a wrapper div around it, the transition stops working in Internet Explorer (tested with IE10).
<div class="foo--wrapper" ng-if="vm.visible">
<div class="foo" ng-class="{'foo--visible': vm.visible}">
</div>
I need to include ngAnimate in this case. Then it works in Chrome, but in IE I immediately get the red div, the transition is never played. No transitionstart (IE only) or transitionend events are fired.
Here's a plunker illustrating the issue:
http://plnkr.co/vpJzudnLxTwoJGZoZaNd
Does anybody have an idea what is causing this?
This plnkr adds two similar boxes to yours. http://plnkr.co/edit/lkyWHu?p=preview
<div ng-if="vm.visible">
<div class="animate-box animate-if">
<h2>Inner Class</h2>
</div>
</div>
<div class="animate-box animate-if" ng-if="vm.visible">
<div>
<h2>Outer Class</h2>
</div>
</div>
The "Outer" works in both IE and Chrome.
Chrome iterates the child animation for "Inner" in a way that makes sense. Internet Explorer, as for your example, does not.
On closing, neither do the child animation because the delay to remove the parent is zero.
An interesting point though, IE and Chrome appear to work the same for the authoritative answer at https://docs.angularjs.org/api/ngAnimate/directive/ngAnimateChildren
The CSS I used was:
.animate-box {
height: 100px;
width: 100px;
background-color: red;
}
.animate-if.ng-animate {
transition: all 3s linear;
}
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
background-color: yellow;
opacity: 0;
}
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
background-color: red;
opacity: 1;
}
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)
We have a solution utilizing JavaScript, but I'm also curious if there is a way to do this with pure CSS?
The Situation
I'm relatively new to responsive design, and in the past have stuck with positioning, etc to achieve my layouts. I'm attempting to create a simple responsive header that resizes in a specific way.
My Dilemma
The header is a 29px high bar at the top of the page, with 29x29 buttons at either end. In the middle, bordering the button on the right, is a div (for page titles) that I want to have a min width of 300, but I also want it to expand with the browser width.
Here is the catch: I want this title div to pull away from the left button, leaving a gap of a max-width of 200px. Once the max-width of the gap is reached, I would like the title div to start expanding, staying pressed up against the right button. See as follows.
note: I've created a jsfiddle here for experimenting
I've modified your JSFiddle and added a bit of JavaScript to get the effect I think you're looking for. There are also comments to walk you through exactly what the JS code is trying to accomplish.
Essentially, I'm binding a handler to the window.resize event, calculating the available space in the header, and adding or subtracting from the title container to maintain its width.
Okay well here is what I have so far. WILL EDIT in the morning (kind of tired)
I feel this is definitely possible but it does require javascript. The fact that you want there to be a 200px space available requires javascript or some sort of programming to tell the styling to do that.
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<div id="container">
<header>
<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
</header>
</div>
</body>
<script>
if (parseInt(document.getElementById("div2").clientWidth) >= 200) {
document.getElementById("div2").style.width = "200px";
}
</script>
</html>
So the way I went about it is rather than having 3 divs, I made 4 -- the original 3 you had, but then the white space you want to consider as, well open space, I made a div for that as well. I also have javascript so that when the window scales past a width of 200px, it will lock it at that width. Unfortunately, I'm not super polished with my CSS yet so I'm still trying to figure a way to get that working. If anyone wants to edit my answer, please feel free.
Another thing to point out is that while the javascript does working for if the nav is growing, it doesn't for shrinking. I didn't implement a way for it to be able to shrink if say the user decided to shrink his window size because I have it set to lock the width at 200px (I guess a way to work around that would be with an } else { clientWidth = "100%"? Not sure. Hope this gets you on the right track though.