The solid fill on the MDL radio button will not print. I turned on the show background graphics on the printer settings, with no luck. Does this work for anybody else?
As you noted, the inner circle is a background color, not displayed by default in most browsers when printing the page.
I fixed that quick&dirty with :
#media print { .mdl-radio__inner-circle { border: 4px solid #000; } }
Related
If you click on that image (which is inside a button) an Alertify message pops up. This (the image above) happens when the message closes.
I have this problem wherein the button defaults back to the default button decoration. How do I prevent this from happening? I already tried the outline: none !important CSS element but it still does not work. Is there an "aggressive" way of getting rid of this?
EDIT: I have double-checked on the developer tools already and it seems that the outline CSS code has already applied. However, this problem still persist.
If you are trying to remove the background blue and the border. Try the following styles..
These will add a 1px wide transparent border which will change color to grey when clicked. It will turn back to transparent when click is released.
Also the background blue color will be removed.
button, button:focus{
outline: none;
background: transparent;
border: 1px solid transparent;
}
button:active{
outline: none;
background: transparent;
border: 1px solid grey;
}
I am attempting to skin a Kendo UI DropDownList widget for my own site, and have had fairly good success with a small caveat that is driving me nuts.
I am including a link to a jsBin that demonstrates the issue, and some screenshots. But basically what is happening is that I want the entire dropdown list to be flat (no border radius), and then to be very solid (white background, black text) and the currently selected item to have a thick red bar as its left border (3px in my example), and then as you hover over the items in the list box, their left border becomes a thick greenish/blue bar.
This is working, except for some strange spacing issues; First of all, as I hover over things, they "jump" around. They get pushed this way and that a bit obnoxiously, making it feel non-uniform. I really want to fix that; and the thing that is driving me the most nuts is that the "bar" that I use on the left-border is having a strange curvature to it, making it look very out of place, as if it is almost beveled. Can anyone assist with this?
jsBin Example
.custom-dropdown .k-item {
background: white;
font-weight: lighter;
padding: 0 4px;
border-left: solid 2px white; // add this
}
.custom-dropdown .k-item.k-state-selected,
.custom-dropdown .k-item.k-state-focused {
color: black; // and add this
border: solid 1px white;
border-left: solid 3px #b91d47;
}
I think there nothing to do for strange curvature.
http://www.w3schools.com/css/css_border.asp
http://jsbin.com/elOSuDo/1/edit updated jsbin
I have a standard input textbox that I've styled using css and psuedo-class elements Hover and Focus. The css I am using is pretty simplistic:
.riTextBox:hover,
.riTextBox:focus
{
border: solid 1px #F1C15F;
}
.riTextBox
{
border: solid 1px #7394BE;
border-radius: 3.5px;
}
All is working great except when the textbox has text in it and is selected with the mouse, and as you are selecting the text you leave the bounds of the textbox (with the mouse button still down), and then mouse up somewhere outside the textbox. You will notice that the textbox border is still highlighted as if it never lost focus.
It seems that the onselect event of the textbox is conflicting with onblur, but I'm not sure. See here to reproduce this frustrating issue:
http://jsfiddle.net/pBkhT/7/
Thanks for any help you can provide!
This answer is a little late, but it works for your problem. Simply remove the focus event that is coupled with the hover event. Your original hover border will still remain on focus (when user clicks the box), but when the user moves the mouse away, the hover styling will disappear, even when the mouse button is still down.
.riTextBox
{
border: solid 1px #7394BE;
border-radius: 3.5px;
}
.riTextBox:hover
{
border: solid 1px #F1C15F;
}
After searching for a while I saw that they way to set a visible border on a groupbox is to use the StyleSheet property. I added:
border: 2px solid gray;
but there are a couple of problems.
1) Everything inside the groupbox also inherits this setting!
2) The border has a little hole/piece missing near the title.
Here is a picture of what I'm talking about:
Anyone know how to do this properly?
Thanks,
David
The first problem is simple enough When you add a stylesheet to a control it automatically propagates the style to all child widgets. However, you can restrict the use of the style sheet in a couple of ways. You can specify the type of control you want the style sheet to apply to. Example:
QGroupBox {
border: 2px solid gray;
border-radius: 3px;
}
This style sheet will only be set on Group boxes. However, if you put a second group box inside this one, the style will propagate to this one as well. Which may be good or bad.
Another way is to specifically the objectName of the widget you are applying the style to. Example:
QGroupBox#MyGroupBox {
border: 2px solid gray;
border-radius: 3px;
}
This will only apply the style to a group box with an object name of MyGroupBox.
As for the space, it is happening because the title is being drawn on top of your border. You can also add a section to your style sheet to change your groupbox title. This includes setting it's background to transparent, and to move the title around to your hearts content.
Example: This will set your title to the top left corner of the group box just inside your border, with no gap.
QGroupBox::title {
background-color: transparent;
subcontrol-position: top left; /* position at the top left*/
padding:2 13px;
}
this worked for me on Qt 5.1.
qApp->setStyleSheet("QGroupBox { border: 1px solid gray;}");
Elimeléc
Specify a selector for the group box style such as:
QGroupBox
{
border: 2px solid gray;
}
As for the gap, you can probably fix that by setting some padding. Check the docs here.
I'm currently writing some stylesheets for mobile browsers and have come across a strange issue in the Android browser. When changing the font-size CSS attribute of a text box the box gets bigger to accomodate the larger text. Doing this on a select box however does not change the size of the select box, but the text still gets larger (actually overlapping the top and bottom of the rendered form element).
Can anyone tell me if it's possible to increase the height of select boxes in the Android browser. Or if not point me in the direction of a list of CSS attributes that can be applied to them.
Thanks.
Another option you can use (tested on galaxy S running android version 2.1-update1):
select {
-webkit-appearance: listbox;
}
select, input {
width: 100%;
height: 40px;
line-height:40px;
border: 1px solid #999;
border-radius: 6px;
margin-bottom:10px;
}
This way the inputs and selects all look the same, clicking the select will open the options menu as usual.
This seems to be a browser bug. You can also reproduce it when you set your browser's text size to 'huge' (in settings). I added a new issue and suggest a workaround with a custom background image for now:
<select style="background: url('big-select-bg.png')"/>
try this one:
select{
-webkit-appearance: menulist-text;
}
Set the opacity of the select control to 0
Then place a span contorl styled to look like a textbox behind the select control so that the select control are sits directly on top of the span.
The user won't see the select control but when the user attemps to enter text into the span the dropdown options for the select control will appear.
After the user makes their selection use javascript to update the innerHTML of the span with the value of the select control.
Make sure the dimensions of the span and the select control line up well.
(Do not use an actual texbox control)
mealaroni.com
For me "-webkit-appearance: listbox;" solved the issue not completely.
I had to add a padding attribute additionally:
select {
-webkit-appearance: listbox;
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #bbb;
border-radius: 4px;
padding: 0 0 1px 8px;
}