HTML
<section fxLayout="column" fxLayoutAlign="center center" class="vwubble-section" fxFlex="auto">
<ng-container *ngIf="(allBubbles$ | async)">
<cdk-virtual-scroll-viewport #scroller itemSize="355" class="scrolling-container scrollbar-hidden" minBufferPx="1200" maxBufferPx="1200">
<vw-vwubbles-item *cdkVirtualFor="let bubble of allBubbles$"
[bubble]="bubble">
</vw-vwubbles-item>
</cdk-virtual-scroll-viewport>
</ng-container>
</section>
CSS
.vwubble-section {
padding: 0px;
margin: 0px;
padding-top: 20px;
min-width: 100%;
/* padding-top: 300px; */
background-color: #000;
/* margin-bottom: 60px; */
/* height: 1400px;
overflow:hidden; */
}
.mat-form-field-appearance-fill .mat-form-field-flex{
background-color: white;
}
::ng-deep .mat-select-value {
color: #673ab7;
}
.scrolling-container{
/* display: flex; */
min-height: 1600px;
/* flex-grow: 1; */
width: 100%;
max-width:800px;
overflow-y: scroll;
padding: 0px;
overflow-x: hidden;
}
.scrolling-container::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
So these vwubble-items are like tweets, and the scroll gets stuck when the user tries to scroll down on mobile, but the weird thing is that I am using this same scrolling method for the replies to these main threads, and these replies never get stuck ever.
Any help would be much appreciated.
Related
So I've come across this weird CSS-issue in Webkit-based browsers (Chrome, Opera, ...). When I apply overflow:hidden on a parent div and filter:grayscale(100%) (or any other kind of filter), overflow breaks. The elements are not hidden anymore for some reason.
I've tested this on Chrome, Firefox, Edge and Opera. Edge and Firefox don't seem to have this issue, but Chrome and Opera do have it. So I guess it may be an issue with Webkit-based browsers.
I've made a small video to better illustrate the issue (images in the video may differ from the ones in this post, but the effect is the same. The cursor also appears on the wrong places, but it's actually clicking on the arrows and hovering/clicking on the icons. ShareX does not like high-DPI displays, apparently.)
Does anyone have an idea how I can work around this?
HTML
<div id="projects">
<img id="left" src="https://i.imgur.com/8u7Kir7.png">
<div id="scroller">
<figure><a id="portfolio1"><img src="https://i.imgur.com/OU2VsUm.png" alt="BreakingBook"></a></figure>
<figure><a id="portfolio2"><img src="https://i.imgur.com/OU2VsUm.png" alt="BreakingBook"></a></figure>
<figure><a id="portfolio3"><img src="https://i.imgur.com/OU2VsUm.png" alt="BreakingBook"></a></figure>
<figure><a id="portfolio4"><img src="https://i.imgur.com/kml3KaY.png" alt="RedAlert"></a></figure>
<figure><a id="portfolio5"><img src="https://i.imgur.com/kml3KaY.png" alt="RedAlert"></a></figure>
<figure><a id="portfolio6"><img src="https://i.imgur.com/kml3KaY.png" alt="RedAlert"></a></figure>
</div>
<img id="right" src="https://i.imgur.com/RNNpheT.png">
</div>
SCSS
#projects {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
img {
min-width: initial;
max-width: initial;
width: 70px;
height: 70px;
}
#scroller {
width: 330px;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
border: 5px solid black;
border-radius: 25px;
padding-left: 20px;
padding-right: 20px;
figure {
&:first-of-type {
margin-left: 20px;
}
&:last-of-type {
padding-right: 40px;
}
width: 70px;
height: 70px;
margin-right: 40px;
display: block;
a {
filter: grayscale(100%);
line-height: initial;
opacity: .3;
&:hover {
opacity: 1;
}
}
}
}
}
jQuery
$('#projects').find('a').click(function() {
$('#projects').find('a').not(this).removeAttr('style');
$(this).css('opacity', '1').css('filter', 'initial');
});
$('#left').click(function() {
$('#scroller').animate({ scrollLeft: $('#scroller').scrollLeft() - 330 }, 500);
});
$('#right').click(function() {
$('#scroller').animate({ scrollLeft: 330 + $('#scroller').scrollLeft() }, 500);
});
Hi I have a banner which contained in a wrapper. The wrapper is not full width but the banner is.
I wanted to prevent horizontal scrolling and achieved this in chrome by setting the body overflow-x:hidden. However when I check in IE11 you can still scroll to the right by clicking on the screen and dragging right.
Does anyone know how to prevent this behaviour in IE?
body {
background: #ccc;
overflow-x:hidden;
-ms-overflow-x:hidden;
}
section {
box-sizing: border-box;
/* or not */
margin: 0 auto;
width: 25rem;
background: white;
padding: 1.5rem;
}
.full-width {
position: relative;
/* child absolute */
margin: 0 -9600rem;
/* add back section padding value */
padding: .25rem 9600rem;
background: red;
color: white;
font-size: 1.125rem;
z-index: 0;
}
.full-width:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
/* subtract h2 padding */
left: 9598.5rem;
right: 9598.5rem;
background: red;
}
<section>
<h2 class="full-width">Full-Width Bar</h2>
<p>Some content.</p>
</section>
Brief background: I am using Jquery to build Divs if there is information to be built.
I have read a few threads today on stacking Divs, but everything I try just doesn't seem to work.
Given the following Example fiddle (That is what my current solution looks like)
I would like to stack the BAR 2 onto BAR 1, and then BAR 3 onto BAR 2, creating an end result like this:
BAR 3
BAR 2
BAR 1
I know this questions has been asked a lot before, but none of those threads helped me, so I thought I would show my code.
Thanks!
Remove position:absolute from .bar and add some height to it.
Your fiddle updateded: http://jsfiddle.net/4GjrX/1/
HTML
<div class="bars">
<div class="bar-group">
<div class="bar fig2">BAR3</div>
<div class="bar fig1">BAR2</div>
<div class="bar fig0">BAR1</div>
</div>
</div>
CSS
/* Graph Bars */
.bars {
height: 253px;
width: 100%;
}
.bar-group {
height: 100%;
margin: 0 30px;
width: 200px;
}
.bar {
border-radius: 3px 3px 0 0;
cursor: pointer;
height: 0;
text-align: center;
display:inline-block;
width: 150px;
}
/* Graph Bars */
.bars {
position: relative;
width: 100%;
z-index: 10;
}
.bar-group {
float: left;
height: 100%;
margin: 0 30px;
position: relative;
width: 200px;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
}
.bar {
border-radius: 3px 3px 0 0;
bottom: 0;
cursor: pointer;
height: 0;
position: absolute;
text-align: center;
width: 150px;
}
.bar.fig0 {
left: 0;
}
.bar.fig1 {
left: 52px;
}
.bar.fig2 {
left: 104px;
}
How can I make this divider with a logo in the centre in CSS? ! I've been trying but didn't even got close yet. What would be the best way to achieve this.
Thank you!
Update
This needs to be placed on top of a bg image so the gaps around the logo must be transparent.
Sorry guys this one is a little tricky I know...
Here's the PNG
Well, if you're background is totally plain then it's relatively straight forward.
The HTML
<header>
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</header>
The CSS
body {
margin: 0;
background: white;
}
#logo {
width: 200px; /* Width of image */
padding: 40px; /* Creates space around the logo */
margin: 0 auto; /* Centers the logo */
background: white; /* Must be same as body */
position: relative; /* Brings the div above the header:after element */
}
#logo img {
display: block;
}
/* :after pseudo element to create the horizontal line */
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
Working demo here.
EDIT
For situations where the body (or containing div) is not a solid colour, try the following:
HTML
<div id="header">
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</div>
CSS
body {
margin: 0;
}
#logo {
width: 100%;
}
#logo, #logo:before, #logo:after {
float: left;
}
#logo:before, #logo:after {
content: '';
width: 50%;
min-height: 100px; /* height of image */
border-bottom: 1px solid #ccc;
margin-top: -50px;
}
#logo:before {
margin-left: -120px;
}
#logo:after {
margin-right: -120px;
}
#logo img {
float:left;
padding: 0 20px;
}
Working demo here.
OR even an example based on display: table, but this goes a bit wonky when resizing.
http://jsbin.com/ITAQitAv/10/edit
This would be one approach:
.hr {
height: 50px; /* imageheight */
background: #fff url(http://placekitten.com/100/50) no-repeat center;
}
.hr hr {
top: 50%;
position: relative;
}
<div class="hr"><hr /></div>
This would be another:
.hr2{
display: block;
border-top: 2px solid black;
height: 2px;
}
.hr2 img {
display: block;
margin: auto;
margin-top: -31px; /*img-height /-2 + height / 2 */
/* adjustments for 'margin' to border */
padding: 0 20px;
background: #fff;
}
<div class="hr2"><img src ="http://placekitten.com/100/60"></div>
Demos: http://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview
I’m having problems with my CSS. Basically I have a <div> called container which holds all the content of my site. The container runs parallel to a right hand margin of other stuff.
I need the two to align correctly at the bottom. Chrome and Safari show the container height the same and the right hand margin and container both align but in firefox the container is shorter than the right hand margin. Is there anyway I can set a seperate css condition for firefox or another way because it looks silly.
I have tried using height 100% but I can’t use this because I have javascript and other stuff which is hidden and fades in and other reasons.
#container {
/* [disabled]overflow: hidden;
*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* [disabled]float: left; */
width: 960px;
margin-left: auto;
margin-right: auto;
}
body {
/* [disabled]margin-right: auto; */
/* [disabled]margin-left: auto; */
/* [disabled]width: 1010px; */
font-size: 11px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
color:#3F3F3F;
background-color: #F3F3F3;
margin-top: 20px;
overflow:auto;
/* [disabled]float: left; */
}
You could try something like that:
HTML
<div>HEADER</div>
<div class="container">
<div class="content">
<p>Content Area</p>
<p>row#2</p>
<p>row#3</p>
<p>row#4</p>
<p>row#5</p>
<p>row#6</p>
</div>
<div class="sidebar">
Sidebar
</div>
</div>
<div>FOOTER</div>
CSS
.container {
width: 960px;
padding: 10px 20px 20px;
margin: 0 auto;
overflow: hidden;
}
.content, .sidebar {
float: left;
padding: 1%;
padding-bottom: 100%;
margin-bottom: -100%;
}
.content {
width: 68%;
background-color: red;
}
.sidebar {
width: 28%;
background-color: green;
}
This should align the two columns to the same height.
I've made a demo you can try.
EDIT: maybe you could take a look at the article on CSS-Tricks that talk about different valid alternative methods.
Without HTML it's tough to say exactly. What about putting both in a wrapper div that has a definite pixel height, then your #content and #margin divs at 100% height?
#wrapper{
width: 100%;
height: your height in px;
}
#container {
/* [disabled]overflow: hidden;
*/
height: 100%;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* [disabled]float: left; */
width: 960px;
margin-left: auto;
margin-right: auto;
}
#margin{
height:100%;
}
Also, play with all of your CSS in firebug to troubleshoot this. Removing attributes one by one to find a possible problem.