I am using the following CSS class to hide a textbox in an asp:UpdatePanel to accept input from a USB card reader.
<style type="text/css">
.USBBox
{
position: absolute;
left: -999em;
}
</style>
When I click an asp:LinkButton control that is configured to be an asp:AsyncPostBackTrigger for the update panel the control appears on the page and the CSS class is not applied to the asp:TextBox control.
This behavior is displayed in IE7. It works as expected in FireFox 3.5.7
What would cause this behavior and how do I resolve it
There my be a specificity issue. Try
input.USBBox{
position:absolute!important;
left:-999px!important;
}
And if it works, back out of the !important tags to see what actually caused the issue.
Also declare display:block; just in case.
I think you should use:
.USBBox
{
display: none;
}
or maybe use a asp:HiddenField instead of a textbox.
try
.USBBox
{
display: block;
width: 100px; /* or however wide you want it */
position: absolute;
left: -999em;
background: #ff0000; /* visually ensure the class style is being applied, remove it later */
}
position should only work on items that are displayed as a block. form items by default are displayed inline.
also just for giggles set the background color just to make sure the input box is taking class.
Could it be that the new control comes with multiple classes ?
Because IE is having issues when combining classes on a single element..
Related
I have a survey on Qualtrics and I would like to find a way of hiding the radio buttons using CSS; is this possible?
Thanks!
if you want all radiobuttons hidden then you can use
input [type="radio"] { display:none; }
if you want only some radiobuttons hidden then you must give a css class for them for example "hiddenRadioButton" and this css class is
.hiddenRadioButton{ display:none; }
Edit: [input type="radio"] {display:none} should be input [type="radio"] { display:none; }
If you want to hide a certain radio button, then use this:
HTML:
<!-- Example with two radio buttons -->
<input type="radio" id="first-button" name="button"> <input type="radio" id="second-button" name="button">
CSS:
#first-button {
display: none;
}
If you want to hide all the radio buttons then User Vecihi Baltacl's answer will not work, you need to use this CSS:
input[type="radio"]{
visibility:hidden;
}
There are several way of hiding stuff it depending of what you want achieve:
hide because you don't need it or you will show it from js when some condition will be met. For this you should use display: none;. That elements are not in the DOM.
hide because you will do some crazy hack for eg. because you are lazy and you don want to modify POST or deal with date on backend. Then you should use visibility: hidden; that element are in the DOM.
-hide because you want to style it differently (and stupid :D browsers don't allow you to do that). This days is not recommended
because be have so many devices which behave in many different ways
that will cause some problem for eg. on mobile (of course not
always). For that you should use opacity: 0;. They render on page in place where they should be but are just not visible.
My personal favourite for this:
.container{
overflow: hidden;
position: relative;
}
.hidden-stuff{
position: absolute;
top: 0;
right: 0;
font-size: 30rem;
opacity: 0;
cursor: pointer;
z-index: 10;
}
There is nice way of styling radio buttons by css ninja http://www.thecssninja.com/css/custom-inputs-using-css
I've found an interesting post about webkit pseudo elements for inputs here, so I was going to remove the cancel button from input type="time". But by murthy's law exactly this pseudo element is not described anywhere.
P.S. I already tryed
::-webkit-search-cancel-button
::-webkit-input-cancel-button
::-webkit-time-cancel-button
::-webkit-time-cancel-button
Of course there is a way to do this with :after element, but I don't believe there is no pseudo element for this
input[type="time"]::after
{
content: "";
background: #FFF;
height: 20px;
width: 10px;
position: absolute;
margin: 0 -10px;
}
That would be ::-webkit-clear-button
So use
input[type="time"]::-webkit-clear-button{
display:none;
}
To find such things you can enable Show Shadow DOM from the console options, under Elements.
This way when you select the input element, you can open it and look under the hood..
I knew that Internet Explorer 10 supports such a pseudo-element with ::-ms-clear.
So I searched in the source code of Chromium for "webkit-clear" and discovered the presence of ::-webkit-clear-button.
This JSFiddle shows that the ::-webkit-clear-button pseudo-element has the desired effect.
input[type="time"]::-webkit-clear-button {
display: none;
}
When you hover over a link, it tells you where the link takes you to. How can I find out the CSS needed to output the same thing?
I guess I'd only need to know the exact color / font style etc that the browser uses to make such a message.
The default font and style vary from browser to browser
The user might not be using the defaults
Why?
You most like want something along the lines of a span or div with the following CSS
#fakeStatusBar {
background: #CCC;
display: inline-block;
position: fixed;
bottom: 0;
left: 0;
}
input.icon
{
border: 0;
cursor: pointer;
margin: 0;
padding: 0;
width: 16px;
height: 16px;
text-indent: -1000em;
}
input.edit {
background: transparent url('/edit.png') no-repeat center top;
}
On an element like:
<input type="submit" class="icon edit" onclick="...." />
It renders fine in firefox, without the text on the image also. In IE it shows the text of the value attribute.
Why is that?
Actually i'm not even setting the value attribute and it is defaulting to 'submit query'.
Also, I thought my CSS could be more specific by doing:
input.icon {
...
}
input.icon .edit {
...
}
But that didn't work for me not sure why, so I changed the 2nd definition too:
input.edit {
..
}
Why didn't input.icon .edit work?
Could I just as well put these styles on a div element? What's the difference?
You've got a few questions there. For the first one. I'm not seeing the issue in IE8:
http://jsfiddle.net/rfYrq/
I do not see the text in IE8.
Question 2: "Why didn't input.icon .edit work?"
The meaning of input.icon .edit is, any element with the class of edit within an input element with a class of icon. What you really wanted was any input with both the edit and icon classes. That would be like this:
input.icon.edit
Question 3: "Could I just as well put these styles on a div element?"
Yes. If you are overriding the style of the button with your own css and apparently overriding the functionality of the button with an onclick, you can just use a div or a span or some other element depending on your situation.
Take the following code:
<abbr title="World Health Organization">WHO</abbr>
Can we style an abbr tag's title? So that instead of a custom tooltip we can use title?
Actually, Alex Mcp’s answer is incorrect. It is entirely possible to do this with CSS for modern browsers. However, a fallback for older browsers with JavaScript may be used.
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}
This will add an absolutely positioned pseudo element top right of the abbr tag using the attribute content within the title when the abbr tag is hovered over.
If you mean style the actual text that pops up, no you can't style that with CSS; it's browser-specific. Javascript-based tooltips would be the way I would handle it, since it allows to have more control over this behavior.
I was looking for something similar and came up with the following alternative (tested on Firefox, Safari and Chrome on Mac, works with IE 7-10 when I clicked it), based on this link:
HTML:
<abbr title="My Custom Abbreviation" name="">Abbreviation</abbr>
jQuery:
$('[title]').each( function() {
var mytitle = $(this);
mytitle.data('title',mytitle.attr('title')); // get title attribute value
mytitle.attr('name', mytitle.attr('title')); // add title attribute value to NAME attribute
mytitle.removeAttr('title'); // remove the title attribute, removing browser tooltip
});
CSS:
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(name);
}
You can style the way the shortened version appears, so in this case 'WHO'. But not the way the pop up box appears, as that is controlled by the browser/OS.
You can get around this limitation by applying some JQuery stuff to any abbr tag programatically - this would display a div, of which the contents would read the same as the title on the tag that called it.