This is my first time using a scrollbar. I have a scrollbar and I want the track - indicated with yellow - to be shorter. Right now on my page it looks silly as the scrollbar goes further then the page itself as the page has curved edges - it sticks out. I want the bar to be cut off a tad on top and bottom and then be centred on this edge of the page. So far I have:
/* width */
::-webkit-scrollbar {
width: 15px; /* for vertical scrollbar */
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #666;
}
::-webkit-scrollbar-track {
background: yellow;
height:40px;
padding:5px 5px 5px 5px;
}
::-webkit-scrollbar-track {
margin-top: 30px;
margin-bottom: 30px;
}
This worked
Related
I'm new to .net core and wanted to know if im doing anything wrong or missing anything to get my Background-clip: text; to work, like it does in any other platforms...
I've also tried to debug this problem in multiple web browsers, such as Chrome and Microsoft Egde.
I've tried Background-clip: text; and -Webkit-Background-clip: text; and nothing seems to work. It says that the text value is not valid for Background-clip
Here's my code: Style.css
.text-container p {
-webkit-text-fill-color: transparent;
font-size: 150px;
background-image: url("https://s31.postimg.cc/yaze1agjv/abstract-background-canvas-249798.jpg");
background-repeat: repeat-x;
background-position: bottom;
background-size: cover;
animation: animate 30s linear infinite;
text-align: center;
margin-top: 17%;
text-transform: uppercase;
font-weight: 900;
width: 100%;
height: 100%;
-webkit-background-clip: text;
background-clip: text;
}
#keyframes animate {
0% {
background-position: left 0px top 10px;
}
40% {
background-position: left 800px top 10px;
}
}
Index.cshtml
<html class="backimg">
<body>
<p class=text-container> Hello World!</p>
</body>
</html>
*** Edit: I tried to debug this problem on another text editor, and this code works fine. Is there something wrong with .NET core when it comes to background-clip: text; ? Online code editor : JSFiddle ( https://jsfiddle.net/2m6pwvqo/14/ )
you are right css syntax for media query, but it's not like that in Razor web page...
you can put extra # sign and try with below
##keyframes animate{
}
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 ;)
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">
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have an asp.net label (lblFriday) and a div next to it. lblFriday is showing the number data retrieved from database table. I want the div next to lblFriday to show a red triangle if the text of lblFriday is a negative number and green triangle if the text of lblFriday is a positive number.
Currently I've set the css class of the div manually with red color. Here is the code,
HTML / ASPX :
<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label>
<div class="arrow-down"></div>
CSS :
.arrow-down
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
}
Any ideas will be helpful.
Thanks.
The first thing that you need to do is adding id and runat="server" attribute to the div so it will be accessible from the code behind.
<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label>
<div id="divTriangle" runat="server"></div>
then you need to fix your css as follows, where arrow-down will show a red triangle facing down and arrow-up will show a green triangle facing up
.arrow-down
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid red;
}
.arrow-up
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid green;
}
then set the CSS class of divTriangle in your code behind based on the value of lblFriday.Text. Let's say the value is a decimal retrieved from database, here's what your code behind should look like:
decimal stockValue = ....; // get the value from database
lblFriday.Text = stockValue.ToString();
if (stockValue > 0)
{
// set css class to arrow-up
divTriangle.Attributes["class"] = "arrow-up";
}
else if (stockValue < 0)
{
// set css class to arrow-down
divTriangle.Attributes["class"] = "arrow-down";
}
else
{
// no css class if stockValue is zero
divTriangle.Attributes["class"] = "";
}
Depending on how you are binding the data to the label, you could do:
<asp:Label ID="lblFriday" runat="sever" Text='<%# Eval("DATA") %>'
OnPreRender="lblFriday_PreRender" CssClass="label_target" />
Then in the code behind:
protected void lblFriday_PreRender(object sender, EventArgs e)
{
Label lblFriday = sender as Label;
decimal d;
if(Decimal.TryParse(lblFriday.Text, out d))
{
lblFriday.CssClass += d < 0 ? " negative" : d > 0 ? " positive" : String.Empty;
}
}
And finish with some CSS:
.label_target.negative::after
{
content: '\25BC';
color: Red;
}
.label_target.positive::after
{
content: '\25B2';
color: Green;
}
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;
}