I'm trying to implement a Google Sign-in button with AngularJS, and while it works properly on desktop browser, on mobile (or even in "Device Mode") in Chrome's developers tools, it "breaks the display".
I noticed that the problem is with the fact that google's code pushes an iframe with "left: -9999px;", making the page scroll too far to the right.
<iframe style="position: absolute; width: 1px; height: 1px; left: -9999px;" id="ssIFrame_google" sandbox="allow-scripts allow-same-origin" src="https://accounts.google.com/o/oauth2/iframe#origin=http%3A%2F%2Flocalhost%3A8080&rpcToken=463269927.04673344&clearCache=1"></iframe>
I added the following just for debugging purposes, and it resolved the problem, but I doubt this should be the solution.
setTimeout(function(){
document.getElementsByTagName("IFRAME")[0].style.left=0;
}, 2000);
Any ideas, please?
Can you add a style into your css that has
iframe { left: 0 !important }
Related
I have a simple form that is inside Angular UI Bootstrap's tabs. Form controls have tooltips associated with them to show errors. I'm using custom event that will toggle tooltip visibility.
The idea is to have tooltip visible on required fields.
With UI-Bootstrap version 1.3.2 and Angular 1.4.8 everything is working fine but since I upgraded to Angular 1.5.3 tooltip is not showing anymore. It will show once I actually type something in the text field and delete it which makes me believe that now requires the model to be initialized.
I have here two plunks that will show exactly what is going on:
Working plunk (with angular 1.4.8) - https://plnkr.co/edit/IkuOdCrcFJ8lBeNA5sSh
<data-uib-tabset>
<data-uib-tab>
<data-uib-tab-heading>Tab 1</data-uib-tab-heading>
<form name="testform">
<input type="text" name="test" id="test"
data-ng-model="test"
data-ng-required="1"
data-tooltip-append-to-body="true"
data-tooltip-placement="right"
data-uib-tooltip="Required!"
data-tooltip-trigger="none"
data-tooltip-is-open="testform.test.$error.required" />
</form>
</data-uib-tab>
<data-uib-tab>
<data-uib-tab-heading>Tab 2</data-uib-tab-heading>
Content 2
</data-uib-tab>
</data-uib-tabset>
Not so working plunk (with angular 1.5.3) - https://plnkr.co/edit/Wl3Bq13FKPnqW7RqwfiJ
I noticed as mentioned in the comments that there is a class being attached - uib-position-measure. It has 3 styles that are causing the issue:
top: -9999px !important
left: -9999px !important
visibility: hidden !important
EDIT - I'm reorganizing my post now that I've dug pretty deep into this. Still don't think I have a great solution, but at least have some info and options.
Solution 1
Simply remove the culprit class uib-position-measure with javascript and then adjust the top and left styles on .tooltip.
Plunker
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.className = tooltip.className.replace(/\buib-position-measure\b/,'');
}
.tooltip {
top: 42px;
left: 150px;
}
Solution 2
Overwrite the styling that is causing the issue with javascript.
Plunker
<script type="text/javascript">
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.setAttribute("style", "visibility: visible !important; top: 42px !important; left: 150px !important;");
}
</script>
Solution 3
I was able to find where the .uib-position-measure class is created in the ui-bootstrap.js file. I removed !important from the visibility, top and left. After that I was able to fix the issue using css on the .tooltip class.
Plunker
ui-bootstrap.js is the file I created, copied the original over, and modified the uib-position-measure class - it is at the bottom on line 7327.
In style.css I simply added the below:
.tooltip {
visibility: visible;
top: 42px;
left: 150px;
}
Related Issue
I was also able to find an issue on GitHub related to this - https://github.com/angular-ui/bootstrap/pull/5530
Someone removed some inline styles and added them as a class, so that they could be overwritten by CSS instead of using javascript. This may be the best way to handle it - https://github.com/angular-ui/bootstrap/pull/5530/commits/44643775dece535b3ffa62d7edae86eaa12ac154. The problem is finding the location of the uib-position-measure inline styling and handling it the same way.
Using popover-popup-delay repositions the element and the class uib-position-measure is no longer active 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'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 using lightbox2 but it hides my page scrollbar while opening, after closing scrollbar it stays hide.
I have checked css, if there is some issue with my blog, please let me know.
I have tried all browsers but same is happening on all browsers.
Link to my page which have problem , you may check this...2
Please help me out..
change your css..
whenever you are clicking on the image class named CSS_LIGHTBOX_FIXED_FRAME has been added to html tag and that class has the following css
html.CSS_LIGHTBOX_FIXED_FRAME {
height: 100%;
margin: 0;
overflow: hidden !important;
width: 100%;
}
remove the overflow:hidden part from above and you will have your scrollbar back
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.