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');
}
Related
I'm trying to replicate the default settings of ag-grid which paints every other rows background in a slightly different color. But when I try to reorder columns clicking on headerColumn the background colors doesn't reorder.
This is my current approach that isn´t working
cellStyle(params) {
let backgroundColor = #FFFFFF;
if (params.node.rowIndex % 2 === 1) backgroundColor = #E04F00;
}
https://plnkr.co/edit/bHLEmECLNby3obIT, this example shows the desired behavior.
Is there a way to acces and change those default colors?
I found out that the default themes of ag-grid already did what I wanted, the thing is that the theme I'm using has two colors that are very similar, what I really needed was to change that default color.
I was able to achieve that by overriding theme's variable
.ag-theme-balham {
--ag-odd-row-background-color: #E04F00;
}
.ag-theme-balham .ag-row-odd {
background-color: var(--ag-odd-row-background-color);
}
I followed their documentation, first here https://www.ag-grid.com/javascript-grid-styling/, that took me to https://github.com/ag-grid/ag-grid-customise-theme, where I discovered which variable I should edit.
Checking the working example you are showing here, each .ag-row div has an additional class .ag-row-odd or .ag-row-even. So basically those classes mimic the behavior you could achieve by using .ag-row:nth-child(odd) and .ag-row:nth-child(even).
What might be happening in this case is that when you reorder the .ag-row elements the classes are not being updated, instead just moved around. What that would represent is something like this:
<!-- Default //-->
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<!-- Sorted //-->
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
So in this case what I would recommend is either to change the styles to:
.ag-row:nth-child(odd) {
background-color: #fcfcfc;
}
.ag-row:nth-child(even) {
background-color: #ffffff;
}
If that's not an option than you should review the script that reorders the .ag-row elements as it's probably not changing the classes accordingly.
UPDATE
I think I found your issue. I checked this example
And while inspecting elements I saw that when you reorder, each row has these two attributes.
<div row-index="3" aria-rowindex="7"></div>
From what I was able to determine even if you change your sort parameters, those two attributes don't actually change. So if you base your row styles on them, like you do with the row-index parameter, you'll never get a correct order, because sometimes you get:
<div row-index="3" aria-rowindex="7"></div>
<div row-index="5" aria-rowindex="9"></div>
<div row-index="7" aria-rowindex="11"></div>
As this is not incorrect, the styles are applied, but not in the order you would prefer. The script is doing its job as intended, it's just that your condition for the colors is not working.
The solution to this I think would be 100% css and for you to remove the cellStyle definition, because I think the problem lies there.
CSS is going to be the easiest solution to this. I don't see your html, but essentially you will want to reference the html table's rows, and then add a css nth-child(even) and nth-child(odd) to them. Here is an example:
p:nth-child(odd)
{
background: #ccc;
}
p:nth-child(even)
{
background: #fff;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
And here are some more examples from w3:
Depending on what your specific code looks like, there may be different ways of doing this. I noticed you have js in your question, but since there was the css tag, I gave a css answer.
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.
On my website I'm using this multiselect directive several places
http://isteven.github.io/angular-multi-select/#/main
For instance I'm using it in my navbar as a language selection dropdown. However I would like to specify the width of the language dropdown to less than standard. Other places I'm using the same directive and the auto width is fine. I can change the width of the language menu by changing min-width and max-width in the css file, but this will change the width of all my multiselects.
So basically, how can I change the css of just one particular instance of a directive?
[update]
The multiselect is added like this:
<div isteven-multi-select
input-model="languages"
output-model="outputlanguages"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
selection-mode="single"
helper-elements="filter"
on-item-click="changeLanguage(data)"
>
</div>
When the html is loaded the isteven-multi-select div will contain the following:
<span class="multiSelect inlineBlock">
<button ...>
</button>
<div class="checkboxLayer"> //here is the dropmenu itself
</div>
</span
So by editting .checkboxLayer in the css file I can adjust the width of the dropdown menu. But this is changed for all multiselect instances. It doesnt work if I add another class to the isteven-multi-select as this is the parent div.
Add a css class to the div with the directive where you want the smaller dropdown:
<div isteven-multi-select
input-model="languages"
output-model="outputlanguages"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
selection-mode="single"
helper-elements="filter"
on-item-click="changeLanguage(data)"
<!-- Add this -->
class="thinDropdown" >
</div>
Then in your css, write this:
.thinDropdown .checkboxLayer {
width: 200px; /* Or whatever width you like */
}
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>