I have a div with this scroll see the image here
but i want this type of scroll for my div see the image here
You can checkout the below URL
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
I'm not sure if all web browsers react the same way, but you can try this:
<style>
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
</style>
Source : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_scrollbar2
Related
I saw this code, when i was checking Drupal Omega 4 theme
%container {
#include container;
#include grid-background;
}
what does the '%container' mean?
what is the '%' for?
https://sass-lang.com/documentation/style-rules/placeholder-selectors
Placeholder Selectors: %foo
Sass supports a special type of selector called a “placeholder
selector”. These look like class and id selectors, except the # or .
is replaced by %. They’re meant to be used with the #extend directive;
for more information see #extend-Only Selectors.
On their own, without any use of #extend, rulesets that use
placeholder selectors will not be rendered to CSS.
Example
SCSS SYNTAX
%toolbelt {
box-sizing: border-box;
border-top: 1px rgba(#000, .12) solid;
padding: 16px 0;
width: 100%;
&:hover { border: 2px rgba(#000, .5) solid; }
}
.action-buttons {
#extend %toolbelt;
color: #4285f4;
}
.reset-buttons {
#extend %toolbelt;
color: #cddc39;
}
CSS Output
.action-buttons, .reset-buttons {
box-sizing: border-box;
border-top: 1px rgba(0, 0, 0, 0.12) solid;
padding: 16px 0;
width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
border: 2px rgba(0, 0, 0, 0.5) solid;
}
.action-buttons {
color: #4285f4;
}
.reset-buttons {
color: #cddc39;
}
SASS
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
#extend %icon;
/* error specific styles... */
}
.info-icon {
#extend %icon;
/* info specific styles... */
}
Output
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/* error specific styles... */
}
.info-icon {
/* info specific styles... */
}
Note
Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.
More info
http://thesassway.com/intermediate/understanding-placeholder-selectors
Tools
If you want to play around Sass please use - http://sassmeister.com/
It's a placeholder selector. It doesn't do anything on its own but can be extended, like an abstract base class.
angular material2 mat-checkbox
How do I modify the left icon size, and the left icon state color?
<mat-checkbox>Like Me.</mat-checkbox>
You can use this ( .mat-checkbox-inner-container ) CSS class to modify the mat-checkbox
.mat-checkbox-inner-container {
height: 50px!important;
width: 50px!important;
}
Note that you need to put the style modification in styles.css root folder (
/src/styles.css ) and not in the components css.
Also put !important ( width: 50px!important; ) to override the
default style.
Below is the default style for the mat-checkbox
.mat-checkbox-inner-container {
display: inline-block;
height: 20px;
line-height: 0;
margin: auto;
margin-right: 8px;
order: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
width: 20px;
flex-shrink: 0;
}
Hope this helps.
If you want to change color then use these in your CSS file
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: black;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: black !important;
}
::ng-deep .mat-checkbox-checkmark-path {
stroke: #000 !important;
}
Hope this css will resolve your issue
to change styles use classes and define them in your scss component file.
When you see that this not work's, use the selectors :host /deep/ before the class name in each of the scss defined classes.
The size of the icons is defined by the font-size not width / height
Hope I helped you
In my project, we overrode sizes of checkboxes and radio buttons to 16px in this way:
body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
height: 16px;
width: 16px;
}
body .mat-checkbox-ripple, body .mat-radio-ripple {
left: calc(50% - 20px);
top: calc(50% - 20px);
height: 40px;
width: 40px;
border-radius: 50%;
}
How can I customize the Firefox DOM Inspector? The white color and the font size makes it difficult to read.
I found a solution. I used Stylish addon
https://addons.mozilla.org/en-US/firefox/addon/stylish/
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document url("chrome://browser/content/devtools/markup-view.xhtml") {
body { background: white !important }
}
The above is a sample for the background only. Another css example is one below.
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
* {
padding: 0;
margin: 0;
}
body {
color: hsl(0,0%,50%);
background: black !important;
}
.text {
color: white !important;
}
.newattr {
cursor: pointer;
}
.selected {
background-color: hsl(0,0%,90%);
}
/* Give some padding to focusable elements to match the editor input
* that will replace them. */
span[tabindex] {
display: inline-block;
padding: 1px 0;
}
li.container {
position: relative;
padding: 2px 0 0 2px;
}
.codebox {
padding-left: 14px;
}
.expander {
position: absolute;
-moz-appearance: treetwisty;
top: 0;
left: 0;
width: 14px;
height: 14px;
}
.expander[expanded] {
-moz-appearance: treetwistyopen;
}
.more-nodes {
padding-left: 16px;
}
.styleinspector-propertyeditor {
border: 1px solid #CCC;
}
}
Source
I need some divs to be center-positioned and to fit their content width at the same time.
I am now doing it like this:
.mydiv-centerer{
text-align: center;
.mydiv {
background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px #0099FF;
color: white;
margin: 10px auto;
padding: 10px;
text-align: justify;
width: -moz-fit-content;
}
}
Now, the last command "width: -moz-fit-content;" is exactly what I need!
Only problem is.. it works only on Firefox.
I also tryed with "display:inline-block;", but I need these divs to behave like divs. Namely, every next div should be under, and not inline, the previous.
Do you know any possible cross-browser solution?
At last I fixed it simply using:
display: table;
Mozilla's MDN suggests something like the following [source]:
p {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
In similar case I used: white-space: nowrap;
Is there a single declaration that fixes this for Webkit, Gecko, and Blink? No. However, there is a cross-browser solution by specifying multiple width property values that correspond to each layout engine's convention.
.mydiv {
...
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
...
}
Adapted from: MDN
I use these:
.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}
I was looking for a way to prevent a long line of text from outgrowing past its container, and max-width: fit-content worked in Chrome, but not in Firefox.
I found a workaround: if the element is the last displayed subelement, setting display: table-caption; and caption-side: bottom; does have the same effect, together with display: table; on the parent object.
Why not use some brs?
<div class="mydiv-centerer">
<div class="mydiv">Some content</div><br />
<div class="mydiv">More content than before</div><br />
<div class="mydiv">Here is a lot of content that
I was not anticipating</div>
</div>
CSS
.mydiv-centerer{
text-align: center;
}
.mydiv{
background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px #0099FF;
color: white;
margin: 10px auto;
padding: 10px;
text-align: justify;
display:inline-block;
}
Example: http://jsfiddle.net/YZV25/
I have the basic functionality of the jquery cycle plugin working. I have set up a test page at here but was wondering what would I need to change in order for the paging to resemble this page
This is how I am calling the paging function, but I do not see anything in the plugin itself that would allow me to enclose the pager links in a
$(document).ready(function()
{
$('.promogallery').before('<div id="promonav">').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 3000,
pager: '#promonav',
before: function()
{
}
});
});
Here is the relevant CSS:
/* promonav styling */
#promonav
{
margin: 5px 0;
text-align: left;
position: absolute;
top: -21px;
}
#promonav a, #promonavcyle strong
{
margin: 0 5px;
padding: 3px 5px;
border: 1px solid #ccc;
background: transparent;
text-decoration: none;
color: #a60000;
}
#promonav a.activeSlide
{
background: #ddd;
}
#promonav a:focus
{
outline: none;
}
/* #output { text-align: left; } */
Try the following in your CSS for #promonav a, #promonavcyle strong
border-style:dotted;