i'm doing an app and i need help !
I made a modal window, and that modal window will be bigger than 100vh, and i need it to have an scroll-bar, and i give it a scroll bar, but the problem is that, the other main scroll-bar needs to be cut, but i jus don't know how eliminate it
Here's the css code of my modal window, i'm usign styled-components in react
import styles from "styled-components";
// TODO Part
export const TodoMain = styles.section`
width: 100%;
min-height 100vh;
overflow-x: hidden;
overflow-y: auto;
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
`;
export const Todo = styles.div`
width: 80%;
min-height: 150vh;
margin: auto;
border: 3px solid black;
`;
Related
I am trying to use the blur effect in css to blur the background and z-index to stack the logo on the blurred image but the same is not happening my logo is down under the blurred background.Please let me know the issue.
Styled component heirarchy:
<LandingPageContainer>
<Background />
<LandingPageContentContainer>
<Logo src={piattoLogo} />
<ContentContainer>
<Content>Premium handcrafted delicacies</Content>
<Button>Lets go!</Button>
</ContentContainer>
</LandingPageContentContainer>
</LandingPageContainer>
import styled from 'styled-components';
import landingBackground from '../../../../../img/piatto/CustomerLanding/CustomerLanding.jpg';
export const LandingPageContainer = styled.div`
display: block;
width: 100%;
height: 812px;
background-color: #0d0c0c;
`;
export const Background = styled.div`
width: 390px;
height: 526px;
left: -326px;
top: -80px;
filter: blur(2px);
background: url(${landingBackground}) no-repeat center center/cover;
`;
export const LandingPageContentContainer = styled.div`
display: block;
margin: auto;
padding: auto;
text-align: center;
margin-top: -130px;
z-index: 2;
`;
export const Logo = styled.img`
width: 201px;
height: 164px;
`;
`;
Remember z-index only works on positioned elements (relative, absolute, sticky, fixed).
Hi I'm trying to do an animation on hover, without the hover I would like my circle to make 100% of the height and width
and for some reason I am not able to leave my circle with 100% border radius
like this:
code:
export const TeamCard = styled.div`
background: red;
padding: 10px 0;
& .bgCircle {
border-radius: 50%;
padding: 64px;
background: hotpink;
}
`;
export default function App() {
return (
<TeamCard>
<div className="bgCircle" />
<div class="description">
<h3>huhuehu</h3>
<h3>testing</h3>
</div>
</TeamCard>
example:
https://codesandbox.io/s/dry-river-09ft0
Try using the following styled-div:
export const TeamCard = styled.div`
position: relative;
background: red;
height: 300px;
width: 300px;
& .bgCircle {
border-radius: 100%;
height: 50px;
width: 50px;
background: hotpink;
transition: all ease 333ms;
}
&:hover {
.bgCircle {
position: absolute;
top: 0;
height: 300px;
width: 300px;
border-radius: 0;
left: 0;
right: 0;
}
}
& .description {
position: absolute;
bottom: 0;
}
`;
This is making use of absolute positioning to correctly set where the circle should go. In order to make absolute positioning work, the containing element needs to have a position of something other than 'static'.
The transition property is what provides the animation.
I'm using https://www.npmjs.com/package/opentok-react in my application and creating a publisher and subscriber in a div. This is the css:
#videos {
position: fixed;
right: 0;
bottom: 0;
width: auto;
height: auto;
z-index: -100;
min-width: 100%;
min-height: 100%;
overflow: hidden;
//min-height: 720px;
//margin-left: auto;
//margin-right: auto;
}
#subscriber {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
#publisher {
position: absolute;
width: 360px;
height: 240px;
bottom: 10px;
right: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}
The problem is when I pass the subscriber component the props width 100% and height 100% it doesn't obey, it doesn't do what I expect. I expect it to use the full height and widdth of the div with the #subscriber id selector. However it doesn't. Instead if I pass the props as a px value it works. How can I just make the subscriber video componet fit to the size of the container div based on a percentage?
TokBox Developer Evangelist here.
When creating publishers and subscribers, the Opentok-React library assigns the OTPublisherContainer and OTSubscriberContainer classes to the DOM elements so please use them to style to publisher and subscribers, respectively. You can see this in the library code here:
OTPublisher
OTSubscriber
I've also gone ahead and filed an issue on the repo to improve documentation on styling.
I am using Bootstrap widgets and am attempting to create a full screen modal (header sticks on top, footer on bottom, and body scrolls in the middle). I can easily do this with some simple html as outlined here:
https://www.codeply.com/go/DLPXHfEIiS/bootstrap-4-full-screen-modal
However, once I start getting more complex and want to call my own component as the content then it no longer works. The component nests one level down from the modal-content and I believe this is what is breaking the flow. I am attempting to follow the instructions outlined here:
https://ng-bootstrap.github.io/#/components/modal/examples#component
Even in this above example you can inspect it and see the component is nested within the modal-content div.
The effect (when trying to go full screen using the method in the first link above) is that the modal, modal-dialog, and modal-contend all DO go full screen. However, the nested component within the modal component sizes to content despite my attempts to style it to behave.
What obvious thing am I missing here? Thanks in advance and happy Friday.
::EDIT TO OVERRIDE LIMITATIONS IN COMMENTS::
CSS
.gr-modal-full .modal-dialog {
min-width: 100%;
margin: 0;
}
.gr-modal-full .modal-content {
min-height: 100vh;
}
.TS CALLING THE COMPONENT
const journalPopup = this.modalService.open(
JournalPopupComponent,
{windowClass: 'gr-modal-full', backdrop: false});
journalPopup.componentInstance.journal = this.journal;
COMPONENT
import {Component, Input, OnInit} from '#angular/core';
import {NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
import {HttpClient} from '#angular/common/http';
#Component( {
selector: `
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
`,
templateUrl: './journal.popup.component.html',
styleUrls: ['./journal.popup.component.scss']
})
export class JournalPopupComponent implements OnInit {
#Input() journal: any;
constructor(public modal: NgbActiveModal) {}
ngOnInit(): void {
}
}
Have the answer by throwing away the above code and going more old-school. I just used CSS and made the components absolute. As long as the heights of my header and footer don't need to change (which I can control) this does the trick.
Props to John Paul Hennessy and his codepen for giving me the kick I needed at this link: https://codepen.io/yewnork/pen/Kpaqeq
.gr-modal-full .modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.gr-modal-full .modal-dialog {
position: fixed;
margin: 0;
min-width: 100%;
height: 100%;
padding: 0;
}
.gr-modal-full .modal-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 0;
}
.gr-modal-full .modal-header {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 80px;
padding: 10px;
border-radius: 0;
//background: #6598d9;
}
.gr-modal-full .modal-title {
font-weight: 300;
font-size: 2em;
color: #fff;
line-height: 30px;
}
.gr-modal-full .modal-body {
position: absolute;
top: 81px;
bottom: 61px;
width: 100%;
overflow: auto;
}
.gr-modal-full .modal-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 60px;
padding: 10px;
border-radius: 0;
//background: #f1f3f5;
}
I've been fiddling with the css of my slider (which is generated by super simple slider) but I can't get my slider to remain a consistent height when I drag my browser window smaller. What happens is the height gets scaled down proportionally as the window gets smaller. If I hit refresh on a smaller browser window, the height is correct but for some reason when I drag the window to a smaller size, it scales the slider down. Here is the code for the styling of the slider:
.sss {
display: block;
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.ssslide {
display: none;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
.ssslide img {
display: block;
height: auto;
margin: 0;
max-width: 100%;
padding: 0;
position: relative;}
.sssnext,
.sssprev {
width: 30px;
height: 100%;
margin: 0;
position: absolute;
top: 0;
opacity: 0.1;
}
.wedding-product-slidercontainer {
max-width: 100%;
width: auto;
height: auto;
}
I've tried changing the .sss position to static which initially makes it look right but yields problems. I've also tried making the height 800px for.sss and .ssslide but neither of these solutions seem to work. I can put the whole code up on codepen if you need it but I can't seem to figure out what to do.