I have a JQuery UI dialog. In IE it works ok but in chrome it doesn't. When I close the dialog using the X button it is like the dialog is still in front of my form: it is impossible to click on the buttons placed where the dialog were displayed.
It is happening to me in all my JQuery UI dialogs, no mather if I handle the close event and remove or destroy the div.
Its like each time I close a dialog, a transparent div remains in the page like this:
<div class="ui-effects-wrapper" style="font-size: 100%; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 306px; float: none; position: absolute; z-index: 1000; top: 188px; left: 479px; bottom: auto; right: auto; height: 156px; overflow-x: hidden; overflow-y: hidden; background-position: initial initial; background-repeat: initial initial; "></div>
Do you know what could be causing this? Thanks!
EDIT
I found that in IE the div that remains after dialog is closed, has different style attributes that the one left on Chrome:
<div class="ui-effects-wrapper" style="z-index: 1000; border-bottom: medium none; position: absolute; border-left: medium none; padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 307px; bottom: auto; padding-right: 0px; background: none transparent scroll repeat 0% 0%; float: none; height: 158px; font-size: 100%; overflow: hidden; border-top: medium none; top: 87px; right: auto; border-right: medium none; padding-top: 0px; left: 477px;" sizset="0" sizcache0641017125275892="0"/>
In IE it has:
background: none transparent scroll repeat 0% 0%;
while in chrome it has different attributes:
background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent;
For a moment I almost said "forget chrome, this app is IE only". Fortunately now I can say hell no to that sick nonsense.
The solution was to comment the show: "blind" option. Hope this helps someone:
$("#divAlmostWentCrazy")
.dialog({
autoOpen: false,
//show: "blind",
hide: "explode",
modal: true,
title: "Title"
});
Related
I want to know how to customize the arrows of a spin box.
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: inner-spin-button !important;
opacity: 1 !important;
}
<input type="number" />
This is what I want to get.
Where should I start??
(Do I have to use jQuery widget or javascript to customize it?)
Screenshot (Chrome, macOS):
Code:
input[type="number"] {
height: 32px;
border-radius: 4px;
border: 1px solid #d8d8d8;
position: relative;
text-align: center;
font-size: 20px;
width: 80px;
outline: none;
background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2050%2067%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%222%22%3E%3Cline%20x1%3D%221%22%20x2%3D%2250%22%20y1%3D%2233.5%22%20y2%3D%2233.5%22%20stroke%3D%22%23D8D8D8%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2020)%20rotate(45)%20translate(-25%20-20)%22%20points%3D%2219%2026%2019%2014%2032%2014%22%20stroke%3D%22%23000%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2045)%20rotate(225)%20translate(-25%20-45)%22%20points%3D%2219%2052%2019%2039%2032%2039%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-position: center right;
background-size: contain;
background-repeat: no-repeat;
caret-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
opacity: 1 !important;
background: transparent !important;
border-width: 0px;
margin: 0;
border-left: 1px solid #d8d8d8;
height: 34px;
width: 23px;
cursor: pointer;
}
<input type="number" value="1" />
So, it can be done. But customizations like this are usually very brittle (even if you add in the necessary cross-browser properties, which I haven't done; this only works in webkit), and can hurt usability. You're probably better off using the platform's native controls.
My answer try of fix your problem with css pure, for example with input[type=number] {} you can put all of rules to change the look of the input
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: inner-spin-button !important;
opacity: 1 !important;
width: 50px;
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: blue !important;
border: 2.5px solid red !important;
}
input[type=number] {
position: relative;
padding: 5px;
width: 50px;
padding-right: 25px;
height: 30px;
text-align: center;
font-family: sans-serif;
font-size: 2rem;
border: 1px solid #9c9c9c !important;
border-radius: 0.2em;
}
<input type="number" />
I drew a shape by using the border properties in CSS. It looks fine in Chrome, but in Firefox the borders are really ugly:
.shape
{
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #3F7296;
position: relative;
color: #FFF;
line-height: 50px;
font-size: 40px;
}
.b1, .b2
{
position: absolute;
left: 100px;
bottom: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 50px 16px;
border-color: transparent transparent transparent #3F7296;
}
.b2
{
left: -16px;
border-width: 50px 16px 0px 0px;
border-color: transparent #3F7296 transparent transparent;
}
<div class="shape">
<i class="b1"></i>
<i class="b2"></i>
</div>
Fiddle: http://jsfiddle.net/Ly1dz111/
Screenshot from Chrome:
Screenshot from Firefox (Mac OS X)
How can I fix this in Firefox?
This is a known bug in Firefox's handling of diagonal borders, and the workaround is to set a scale transform on the element so that Firefox is forced to run it through an extra graphics step.
In your example, the solution is to set -moz-transform: scale(.9999) on the .b1 and .b2 elements. This forces antialiasing in Firefox.
.shape
{
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #3F7296;
position: relative;
color: #FFF;
line-height: 50px;
font-size: 40px;
}
.b1, .b2
{
position: absolute;
left: 100px;
bottom: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 50px 16px;
border-color: transparent transparent transparent #3F7296;
-moz-transform: scale(.9999)
}
.b2
{
left: -16px;
border-width: 50px 16px 0px 0px;
border-color: transparent #3F7296 transparent transparent;
}
<div class="shape">
<i class="b1"></i>
<i class="b2"></i>
</div>
I have a padding on my textarea element and I would like the content to remain padded as you scroll within the textarea. It is working as expected in Firefox but not in Chrome. The below image shows the difference in output:
CSS:
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
}
In Chrome, the top and bottom padding only appears at the beginning and end of the text content. Here is a jsfiddle to demonstrate:
http://jsfiddle.net/LkE6f/
How can I make the padding in Chrome appear/render in the same way as it does in Firefox?
You could do something like this, it's not very flexible (fixed width), but you can expand on it. It fixes the issue in Chrome and doesn't break Firefox. It uses pseudo-elements on #container, which work in IE8+
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
width: 225px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 6px;
}
Here's a jsFiddle.
Update: Added display: block to textarea to fix IE positioning issue.
Update 2: Alternative solution which takes its width from the #container div and for which you'd need to set the right value based on the width of the scrollbar of the browser, the 17px value is ok in Chrome at the moment. A pro with this solution is that you can set the width of the textarea to anything by changing the width of the #container, and the pseudo-elements will scale accordingly. jsFiddle.
#container {
width: 260px;
margin: 20px auto;
position: relative;
}
textarea {
width: 100%;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
right: 17px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 1px;
}
Best answer:
Embrace the difference between browsers; the web is not uniform and your design will never be 100% identical across browsers.
Work around answers:
If you don't care about the scrollbar having a gap at the top and bottom, you can use borders and an outline like this.
OR
This can be achieved with a pseudo element, if you are happy wrapping each textarea in a div. Should display correctly on IE8+, FF and Chrome.
Have a fiddle!
HTML
<div class="textareaWrap">
<textarea>Content</textarea>
</div>
CSS
textarea {
position: relative;
width: 250px;
height: 160px;
font-family: Arial;
padding: 15px;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
resize: none;
}
.textareaWrap {
position: relative;
}
.textareaWrap:after {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
bottom: 5px;
left: 1px;
}
.textareaWrap:before {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
top:1px;
left: 1px;
}
Try the below solution for the textarea
textarea {
-moz-appearance: textfield;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
-moz-user-select: text;
background-color: -moz-field;
border: 2px inset threedface;
color: -moz-fieldtext;
cursor: text;
font: -moz-field;
width:250px;
height:150px;
letter-spacing: normal;
line-height: normal !important;
padding: 1px 0;
text-align: start;
text-indent: 0;
text-rendering: optimizelegibility;
text-shadow: none;
text-transform: none;
word-spacing: normal;
}
Fiddle link Link
Regards
Mahadevan
I have tried as hard as I could but I can't figure out why this page hasn't any chance of scrolling (mouse, keys, scrollbars missing) in Chrome. In other major browsers everything seems fine.
You should be try with:
Create new id next <body>
<div id="container">
<div class="bloque_superior">...</div>
<div class="contenido">...</div>
...
</div>
css
body {
font-family: Tahoma,Arial, Helvetica, sans-serif;
font-size: 12px;
color: black;
background-color: white;
background-image: url(img/bg.png);
background-repeat: repeat-x;
}
#container {
margin-left: auto;
margin-right: auto;
width: 970px;
}
On line 62 in ui.checkbox.css, change
.ui-checkbox input, .ui-radio input {
position: absolute;
visibility: visible;
left: -99999999px;
top: -99999999px;
width: 14px;
height: 13px;
margin: 0px;
border: 0px none;
padding: 0px;
}
to
.ui-checkbox input, .ui-radio input {
visibility: visible;
left: -9999px;
top: -9999px;
width: 14px;
height: 13px;
margin: 0px;
border: 0px none;
padding: 0px;
}
This works for me.
I have a simple list with a background image in each element. The image is showing in Firefox but no in Chrome (Windows OS). These are the styles attached to the list:
ul li
{
position: relative;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #777777;
width: 378px;
float: left;
padding-top: 6px;
padding-right: 0px;
padding-left: 30px;
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
color: #575656;
line-height: 19px;
background-color: transparent;
background-image: url("../images/tir.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top 6px;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
padding-bottom: 3px;
}
Can someone spot what's wrong with this?
Fiddle: http://jsfiddle.net/kgeDr/
The code seems to work.. http://jsfiddle.net/LZKG6/
(I use Chrome in Ubuntu)
May be this is wrong:
background-position: left top 6px;
I think the extra "6px" is invalid.
W3schools only specifies 2 values, not 3:
http://www.w3schools.com/cssref/pr_background-position.asp