I am trying to build a component inside a wrapped styled component. The Styled component would be circular in shape and inside that I need to embed my component. Can someone please guide on what kind of styles I can apply to Styled component to make it circular ?
For example, before I had tried to make it a rectangular styled component and had given it below properties:
const IconContainer = styled.div`
margin: 0 0 0 -15px;
padding: 16px;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
justifycontent: center;
align-items: center;
Related
//Main.js
<SpanStyle className="texting-container">
<div className>Click Me</div>
</SpanStyle>
The component SpanStyle uses class tag "texting-container" to set the CSS attribute:
// sample.css
.texting-container {
pointer-events: none;
margin: 0%;
margin-bottom: 0%;
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
}
As of now ,setting pointer-events: none is the only way I can set my text tag to be able to "click through" the button it is nested within
The problem is, I'm using Styled Components in my project and instead of using the CSS method like I mentioned, I tried setting the same CSS attribute within the styled component definition, however it doesn't work at all (unlike the former method). Here is the styled component, hopefully somebody can direct me to why it isn't working as intended:
//Main.js
const SpanStyle = styled.span`
position: absolute;
top: 49%;
left: 37%;
transform: "translate(-50%, -50%)"
pointer-events: none
cursor: none;
`;
I'm currently using stylesheet for my style in react-native. I found a css style that I need for my component unfortunately it has an :after and :before in css. How to use :after and :before in stylesheet in react-native.
Here's the sample css code that I'm trying to convert into react-native style sheet:
.ticket:before,
.ticket:after {
content: '';
display: block;
position: absolute;
top: 130px;
width: 60px;
height: 60px;
border-radius: 50%;
z-index: 2;
}
.ticket:before {
background: white;
left: -30px;
}
.ticket:after {
right: -30px;
background: white;
}
Css pseudo selectors such as ::after or ::before do not work in react-native, but if you want your styles to look as close to css as possible I would recommend using something like Styled Components. It works on both web and react-native.
I've looked at all the previous questions/answers but none have seemed to work for me.
Im trying to get the background to cover the entire page, however, it does not seem to be working with styled components.
What I want to do is create 3 divs of height: 100vh and width: 100vw and scroll through them.
Below is the code
export const MainContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 0;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: ${(props) => props.color};
overflow: scroll;
`;
And this is how im calling it:
export const MainPage = () => {
return (
<>
<MainContainer color="green" />
<MainContainer color="red" />
<MainContainer color="blue" />
</>
);
};
I've tried using position: fixed and position: absolute. And while they do cover the page, I lost to ability to scroll through the divs (they all end up on top of each other)
This is what its looking like when im scrolling through the page. Any help would be really appreciated.
I'm trying to set up a landing page with a hero image as the background. I'm attempting to have two columns next to each other around the center of the screen. My plan was to use the body tag in CSS to set the background-image and set position: relative so that I could later use position: absolute for the columns with text in them to be in the center of the image/screen. However, I'm using React and I used the index.js component to set it to relative and to set the background and I then added a Home component That will contain the rest of the landing page, beginning with the two columns that must be set with position absolute.
In index.js styles component
body{
background-image: url(../src/assets/HeroImage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
In Home styles component
.heroimage-text-container{
background-color: red;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
What happens by trying it this way is that the heroimage-text-container disappears when the position is set to absolute. I know this would not be happening if this was all within the same component so I'm hoping someone here could help me fix this. Thank you.
You should use flex box in this case. Absolute using the same class it will be overlapped because they will have the same properties.
body {
background-image: url("https://images.unsplash.com/photo-1506716442075-1e2e0e5b1256?ixlib=rb-1.2.1&auto=format&fit=crop&w=1343&q=80");
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.App {
font-family: sans-serif;
text-align: left;
display: flex;
flex-direction: row;
}
.heroimage-text-container {
background-color: red;
height: auto;
margin: 10px;
padding: 10px;
}
Take a look at the sandbox
https://codesandbox.io/s/bold-tdd-d39oc
I am building a ReactJS app and using Zurb Foundation 6. I am also using React Modal: https://reactcommunity.org/react-modal/#documentation.
I want to style the Modal launched through React Modal to look like Zurb Foundation's Reveal. The Reveal SASS looks like this:
// 28. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
And my Modal CSS is like this:
.modal {
position: absolute;
width: 600px;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
background-color: $white;
}
.OverlayClass {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba($black, 0.45);
}
How can I achieve this? I have been experimenting with #include, but no success. At the moment, the Modal I have is not aesthetically pleasing. Help is greatly appreciated.
.your-modal {
#extend .reveal;
/* write your custom css here */
}
instead of using .reveal, now you just need to use the start .your-modal for a modal container.
The foundation section you have there is just the config variables for the reveal. The rest of the .scss for the reveal is here https://github.com/zurb/foundation-sites/blob/develop/scss/components/_reveal.scss
You should be able to structure the rendered HTML from your component to match the elements and classes from Foundation, just avoid the Foundation JS.