I found this site for Bootstrap pretty scrollbars. I tried to apply it to my div but nothing happened :
<style>
#collapseVehicules {
height:250px !important;
}
</style>
<div class="collapse scrollbar-primary" id="collapseVehicules" style="padding-left: 15px;padding-right: 15px;overflow-y: scroll;">
<table id="list" class="table table-borderless table-striped table-sm" style="margin-bottom: 0px;width:100%;">
...
</table>
</div>
So what is wrong ?
You need to add the styles in your css. scrollbar-primary isn't a bootstrap css class style.
As shown on the page, they created the scrollbar-primary css class style.
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #fff;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
Related
I was wondering how to incorporate the Animate.css library into the Slideshow example over at W3 Schools.
For example, rather than the abrupt image change of Display: none
Could i instead have one of the Animate.css animations play instead?
For example: To zoom out the image, then have the next image zoom in? Or fade? Slide? etc
How could i accomplish this?
Thanks
The W3 Example:
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
I want to create tooltip with vue's style binding. I am thinking to use attr() function from CSS which takes attribute value which is a reactive object dynamicColor. The code which I have now is:
<div class="test">
<span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.marker::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: attr(color) transparent transparent transparent;
}
</style>
But it does not work. I don't want to use bootstrap due to some reasons. I tried to look if I can find for pseudo selector in vue style binding but could not find much. Any ideas on how to achieve this? Thanks.
As suggested by #Stephan-v in comments, I added separate element for arrow. The final code looks like something below:
<div class="test">
<span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
<span class="marker" :style="{'background': dynamicColor}">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.markertip {
content: "";
position: absolute;
top: -45%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
}
</style>
Tried two approaches to achieve vertical align text next to responsive image each in a separate .col-md-*
on the child element
.vcenter {
min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}
and a parent child using table-cell method
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
but as image on left is responsive how do I get to work without a fixed height.
fiddle : https://jsfiddle.net/silko/jr3b8kL5/13/
just add line-height: 400px; to your .child class it will make the text vertically centered.
Note: you can use calc and vw and vh to make it flexible, e.g. line-height: calc(30vw + 30vh);
.vcenter {
min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
p{
display: table-cell;
height: 400px;
vertical-align: middle;
}
<div class="col-sm-6">
<picture><img src="http://placehold.it/400x400" class="ccm-image-block img-responsive bID-214"></picture>
</div>
<div class="col-sm-6">
<div class="parent">
<div class="ccm-custom-style-main49 child">
<p>vertical center text when more than one lineihfoiwvowiWOiehfiwhfpwHFPwofhpofhpfhpifhhvciuvcivuwcviwucvwicuwvcwiucvcwuicvwicvwicuwvcwicuvwicuvwicvwciuwcviwcuwv</p>
</div>
</div>
</div>
</div>
Update: if your text contains multiple lines then you should set the text container's display property to table-cell and then you can set vertical-align: middle.
I need to add this image at the end of a line, in this way
Style:
h4 { border-bottom: 1px solid black; font-size: 1.6em;}
Code that I did:
<h4>Socializziamo <img src="flourish-decoration.png"
style="position:relative; display:inline-block; float:right;bottom:-7px;" />
</h4>
Is there a better way, because my solution sometimes does not works...
Riccardo
Here's an alternative to ggbhat's answer. The approach here is to apply relative positioning on the heading and absolute positioning on the nested image.
HTML
<h4>
Socializziamo <img src="http://i.stack.imgur.com/68LQd.png" />
</h4>
CSS
h4 {
border-bottom: 1px solid black;
font-size: 1.6em;
position: relative;
}
img {
position: absolute;
right: 0;
bottom: -1px;
}
Demo
http://jsfiddle.net/LqvTx/1/
Use :after psuedo element for adding background image .
h4
{
border-bottom:1px solid #000;
width:100px;
}
h4:after {
content:"";
background:url(http://i.stack.imgur.com/68LQd.png)no-repeat;
width: 30px;
height: 30px;
background-position:68% 25%;
position: absolute;
display: inline-block;
}
Demo:[http://jsfiddle.net/LqvTx/ ]
I have setup a fiddle for my issue Fiddle. What my requirement is? I need the header and the background image to be fixed only. The content should be scrolling, and the footer should also scroll with the content.
CSS
body{
margin: 0;
}
header{
height: 50px;
background: black;
width: 100%;
}
section{
background: url(http://dummyimage.com/600x400);
height: 400px;
repeast: no-repeat;
}
footer{
height: 50px;
background: black;
position: fixed;
width: 100%;
}
.clearfix{
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
border: 5px solid #fff;
}
HTML
<header></header>
<section>
<div class="clearfix">
What my requirement is? I want the footer and background image to be position fixed and the footer should be scrolling with the large content.
</div>
</section>
<footer></footer>
Thanks guys.
Use overflow:scroll; to scroll your content
.clearfix{
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
border: 5px solid #fff;
overflow:scroll;
}
You can write your footer inside your div, this will scroll the footer with content