I have text boxes that specify with inline CSS that their width should be 200px
<input type="text" name="xxx" value="yyy" style="width: 200px;" />
IE 10 presents them as below (highlighted where text is cut off)
As soon as that textbox receives focus, all the text becomes visible (and then after it has lost focus again, the text remains visible)
Anybody have the same problem and manage to fix this?
I'm 99% sure this has something to do with the "clear button" in ie10.
When a textbox gets focus in ie10 a little "x" appears on the right side that allows you to clear the text.
You can remove the x by adding this to the stylesheet
::-ms-clear {
display: none;
}
Chances are there is something messing with the style of the clear button. I would suggest adding the style I pasted above and see if that fixes your issue.
Here's a fiddle that kinda replicates your issue (with bad css)
http://jsfiddle.net/qDTWw/3/
Here's a fiddle with the fix
http://jsfiddle.net/qDTWw/4/
I am getting the same in a password box in ie10
This workaround seems to work for me ...
$('.password').blur(function () {
//work around for ie10 clipping text
$(this).val($(this).val());
});
*This isn't a true "answer", because I haven't solved it, but am posting here with additional information that won't fit into a comment very well. I have this same problem, and am hoping this helps someone else figure it out.
This jsfiddle is one way to reproduce the problem:
http://jsfiddle.net/tj_vantoll/2NGEQ/2/
Apparently, this was reported to Microsoft:
https://connect.microsoft.com/IE/feedback/details/767602/input-text-boxes-clipped-when-a-font-size-is-applied-to-a-parent-element#details
There is a reference to a reply from someone at Microsoft here:
http://bugs.jqueryui.com/ticket/8677
From Tony Ross (Microsoft):
Unfortunately I don’t think this will make our bar for a patch update since the issue automatically resolves itself when the user interacts with the control, but I’ll definitely make sure it stays on our radar for the next release.
As for code-based workarounds, there are various ways you can poke the input element itself to get it to it to update if you so desire (updating the value, changing the width of the element inline, assigning the width inline to begin with, etc).....
Posting code from jsfiddle because I have to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by tj_vantoll</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
input { width: 150px; }
form.on input { font-size: 1em; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('button').on('click', function(event) {
$('form').addClass('on');
});
});//]]>
</script>
</head>
<body>
<form>
<input type="text" value="Whatever" />
</form>
<button>Break It</button>
</body>
</html
Related
Is it possible to force an element (lets say a div) atop every single other element as well as fullscreen (from video tag/iframe).
At the moment I'm trying with:
position: absolute
z-index: 2147483647
But it doesn't seem to go over fullscreen. (Tested on Chrome - 61.0.3163.100)
Why do I want to do this?
I want to display a kind of Notification I guess over fullscreen, so when they are watching an embed youtube video on the site, I can show them a notification that they normally wont see and might miss when in fullscreen.
It seems this has changed since recent releases of chrome as other SO answers proceed to give the suggestion I tried above and it has worked for them. Seemingly chrome changed something stopping this from working.
Seems to actually be because im trying to do this with a Angular Material component and for some reason something doesnt allow this to occur.
After checking it seems chrome doesn't even change anything to do with z-index in :-webkit-full-screen yes setting z-index on the fullscreen item and/or the div, wont work still.
Minimal, Complete and Verifiable example:
https://jsfiddle.net/ea3rbmo4/
Updated: https://jsfiddle.net/bw2ytwwb/
This one shows you exactly whats wrong, the red div goes in front, but the md-toast fails to.
<html ng-app="app">
<head>
<!-- AngularJS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<style>
md-toast {
z-index: 2147483647!important;
position: absolute!important;
}
</style>
<!-- Angular Controllers -->
<script>
var app = angular.module('app', ['ngMaterial', 'ngAnimate']);
app.controller('body', ['$scope', '$mdToast', function($scope, $mdToast) {
$mdToast.show(
$mdToast.simple()
.textContent("Test123")
.position('top right')
.hideDelay(999999)
);
}]);
</script>
</head>
<body ng-controller="body" layout="column" layout-align="center center" layout-fill style="background:#22282b">
<video controls="" autoplay="" name="media" type="video/mp4" src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
</body>
</html>
I have a webpage that I want to pop-up a description in it. I've used rightJS light box 2.4.0. It works fine but the only problem is that it just shows a portion of my text. I have attached a sample file to check; As you can see it doesn't pop-up the whole text.
Any suggestions?
thanks
this is a sample code:
<!DOCTYPE html>
<html>
<head>
<title>RightJS: Lightbox</title>
<script src="right.js"></script>
<script src="lightbox.js"></script>
</head>
<body>
<div class="lower">
<a href onclick="Lightbox.show($("loremm-block").html()).resize({width:"20em"}); return false;">Link</a>
</div>
<div id="loremm-block" style="display:none;"> a very long text </div>
</body>
If you inspect Lightbox DOM via inspector in Chrome or Firefox you will see that it actually has the whole text inside the Lightbox but rui-lightbox-scroller has
overflow:hidden
CSS rule and it cuts off the text.
Play with width settings of Lightbox or try applying the following CSS rule to this element (rui-lightbox-scroller):
overflow-y:scroll;
The HTML structure is described in Style adjustments section where you can compare the DOM
I want to display a google map in IFrame with scrollbar.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
A website
<br />
<iframe src="http://parkall.hu/teszt/parkolok/index.html"
style="overflow: scroll; width: 540px; height: 630px;"></iframe>
</body>
</html>
It works in the latest firefox (v17), but not in Chrome (v23), strangely enough Chrome displays scrollbars for a moment and hides after that. The scrollbar is still useable if you find out to grab an invisible thing....
Have you ever noticed this? Maybe it can be solved with a CSS but i was unable to find out, the scrolling="yes" attribute is not supported in HTML5. And of course if I change scr to wikipedia.org it displays scroll bar.
There is a decent chance that google maps tries to disable the scrollbar from its iframe with javascript. In that case you will need some javascript of your own to counter that a few seconds after pageload (by using setTimeout()).
What you need to change in your setTimeout depends on what is happening that hides the scrollbars. Since the example is not complete, I can't determine what happens exactly.
Please put your code in jsfiddle.net and reply with the link so we can check the exact problem.
I have a CSS class where I added a background image like this:
.my-class{
background-image: url(images/my-bg.png);
}
this applies fine and works properly in browsers, but when I see it in the iPad, the background image is not visible.
What could be the reason?
Without further information (i.e. how you're applying this class, and to which element), I can't help further. I can tell you however, that this snippet works just fine on desktop, iPhone and iPad:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.my-class{background-image: url(images/my-bg.png);}
</style>
</head>
<body class="my-class">
<p>Some content</p>
</body>
</html>
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I had this issue and finally after hours of apple bashing and toiling I made a div tag with an ID around my entire site. The iPad loves it :)
Problem solved.
CSS
<style type="text/css">
#bodybackground {
background:#999 url('http://mywebsite.com/images/background.jpg')
}
</style>
HTML
<div id="bodybackground">
entire site here
</div>
Add this meta tag to your page
<meta name = "viewport" content = "width = device-width, height = device-height"/>
I found that I was having the same problem, (ie: no background image shown on iPad specifically), the problem was the use of quotes, or lack thereof, when apostrophes were needed...
Problem (no apostrophes)
.my-class{background-image: url(images/my-bg.png);}
Fix (apostrophes added)
.my-class{background-image: url('images/my-bg.png');}
If you're saving the .png from photoshop, make sure you save it via 'save for web and devices' and select PNG24.
Here's what I've got. I have a tree in GWT set up to process only a certain level depth of children, retrieving from the server and only updating according to which children one clicks. I am familiar with addStyleName() functions and I have used this to style the foreground color of certain tree nodes, and it has appeared successfully on previous versions of my project (without the server calls).
The question boils down to if any of you familiar with GWT know any reason why my custom CSS would be overridden on a child update of a node. So for example, when the server processes a node, it shows up in my proper CSS color, but once the server shows that it has children, it does the addItem() to that node and the CSS of the text color of the parent is reverted back to default.
This is all under the assumption that I have no removeStyleName() calls or any deleting/recreating going on. Anyone familiar with a situation like this?
Thanks!
EDIT: Here's some code I've narrowed it down to
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
<p>blaghblagh</p>
<div class="Foreground1">
hey
<table style="white-space: nowrap;">
<tbody>
<td style="vertical-align: middle;">
<div style="display: inline;">
ContinuingPromise '08
</div>
</td>
</tbody>
</table>
CSS:
body{
color: black;
}
.Foreground1{
color: green;
}
If you put this code up, you'll see the ContinuingPromise as black, although it is within the foreground div which should be green. Also, the word 'hey' will appear green. Am I missing something basic? Thanks again
I'm not sure if this solved your original question, but the color problem is very likely caused by the doctype you're using. If the html page uses quirks mode, the style properties are not correctly inherited by the table. See http://reference.sitepoint.com/css/inheritance. Setting a doctype or different doctype might solve your problem. If you are using any of the GWT layout panels you need to set the doctype to <!DOCTYPE html>, see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Standards