Link:- https://stackblitz.com/angular/qmedkbvramy?file=app%2Fcdk-virtual-scroll-overview-example.ts
I am trying angular material scollbar look as in the attached picture. But I can't figure out, how to do this.
Material by default doesn't provide any styles to change the scrolling
You can use this css to change the scrollbar style
cdk-virtual-scroll-viewport::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
Stackblitz demo: https://stackblitz.com/edit/angular-jkw9ac
Related
I have created a sort of 'window' that slides across to reveal more of the image, please see - http://sysmarketing2014.squaresystem.co.uk/
It seems to work across all browsers (apart from IE8 downwards - which I could also do with fixing) and even works on Windows phones and androids. It works in the Safari iPhone User Agent also.
It does not seem to be working on my iPad or iPhone however... they are both running iOS8
Any ideas?
I've solved the issue, it was to do with the box-shadow on iOS.
The iOS devices would not render the box-shadow with a spread size of 2000px. I found that the largest number I could input was around 850px.
Seems to be a problem specific to iOS
.ls-slide .peep {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0 1000px;
z-index: 100;
}
.ls-slide .peep:after {
content: ' ';
position: absolute;
top: 10%;
border-radius: 100%;
width: 300px;
height: 300px;
box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
-webkit-box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
-moz-box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
margin: 0 auto;
left: 0;
right: 0;
z-index: 200;
}
.is-ios-device .ls-slide .peep:after {
-webkit-box-shadow: 0 0 0 850px #72B626, inset 6px 6px 30px -4px #000;
}
I changed the spread value and problem solved.
I want scrollbars to be always visible in IOS. The quick solution is the "::-webkit-scrollbar" fix. However when using "webkit-overflow-scrolling: touch" for the "slide feeling", the scrollbars are not visible anymore.
How can I get them both working?
See the example http://jsfiddle.net/gatb4ct6/5/:
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
/*-webkit-overflow-scrolling: touch;*/
/* uncomment above and scrollbars are not visible on IOS */
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
I was searching for the same problem. It appears that you can use just one of the two options. Scroll auto but with styled scrollbar or fluid scroll but with invisible and not styled scrollbar.
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
Or use the -webkit-overflow-scrolling: touch; and none of the pseudo classes after.
Couldn't find anything in the doc's but perhaps someone knows better or can suggest a work around using available properties to hack it together?
If not in bootstrap does anyone know of a gem (rails) or generator that can create the CSS/jQuery/JS?
You can also try this Bootstrap 3 Nav Wizard version on GitHub, LESS file is included:
https://github.com/acornejo/bootstrap-nav-wizard
demo here: http://acornejo.github.io/bootstrap-nav-wizard/
Preview (orig):
Preview (customized):
Maybe you are looking for this. Check the demo below. Just resize the window if it doesn't look like the image below.
Fiddle
HTML
<h3>Wizard</h3>
<div class="wizard">
<a><span class="badge">1</span> Set Global Properties</a>
<a><span class="badge">2</span> Specify Entry Scheme</a>
<a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
<a><span class="badge">4</span> Check Your Data and Generate Portal</a>
</div>
CSS (or SCSS instead)
.wizard a {
padding: 10px 12px 10px;
margin-right: 5px;
background: #efefef;
position: relative;
display: inline-block;
}
.wizard a:before {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}
.wizard a:after {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
border: none;
}
.wizard a:first-child {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.wizard a:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.wizard .badge {
margin: 0 5px 0 18px;
position: relative;
top: -1px;
}
.wizard a:first-child .badge {
margin-left: 0;
}
.wizard .current {
background: #007ACC;
color: #fff;
}
.wizard .current:after {
border-left-color: #007ACC;
}
Chapter 5 of railstutorial.org (http://ruby.railstutorial.org/chapters/filling-in-the-layout#top) talks about how to create a basic layout for a web site. I use it as a resource for putting a Rails web site together.
I'm having difficulty customizing the navbar/header. While changing the font color of the "sample app" logo is straightforward enough (just change the RGB setting of the color parameter under #logo), how do I change parameters in the rest of the header? How do I change that black bar to be some other color, such as dark blue/green/red/purple/brown/etc.? How do I change the color of the menu links (Home/Help/Sign Up) from the default gray to yellow? Or orange? Or some other color?
If you want to change color or customize style of twitter bootstrap (e.g header, link etc), you can use generator for twitter bootstrap..
Generator
twitter bootstrap generator
StyleBootstrap
bootstrapthemeroller
decioferreira
Or if you don't know class/id potition of style, you can use inspect element on your browser and see element using class/id of style
Example
Header using blue color
.navbar-inner {
min-height: 50px;
padding-right: 20px;
padding-left: 20px;
background-color: #45aeea;
background-image: -moz-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#54b4eb),to(#2fa4e7));
background-image: -webkit-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: -o-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: linear-gradient(to bottom,#54b4eb,#2fa4e7);
background-repeat: repeat-x;
border: 1px solid #1990d5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54b4eb',endColorstr='#ff2fa4e7',GradientType=0);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
box-shadow: 0 1px 4px rgba(0,0,0,0.065);
}
Link header using white color
.navbar .nav>li>a {
float: none;
padding: 10px 15px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 #ce4213;
}
Bootstrap themes
You can see some amazing bootstrap themes here
.navbar {
.navbar-inner {
background-color: #2c2c2c;
background-image: none;
}
}
Source Change background color in navbar fixed menu bar Bootstrap
You can take a look at this too.
I'm trying to place a shadow under a popup panel that defined as follows:
<popupset id="mainPopupSet">
<panel id="autoTagBookmarksPopup" noautohide="true" fade="none" backdrag="true" level="float">
<hbox id="titleBox">
<spacer flex="1"/>
<image id="closeImage" align="end"/>
</hbox>
...
I wasn't succesful with the: box-shadow
any one has sugestions?
Can you paste the css that you were using for box-shadow?
Try this...
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
This is an old question but I had the same issue and want to share my solution so this might be of any help for others.
I have not found a way to place the box-shadow on a panel directly. It seems, that everything visually outside the panel element will be cutted (the shadow is placed outside).
However I then defined the shadow for the first child and added some margin so the shadow will be visible.
For the given example, this might look something like this (untested):
panel#autoTagBookmarksPopup {
background-color: transparent;
border-width: 0px;
}
panel > hbox#titleBox {
margin: 5px;
border: 1px solid #bbb;
background-color: #fff;
box-shadow: 2px 2px 3px #888;
}