I want to make it "scrollable" when the user add a comment.
this is the css code:
.contenu_post{
width:700px;
height:500px;
background-color:white;
float:right;
margin-right:80px;
margin-top:20px;
text-align:center;
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
}
And my html code:html code source
its the the class "post_user" in the html code I want to be "scrollable"
Thanks you for both of you! :)
Like Michael Coker said, use overflow-y: scroll; on the content you want scrollable. And as Fred said, it's pretty hard to know exactly where that should go without more information about your markup structure.
edited
Related
I want to create a dictionary-like feature where I want to design a custom scroll bar.
I can customize it using CSS but it is up to some extent. I can't achieve what I want.
Any help is appreciated.
This is what I want
This is what I can able to customize (ignore color)
.scrolling-area::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 12px #fff;
border-radius: 0px;
background-color: transparent;
border-left: 4px solid $primary;
border-right: 4px solid $primary;
}
.scrolling-area::-webkit-scrollbar-thumb {
border-radius: 20px;
-webkit-box-shadow: inset 0 0 px #fff;
background-color: #fff;
}
Note:
I saw one jquery plugin offer this type of scrollbar
But I want to do it using vanilla js or vuejs specific solution also appreciated.
I have slide toggle animation effect for a toast message, toast message have box-shadow in CSS, but whenever the toggle happens box-shadow looks weird and back to normal when the slide completes
HTML
<div class="alert-toaster" style="display: none;">Add to Playlist</div>
<button id="toggle">
Toggle
</button>
CSS:
.alert-toaster {
width:150px !important;
height:40px !important;
height:auto;
position:absolute;
right:2%;
background-color: #C9234C;
color: #F0F0F0;
padding:10px;
text-align:center;
border-radius: 20px 0 0 20px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
-moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
}
JS
$(document).ready(function() {
$("#toggle").click(function(){
$(".alert-toaster").show("slide", {direction:"right"}, 500 );
setTimeout(function(){
$(".alert-toaster").hide("slide", {direction:"right"}, 500 );
},2000);
});
});
Fiddle example
It looks very weird to me, any suggestion?
Just add margin: 10px 0 10px 10px; to create enough space for your label.
.alert-toaster {
width:150px !important;
height:40px !important;
height:auto;
position:absolute;
right:2%;
background-color: #C9234C;
color: #F0F0F0;
padding:10px;
text-align:center;
border-radius: 20px 0 0 20px;
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
margin: 10px 0 10px 10px;
}
https://jsfiddle.net/mrwsgs58/3/
Managed to fix it with a small css rule.
.ui-effects-wrapper {
overflow: visible !important;
}
JQuery wraps your element with a div to which it applies an overflow: hidden during the animation.
Maybe you can find an option to avoid that.
EDIT:
It might not be the best solution though. You'll have some bad side effects with this.
Try to add a wrapper yourself, to which you add the drop-shadow. Still animate the inside div.
Here's a solution https://jsfiddle.net/xfn1j9hs/ without using jquery for the animation, but CSS only.
I am making a zoomable div, when a user hovers over one of the divs then that specific div zooms, this currently works...
My issue is mainly with Safari when using CSS zoom, all of the contents within the div jump, at first it scales nicely and then the contents jump down to their original size, this issue does not occur in either Firefox and Chrome.
Here is my css of the main zoomable div :
MAIN DIV
width:740px;
height:150px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
margin: 0 auto;
left:0;
right:0;
position: relative;
margin-bottom:10px;
transition:100ms;
font-family: Rubik;
MAIN DIV HOVER
border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
zoom:102%;
-ms-zoom: 1.02;
-webkit-zoom: 1.02;
-moz-transform: scale(1.02,1.02);
transition: 250ms;
I have made a JS fiddle to show the issue, the contents are messed up and this would normally be PHP generated, you can see the issue though when you hover over the wrapper using safari, with firefox the hover zoom effect is perfect and with chrome the content zooms however there is no transition. Thanks for any help
https://jsfiddle.net/04t5psbu/
Please understand, this is not an issue with making the div zoom... that works, my problem is with the content within the div, as you hover over the div all content within the div zooms together, this works perfectly in firefox, please check the fiddle using safari
Use transform instead of zoom. Remove extraneous curly braces { / } from HTML.
#coupon:hover {
border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
-webkit-transform: scale(1.02,1.02);
-moz-transform: scale(1.02,1.02);
transition: 250ms;
}
You have simply forgot to add -webkit-transform: scale(1.02,1.02);, which is the web browser engine to use for Safari.
Here is the working fiddle.
I'm using ouwl carousel for the home page carousel.
here you have the example
The problem is the white border created on the bottom and the right parts.
I've read that applying: display:block; line-height:0;
but nothing worked
here you have a fiddle (it works fine sometimes, no border (i don't know why)) with only the carousel, for testing if you want.
Move the window size of the result for better experience with the carousel images.
I'm aplying the shadow to the div converted to carousel:
#carousel{
position: relative;
width: 100%;
box-sizing:border-box;
background-size: 100%;
height: auto;
display: block;
text-align: center;
margin-top: 5px;
line-height: 0;
-webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
-moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
}
You can try to give the .owl-wrapper-outer the box-shadow (only works if your images are the same size).
If your images are smaller, then give the images a box-shadow and .owl-item a padding, if the box-shadow is cut off.
I have the following HTML code. http://jsfiddle.net/Lijo/wJX9C/
I need to align the contents (“HAI” and button) as center aligned. How do we correct it?
Note: It need to work in IE7, Chrome
<html>
<div id="popup" class="popup">
<div id = "poupContentLine1" class="poupContentLine">
HAI
</div>
<div id = "poupContentLine2" class="poupContentLine">
<input type="submit" name="ctl00$detailContentPlaceholder$btnClose" value="CLOSE" id="detailContentPlaceholder_btnClose" />
</div>
</div>
</html>
Style
.popup
{
width:530px;
background-color:#ffffff;
border:3px solid Orange;
padding: 10px 5px 10px 5px;
margin: 0px 0px 0px 0px;
}
poupContentLine
{
width:530px;
height:auto;
text-align:center;
margin: 0px 0px 0px 0px;
}
you missed a .
.poupContentLine
since it's a classname — example fiddle: http://jsfiddle.net/wJX9C/2/
First, remove the popupcontentline styling; it's unnecessary. Then add text-align: center to .popup. Also, shorten it to margin: 0; (irrelevant to your problem, but all those "0"s aren't necessary and lengthen your code.)
Example: http://jsfiddle.net/wJX9C/10/
.popup
{
width:530px;
background-color:#ffffff;
border:3px solid Orange;
padding: 10px 5px 10px 5px;
margin: 0;
text-align:center;
}
Note: the HTML can also be simplified, but I didn't do anything with that.