I am working with telerik ui combobox and enabled its checkbox property. Also I a using my custom skin.
My problem is that I am not able to change the style of checkbox. I wanted to change how the checkbox style as per my requirements especially the background colour of checkbox and its shape.
enter image description here
First, I advise that you check out the w3schools that explains how CheckBoxes can be styled at How TO - Custom Checkbox.
And now, inspect the Telerik ComboBox to understand how it is rendered. As you can see, this HTML structure differs a little bit from the one presented in the 3wschools tutorial.
Don't you worry, you can adjust that. Use your JavaScript/jQuery skills and imagination to bend the structure to your will.
Attach the OnClientLoad event to the ComboBox
<telerik:RadComboBox ID="RadComboBox1" runat="server"
RenderMode="Lightweight" CheckBoxes="true"
OnClientLoad="OnClientLoad">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
When this event fires, make some changes to the HTML structure similar to the example from w3schools:
function OnClientLoad(sender, args) {
// get reference to the ComboBox Items
var $comboItems = $(sender.get_dropDownElement()).find('.rcbItem');
// Loop through each item
$comboItems.each(function () {
var $item = $(this);
// add the container class to the items
$item.addClass('container');
// render a span element inside the item
$item.find('label').append('<span class="checkmark"></span>');
})
}
You should now have a similar structure the CSS could work with:
You can now re-use the CSS from the w3schools tutorial with a slight change, that is by making the selectors more specific (stronger):
/* The container */
.RadComboBoxDropDown .container {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.RadComboBoxDropDown .container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.RadComboBoxDropDown .container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.RadComboBoxDropDown .container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.RadComboBoxDropDown .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.RadComboBoxDropDown .container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.RadComboBoxDropDown .container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
More details on CSS Specificity
Specifics on CSS Specificity;
CSS Specificity: Things You Should Know;
Specificity - CSS | MSDN;
CSS !important: Don’t Use It. Do This Instead
The final Result of the Telerik ComboBox with customized CheckBox design
I tried to keep my answer as short as possible. Hope it will prove helpful ;)
Related
I need to create two buttons in the bottom of the page with a list view. So I create two stacks in the body of the page and put listview and buttons to them like below:
<z-place inside="Body">
<Stack Direction="Vertical">
<Stack Id="top">
</Stack>
<Stack Id="bottomMenu" Direction="Horizontal">
<Button Text="Btn1" CssClass="btmButton1"></Button>
<Button Text="Btn2" CssClass="btmButton2"></Button>
</Stack>
</Stack>
</z-place>
And the stylesheet like this:
//Android.scss
.btmButton1 {
background: linear-gradient(to bottom, #039795, #196e6d);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}
.btmButton2 {
background: linear-gradient(to bottom, #5c0eb3, #3f1968);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}
#top {
height: calc("(Zebble.Device.Screen.Height - view.ActualHeight)-140");
background: #dadada
}
#bottomMenu {
width: calc("Zebble.Device.Screen.Width");
margin-top: calc("(Zebble.Device.Screen.Height - view.ActualHeight)-140");
position: fixed;
}
But, when I set the #top height buttons was hidden.
To make button bar on the bottom of navigation bar page, you can use this css role in common.scss for all platforms.
.btmButton1 {
background: linear-gradient(to bottom, #039795, #196e6d);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}
.btmButton2 {
background: linear-gradient(to bottom, #5c0eb3, #3f1968);
color: #ffffff;
height: 52px;
margin: 0;
border-radius: 0;
}
#top {
height: calc("(Zebble.Device.Screen.Height - 116)");
background: #dadada
}
#bottomMenu {
width: calc("Zebble.Device.Screen.Width");
height:52px;
}
And your body of main page view code is:
<z-place inside="Body">
<Stack Direction="Vertical">
<Modules.ContactsList Id="top" />
<Stack Id="bottomMenu" Direction="Horizontal">
<Button Text="Btn1" CssClass="btmButton1"></Button>
<Button Text="Btn2" CssClass="btmButton2"></Button>
</Stack>
</Stack>
</z-place>
There is a notice in above code which is the list view, in list view, you should use scroll view that you able to scroll your list up and down.
This is my code:
li a:before {
transition: all 0.2s ease-in-out;
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 5px 11px 0;
border-color: transparent #d9d9d9 transparent transparent;
position: absolute;
left: -5px;
top: 0;
}
<ul>
<li>
</li>
</ul>
Now I want to override the color wich is defined in my css a:before { border-color: transparent #d9d9d9 transparent transparent; } from my html file.
I want my users to chose which color they like.
I want override border-color in Html and dont want to remove li a::before from my css.
I think somthin like that:
< a href="http://Amino.dk" style="border-color: transparent red transparent transparent;">
You can always use <style> tags for that anywhere in the HTML responsible to render that page. I have an example snippet for you:
<style>
li a:before {
border-color: #333; /* Or any other color you want in the borders */
}
</style>
Hope this helped.
You can always overwrite CSS styles by using a style tag in your a-tag.
Give your users a choice of colours, get the selected colour via JavaScript and pass it to your a-tag inside a variable.
This should do the trick:
<a href="http://Amino.dk" style="border-color: transparent red transparent transparent">
I am attempting to design a site for someone who wants both the Contact Us page in the bottom portion of the menu and above their logo in the top right corner.
As such here is the client code:
This is the top menu above the logo:
<ul class="topnavigation" style="width:1000px; border-bottom-style: none; height: 40px;">
<li class="highlight" style="width:100px; height: 40px; font-family:Calibri; float:right;">Contact Us</li>
<li style="width:100px; height:40px; font-family:Calibri; border-left:1px solid white; border-right:1px solid white; float:right;">Home</li>
</ul>
And this is the menu under the logo:
<ul class="navigation" style="width:1000px; height:40px; border-bottom:none;">
<li style="width:150px; font-family:Calibri; height: 40px; border-right:1px solid white;">About Us</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Applications</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Features and Benefits</li>
<li style="width:200px; font-family:Calibri; border-right:1px solid white; height: 40px;">Technical Specs</li>
<li style="width:150px; font-family:Calibri; border-right:1px solid white; height: 40px;">Contact</li>
<li style="width:145px; font-family:Calibri; border-right:none; height: 40px;">Recognition</li>
</ul>
To highlight which page the user selected I used some javascript (which I have been trying to learn lately) and CSS
JavaScript:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$('.navigation li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
});
CSS:
ul.navigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.navigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.navigation li a:last-child{}
ul.navigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.navigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.navigation li.highlight a
{
color:white;
}
ul.navigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
a, a:visited
{
color:#000;
}
ul.topnavigation
{
margin: 0px;
padding: 0px;
list-style: none;
background-color:#0071BB;
height:34px;
border-bottom:none;
}
ul.topnavigation li
{
float: left;
position: relative;
top: 0px;
left: 0px;
}
ul.topnavigation li a:last-child{}
ul.topnavigation a
{
color:white;
display: block;
padding: 8px 8px;
text-decoration: none;
}
/*background color of LI*/
ul.topnavigation li.highlight
{
background:Darkblue;
}
/*Text color for A*/
ul.topnavigation li.highlight a
{
color:white;
}
ul.topnavigation li:hover
{
color:white;
background-color:darkblue;
background: darkblue;
}
With this implementation if the user clicks on any page it highlights the page. But if they click on the Contact Us in the top corner is only highlights the Contact Us in the bottom menu and not the top menu. I found that strange and is a question in itself for me because I would expect it to highlight the top portion and not the bottom portion. (If anyone can answer that as well I would appreciate it - because I don't see how it is recognizing it).
So, how can I have both the top contact page navigation and bottom contact page navigation highlight at the same time. I am assuming that this will be done with java script and not on the C# code.
I have attempted to combine the two such as
$('.navigation li a' & '.topnavigation li a').each(function () {
but realized this probably wouldn't work because it is indexing. Although I am not sure. I attempted to set them as an "if equivalent" so if both href were the same then it would highlight them. Nothing I have done has worked (although amusingly I have gotten some odd results highlighting other navs).
So, any suggestions? Point me in the right direction? Something I am not seeing or how can this be done? Is this going to be needed to be done in C#? Can JavaScript do it?
Please let me know. This is the first question I have asked so I am frustrated on this.
You really don't need an each here, nor do you need to combine selectors unless you're doing something special based on their root class. You just need a way to match things up. Here is a demo - http://jsfiddle.net/jayblanchard/AEY5h/
EDIT: The original code still works (you need to remove e.preventDefault(); for your site)
$('li a').click(function(e) {
e.preventDefault(); // just for this demo
var thisHREF = $(this).attr('href'); // get the href of the clicked item
$('li').removeClass('highlight'); // remove all the classes
$('a[href="' + thisHREF + '"]').closest('li').addClass('highlight'); // add the class to the items that have the same href
});
To highlight the elements where your page matches up add the following (outside of the above block)-
var currentPage = location.pathname.substring(1);
$('a[href="' + currentPage + '"]').closest('li').addClass('highlight'); // adds highlight to current page element
In the fiddle I have replaced the location info with jsfiddle's info so that both Contact Us elements are highlighted - http://jsfiddle.net/jayblanchard/AEY5h/1/
You can combine jQuery selectors using a comma like this:
$('.navigation li a, .topnavigation li a').each(function () {
Notice that the comma is included inside the single quotes.
jQuery errors, Remove default .highlight class from list-items
In your .topnavigation menu, don't provide preselected .highlight classes.
You have a preselected item with class .highlight, which may be why it appears that your script is working to highlight the item in your .topnavigation menu, but not your .navigation menu.
Also, your jQuery has some errors and I recommend combining selectors since the .each() function is the same for both.
This corrected version should do the trick (if there are no preselected items with .highlight):
$(document).ready(function () {
var str = location.href.toLowerCase();
$('.topnavigation li a, .navigation li a').each(function () {
if (str.indexOf($(this).attr('href').toLowerCase()) > -1) {
$(this).parent().addClass("highlight");
}
});
});
Example JSFiddle: http://jsfiddle.net/gfullam/0rppzomt/
The correct way to combine multiple selectors into one with jQuery is not like this:
$('.navigation li a' & '.topnavigation li a')
but rather like this:
$('.navigation li a, .topnavigation li a')
Here's a link to more documentation on the multiple selector usage. Make that change in your javascript and you should properly be selecting all the elements you're trying to target.
Hi all i applied selectednodestyle for a treeview which works fine when i am not navigating. But on navigating i am unable to see the applied color for the treeview selected node. Here is my design in master page
<asp:TreeView ID="TreeViewCategories" runat="server" ExpandDepth="0" Style="min-height: 200px;
max-height: 500px;" NodeIndent="0" LeafNodeStyle-CssClass="LeafNodesStyle" CssClass="TreeView"
NodeStyle-CssClass="NodeStyle" ParentNodeStyle-CssClass="ParentNodeStyle" RootNodeStyle-CssClass="RootNodeStyle"
SelectedNodeStyle-CssClass="SelectedNodeStyle" LeafNodeStyle-Width="100%" NodeStyle-Width="100%"
ParentNodeStyle-Width="100%" RootNodeStyle-Width="100%" Font-Size="12pt">
<Nodes>
<asp:TreeNode Text="All Items" NavigateUrl="~/Default3.aspx" SelectAction="SelectExpand"
Value="All Items">
<asp:TreeNode Text="Hello" Value="Hello"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
This is my css
<style type="text/css">
.TreeView
{
border-bottom: 1px dotted #B2B2B2 !important;
}
.TreeView div
{
margin-left: 5px;
}
.TreeView table
{
border-top: 1px dotted #B2B2B2 !important;
}
.TreeView div table
{
border-bottom: none !important;
border-top: none !important;
}
.TreeView table td
{
padding: 2px 0;
}
.LeafNodesStyle
{
}
.RootNodeStyle
{
}
/* ALL ELEMENTS */.NodeStyle
{
}
.ParentNodeStyle
{
/*background:yellow;*/
}
.SelectedNodeStyle
{
font-weight: bold;
color: #6799D1;
display: block;
padding: 2px 0 2px 3px;
}
</style>
But i am unable to apply the color for selected node after navigating to a page can any one help me
your codes are working Ok so is the CSS. if you will notice the text of the one youve selected became bold.
If your basis is in change of color of the text, there is some problem. If you would look at the source code, not only SelectedNodeStyle css style is applied on the item, but these also
NodeStyle FooterContent_TreeViewCategories_2 LeafNodesStyle FooterContent_TreeViewCategories_8 SelectedNodeStyle FooterContent_TreeViewCategories_10
so I suggest putting some !important on your css color for the change in color to take effect.
.SelectedNodeStyle
{
font-weight: bold;
color: #6799D1 !important;
display: block;
padding: 2px 0 2px 3px;
}
When I do the following:
<asp:Label CssClass="someField" runat="server">*</asp:Label>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Or:
<span class="someField">*</span>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Css someField:
span.someField {
color: #CC0000;
font-weight: 600;
}
Css for label:
form label {
clear: left;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
margin: 0 3px 4px 0;
padding: 4px 0 4px 5px;
width: 200px;
}
the output I get is
SomeText*
When what I want is
*SomeText
Anyone know why this is happening?
By setting float:left on the label you are taking it out of the flow of the document and causing it to render before the span. You need to either set the span to be a block layout and float it left as well or remove the float from the label.
UPDATE:
There's a good description of what floating does to elements and some considerations here: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Another option
form label:after {
content: "*";
}