I am using a jquery-ui checkbox within a container that has class ui-widget-content on it. This is causing the ".ui-widget-content .ui-state-hover" css rule that defines the background property to override the .ui-icon-check rule that defines the correct background-position for the checkbox image. I believe this is because it is more specific.
The result is that a checkbox within a widget shows the wrong image. How should I handle this?
Here is a jsfiddle example. In the second div where I have the ui-widget-content class, you can see the checked image is wrong.
<div class="ui-widget-content">
<label for="cb3">Test 1</label>
<input type="checkbox" id="cb3" class="toggle"/>
<label for="cb4">Test 2</label>
<input type="checkbox" id="cb4" class="toggle" checked="checked"/>
</div>
Note that I can't change the parent div. I am working within a dialog that requires that class.
I am surprised I can't find anybody else complaining about this. I am not sure what I am missing.
So the .ui-icon-check class is being overwritten by a later style. You can just write it back.
One Example: https://jsfiddle.net/Twisty/ewabcy3g/2/
(Fixed for blank)
CSS
.ui-widget-content label span.ui-icon-check {
background-position: -64px -144px;
}
.ui-widget-content label span.ui-icon-blank {
background-position: 16px 16px;
}
Another Example: https://jsfiddle.net/Twisty/ewabcy3g/1/
jQuery
$('.nonwidget,.ui-widget-content').controlgroup({
"direction": "vertical"
}).find(".ui-icon-check").css("background-position", "-64px -144px");
Hope that helps.
Update
Found something interesting, still a bit of a hack but it seems to help:
https://jsfiddle.net/Twisty/ewabcy3g/3/
When I removed the checked attribute and set it via jQuery, like so:
$('.toggle').checkboxradio();
$("#cb4").attr("checked", true);
$('.nonwidget,.ui-widget-content').controlgroup({
"direction": "vertical"
});
I could remove the CSS hacks. I found that setting the CSS positioning back, it was still reading the hover background image and not retaining the proper styling.
I then tried adding checked="checked" back to the HTML and it got screwed up again.
Related
I'm working on a project where you can insert your working hours, in which you have to insert start- & end times. But after you put in the start time and tab to go on, it does focus first on the icon, which comes from the
<input type="time">
I want that the tabbing only hits the input area, not the icon next to it.
This is the current state:
example input field:
<div class="text-section">
<label for="startTime"
class="text label without-margin">#((MarkupString)loc["StartTime"].ToString())</label>
<div class="property-container-three">
<div class="property-icon">
<div class="icon solid start" tabIndex="-2">#Icons.Startzeit</div>
</div>
<input class="input-text nomargin centerInputContentVertical"
type="time"
id="startTime"
#ref="startTimeElement"
#bind-value="blazorStartTime"
#onblur="HandleStartTimeSet">
</div>
</div>
I already tried everything with tabindex:"-1", it just makes no difference. Also I'm just able to modify this icon due css, which goes like:
input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="time"], input[type="datetime"], input[type="password"], [type="email"], select, textarea {
padding: 8px 12px;
height: 38px;
width: 100%;
}
I do not have any more ideas or approaches...
After some googling I found, it is a known issue with Edge... see this answer, it states that Microsoft do not plan to fix it; but the link they mention is dead.
I can only replicate this bug on Edge. And it seems MS won't solve it...
You can target it with CSS: idea from here
input[type="time"]::-webkit-calendar-picker-indicator` {
display: none:
}
Perhaps setting display: none will be enough and maybe adjusting padding/margin for it too?
Unfortunately, there is currently no stable CSS way to change the tab-index; and currently no way to change the HTML attributes.
The current CSS equivalent for tab-index is -moz-user-focus but this is non-standard and the documentation stresses that you "should not use this".
Similar things exist for grabbing the pseudo element with JavaScript like this question, but again this is for computedStyles which is back to the CSS issue again.
Maybe in future this sort of feature will be introduced and there will be a working answer for it....
I'm currently working on a project for a client who is creating a share tribe website which also incorporates bootstrap.
Here is the link.
You can view the source code on this website to see the code.
I have tried on the website to alter the css so that I can change the height of the input field, however my code in the index file doesn't change anything.
Also how do I go about changing the header bar at the top from white to have a clear background?
Also, I tried altering the css in the customstyles.css , and by manually inserting the `height="10px"' using 'inline css' however both of these didn't work.
Please let me know how to change the css to make this possible. Here is a JSFiddle too, to make it clearer:
JsFiddle Link
<div class="col-md-4">
<div style="display: table; margin: 0px auto">
<div class="input-group">
<input type="text" id="q" name="q" class="form-control" placeholder="Where are you going?" style="height: 10px">
<span id="submit" class="input-group-addon btn btn-success">Submit</span>
</div>
</div>
</div>
Easy as heck using jQuery if you have the option
$('.class').css('height','110px');
For multiple characteristics:
var params = ['height','width','text-align'];
var values = ['1000px','100px','center'];
for (p in params) {
$('#id').css(params[p], values[p])
}
Your customstyles.css is working good and its call on page,
You just need to change in the class
.marketplace-lander input[type=text] -> padding
parameter. padding is creating problem for you in some resolutions.
I am creating a small simple web app and having some trouble creating the radio buttons I want.
I want the user to be able to decide whether they want to input the dollar value or a percentage, that would then be used to calculate a dollar value.
I want the input text box to look similar to this example:
Here is a codepen example:
CodePen Example
How can I get the radio buttons to be right on top of each other in bootstrap? Or will I need to resort to custom css to get it done?
input elements are by default displayed as inline;
You need to use display:block for them to show one on top of the other.
.input-group-addon input{
display:block;
}
You'd also need to give a specific class to this input-group so you'll be able to use this layout specific to that class only and not all input-group-addons
Since it is BootStrap, you could always wrap your radio boxes inside BootStrap classes like such. Or display block but the input height will stretch height further than adding bootstrap divs.
<div class="col-sm-12">
<div class="col-sm-12">
$<input type="checkbox" aria-label="...">
</div>
<div class="col-sm-12">
%<input type="checkbox" aria-label="...">
</div>
</div>
I am trying to set custom styles for checkbox in a RadTreeView. It's simple enough just a different color for checked boxed and another color for unchecked boxes. But I am not sure how to do this.Couldn't find any built in Telerik method/property for this. Tried to do it with css like I usually do by hiding the checkbox and styling a div/span like a checkbox. But the html here is generated from RadTreeView and I am not sure how to apply the same here. The html that gets generated looks like this,
<li class="rtLI">
<div class="rtMid">
<span class="rtSp"></span>
<span class="rtPlus"></span>
<label>
<input type="checkbox" class="rtChk">
<span class="rtIn">Boston</span>
</label>
</div>
Any suggestions on how to style checkboxes in the RadTreeview? Thanks.
If we take this demo: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx
It looks they are using RadFormDecorator to style the checkboxes.
Your html looks like the one from the right hand side and its style is set by this css class:
.RadForm_Silk.RadForm.rfdCheckbox input[type="checkbox"]
{
background-image: url('FormDecorator/CheckBoxSprites.png');
}
So, if you too are using RadFormDecorator then you can override the above css rule by adding your own rule with higher specificity, e.g.
div.RadForm_Silk.RadForm.rfdCheckbox input[type="checkbox"]
{
background-image: url('your_own_image.png');
}
I am trying to remove the css of an image. My actual code doesn't include this CSS, but it comes from a generate code. I can't touch that neither modify anything that is related to the generared code.
This is my real code
<div class="bubble">
<img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png" style='float: left;' alt="Quotes">
<p id="comment11">I was very impressed with the unique design and high quality of this pen.
</p>
</div>
<div class="quote_speech">
<div class="name" id="author11">By PEDE</div>
<div class="company" id="company11">September 25,2013</div>
</div>
This code is added to a div from the generated code name rightCol
And there is a CSS class declare the following way
#rightCol img{
display:block;
float:none;
margin:0 auto 0 auto;
position:relative;
border:0;
padding:3.5px 0;
backgroun-color:#fff;
width:166px
}
The issue is on width:166px.
The bad new for me is I can't remove it manually(Generated code).
So I was thinking to use javascript for this.
using this $('#one').hasClass('img')
But this returns me false.
I did a demo getting in JS FIELD getting the CSS. DEMO
If I remove the 166px from the CSS it works, but that solution is not available for me. And the has class returns me false. Wondering why?
Thanks in advance
Actually you can use !important to override this behavior but it is better to declare more specific rule rather than using !important
#rightCol img#one {
width: auto;
}
Demo
Hi I checked your demo page and just added one line to your document.ready function.
$(document).ready(function () {
$('#one').css('width', 'auto');
randomtip();
});
check and let me know if still problem exist.