I have a css problem and I don't know how to fix it.
In order to expand a dropdown list you must use css below. Work fine only with one condition, when you select an option the select wont return to initial width. WHY??? :(
This a behavior that I want to happen on all browser including IE8 because of IE I must set width on focus .
select:focus{
min-width:158px;
width:auto;
}
fiddle:
http://jsfiddle.net/DCjYA/304/
Check this out! I think will solve your problems regarding combo boxes on IE.
http://www.andreabianchin.it/jquery-skinner/
You need to force the element to lose focus after it changes.
Add:
onchange="this.blur()"
like this:
<select id="id72" class="styleDDC" onchange="this.blur()">
the pseudo css class: focus is for while its selected (while its highlighted blue) once you click on something else it shrinks back down to your min-width
Related
CSS3 Pie has some odd functionality when styling select tags. The border radius and box shadow seem to apply the effect and then place the non-styled select box overtop of the effect. Is this an issue anyone has come across and worked around before?
I was actually having this issue, but figured out a fix.
Initially, with
behavior: url(stylesheets/PIE.htc);
the select would open at first, but if I applied a class of error on it with javascript during validation to make the border and background color change to red, it would no longer open properly. To get it to still work properly, you need to add 3 additional pie properties to the select. After adding
.ie select{
behavior: url(stylesheets/PIE.htc);
-pie-poll:false;
-pie-track-hover:false;
-pie-track-active:false;
}
I was able to get it to work and function 100% properly.
Do you mean to style it like this? http://jsfiddle.net/Tmzjz/1/
If you check this in IE7/8, the select box will not function properly.
When you need rounded corners and box shadows for select box, it is better to use a javascript method - http://cssglobe.com/custom-styling-of-the-select-elements/
How to change cursor when dragging using only CSS?
div:active{
cursor:move;
}
This won't work because it will be automatically changed by the browser to a text cursor when dragging. So how?
http://jsfiddle.net/nick_craver/uZ377/1/
Not sure if it truly solves your problem, but this ( http://jsfiddle.net/garretruh/pJjd4/ ) seems get rid of the text-select cursor by not making text selectable at all. Then again, you might want users to be able to select your text.
I realize this is over a year old, but just change the * selector at the top of that JSFiddle to only match the element that you are dragging around. No Javascript required.
Something strange afoot, here:
An instance of Datepicker is showing up in a weird place as a single bar in the upper left hand corner of this page.
I'm using both jQuery UI's Datepicker and Accordion on a page. In the CSS for the UI, the display:none for Datepicker seems to be overridden by the display:block for the Accordion, at least according to Firebug (see img below).
Then, once the Datepicker trigger is clicked in the 'catering/event room' tab (click one of the buttons to show div with Datepicker,) the display:none seems to then work.
Here's what the bad div looks like:
and here's the Firebug panel:
I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css:
#ui-datepicker-div {display: none;}
This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when you click on an element that needs to display the datepicker. Upon re-initialization, the datepicker element with id #ui-datepicker-div will have the correct position.
In my case, I use the session "$(document).ready(function(){" of JQuery in my favor.
As I have a JavaScript file that is loaded in all pages of my system, I just added the following line on it.
$('#ui-datepicker-div').css('display', 'none');
For me, it appears a clear and elegant solution because I did not have to change its library.
Best of all, it is working fine on all browsers. :)
The problem could be that you're binding the datepicker to something that is not visible, that would explain the odd positioning (trying to offset from something that doesn't exist will degenerate to offsetting from (0,0)). The datepicker <div> should have at least a table inside it so maybe the datepicker is getting confused and throwing an exception before it finishes initializing itself. When you click on one of the bound inputs, it is probably initializing itself again (or at least properly finishing the initialization) and everything works fine after that.
Try binding the datepicker when the date input becomes visible:
Remove the $(".date_picker").datepicker({ disabled: false });
Add an id="cater" to <input type="text" name="cater"/>
Call $('#cater').datepicker(); when the "reserve event room" button is pressed.
If that works then you'd have to add similar hacks for other datepickers. If it doesn't work then I'm probably wrong. If my guess turns out to be right then you might want to report a bug to the jQuery-UI people.
BTW, in Safari I can only see the first two tabs, I had to switch to Firefox to see the "catering" tab. Oddly enough it works just fine in Chrome. This is probably unrelated but I thought I'd let you know anyway.
The problem is down to the element the datepicker is being binded to not yet being available.
The solution I found was to initalize the datepicker when the actual element has been clicked and then showing it straight after initalization. This ensures the element is available before the datepicker has been binded to it and initalized.
$(function() {
$(".date_input").click(function() {
$(this).datepicker();
$(this).datepicker("show");
});
});
....
<input type="text" class='date_input' />
I had a similar problem in Chrome and I solved it editing jquery-ui1.7.2.custom.css
from:
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
to:
.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }
There's probably too many nines for Chrome.
Try moving the last block to the bottom of the page (right before you close the body tag). You can read more about why you want to do this here:
http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html
BTW: Cool idea for a menu. I like it.
Sometimes it has to do with the z-index of another item on the page being higher. Setting the z-index to a very high number solved my issue.
#ui-datepicker-div {z-index:11111;}
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.
I'm having a problem with FIREFOX. I have an invisible list control over a drop-down control (html 'select'). Don't mind why, but I will say that the over-layer is a pop-up that appears as part of another custom control.
Even though it's hidden, it's preventing me from clicking on the underlying drop-down control, making the underlying control seem disabled. It's not disabled though, because I can tab over to it. I just can't click on it. I know it's the overlay causing the problem, because I moved the underlying control off to the side and it works again.
Is this a bug in Firefox? This isn't like setting a translucency value; it's disabling rendering of the control altogether, so I don't think such an invisible control should be intercepting mouse events.
This behavior does not occur in Internet Explorer.
Perhaps there is some other CSS property I can set in JavaScript to toggle its mouse event capturing ability along with its visibility.
dd = document.getElementById('lstStudents');
if (dd.style.visibility == 'hidden') dd.style.visibility = 'visible'; else dd.style.visibility = 'hidden';
Update: I just read a description for the CSS visibility value "hidden" that read "The element is invisible (but still takes up space)". So I guess I'll have to set it's height to zero along with setting it's visibility to solve this problem.
change your over-layer control's z-index to, say, -1. style="z-index: -1;" This will place it underneath everything, allowing direct access to drop-down. You might have to dynamically change the z-index to bring over-layer back on top when visible.
More info
How are you hiding the element? If I remember it right, "visibility: hidden" is supposed to (rightly) work the way you describe, while "display: none" will banish rendering altogether.
If that's not the cause, can you confirm using Web Developer Toolbar that it is indeed the invisible control that is causing the problem and not another that has opacity set to 0 or something?
The way I've done popup boxes before in Firefox was with CSS properties.
z-index: 500;
display: block;
to show an element, and
z-index: -10;
display: none;
to hide it.
Now. My values for z-index are extreme, but that's just what I chose. This works for me, but my app targeted Firefox specifically; aaaaand I'm using the display property, which you stated you want to avoid.
If you're concerned about using display:block or display:hidden, I think maybe you could try to play with positioning, or sizing the element.
Either make the popup element absolutely positioned and move it offscreen when invisible, or maybe try to make it 0px width and 0px height when invisible. That's two things I would potentially explore if I still had problems. I'm not sure if I would recommend these as best solutions though.
Really consider how many instances of your popup elements will have different display values, I found in my case to be using only two types, 'none', and 'block'. Maybe manipulating the display property will be enough for you.
Hope this helps.