//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;
`;
Related
I write a CSS for my own main div:
.main {
height: 0%;
position: absolute;
width: 100%;
z-index: 100;
background: whitesmoke;
bottom: 0;
border-radius: 15px;
padding: 20px;
color: gray;
left: 0;
right: 0;
transition: height 1s ease-in;
}
.visible {
height: 96%;
}
When some state changes in my own program I would trigger .visible CSS class.
But it not working.
Check my React section:
import React, { useContext } from "react";
import styles from "../../sass/DownModal.module.scss";
import { ConfigContext } from "../../context/config";
import { EnumPageFrom } from "../../bussiness/Icon";
function Index({ children }: { children: React.ReactNode }) {
const { setActiveMenu, setBackground, activeMenu } =
useContext(ConfigContext);
return (
<div
className={`${styles.main} ${
activeMenu == EnumPageFrom.MenuAdd && styles.visible
}`}
>
{children}
</div>
);
}
export default Index;
Every stuff are working properly except CSS (.visible) class!
Why and How can I fit it?
Edit
.visible {
height: 96%;
}
.hidden {
height: 0%;
}
.main {
position: absolute;
width: 100%;
z-index: 100;
background: whitesmoke;
bottom: 0;
border-radius: 15px;
padding: 20px;
color: gray;
left: 0;
right: 0;
transition: height 4s;
}
<div
className={`${styles.main} ${
activeMenu == EnumPageFrom.MenuAdd ? styles.visible : styles.hidden
}`}
>
{children}
I breaking a snipped into some sections but transition still doesnt work.
There are a few potential issues that could be causing the .visible class not to be applied as expected:
Make sure that the activeMenu variable is being set correctly and
that the value of activeMenu is what you expect it to be when you
want the .visible class to be applied. You can check this by adding
a console log to print out the value of activeMenu at different
points in your code.
Make sure that the styles object in your React component contains
the correct class names for the .main and .visible classes. You can
check this by inspecting the styles object in your debugger or by
adding a console log to print out the object.
Make sure that the .visible class is being defined correctly in your
CSS. Make sure that the height property is set to a value that is
greater than 0, and make sure that the transition property is set
correctly. You can try adding a different property (such as color or
font-size) to the .visible class and see if it is applied as
expected to help narrow down the issue.
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 am currently trying to make an animation with a welcome message. I want it to be placed in the verticalmiddle of my div. I transform it from a big font to a small font and it seems like the big fonts height is still affecting the positioning or am I wrong?
#barbar{
height:10%;
width: 100%;
background-color:rgba(79, 79, 90, 0.92);
bottom: 0;
position: fixed;
z-index: 3;
}
.hello{
color: black;
font-family: "Times New Roman";
text-align: center;
animation: ease;
animation-name: gas;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration:2s;
position: fixed;
font-size: 100px;
bottom: 700px;
margin-left: -20%;
white-space: nowrap;
}
#keyframes gas{
from { font-size: 500px; bottom: 700px; margin-left: -20%;}
to { font-size: 12px; bottom: 0; margin-left: 15%;}
}
<div id = "barbar">
<h3 class ='hello'> Welocme User </h3>
</div>
As you can see my h3 is inside the div but it still somehow doesn't end up where I want it to be placed. to bottom:-x% is not the soulution im looking for.
Add "margin-bottom: 0;" to your h3 tag.
By default, the browser adds a margin of 1em to h3 elements. Since the "em" unit is relative to font-size, when you add "font-size: 100px" to your element you also get 100px of margin.
I suggest using a CSS reset. It will clear all the browser's defaults, preventing it to add unwanted styles on your page. It also makes sure that your page will look exactly the same in all browsers since different browsers use different defaults. I suggest using meyerweb reset on all your pages.
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.
Is it possible to have the CSS cursor property of a div propagate through a transparent div that overlays it?
Let me illustrate with a mock-up: https://jsfiddle.net/azL1ot2d/
With the following HTML code:
<div id="page">
<div id="clickable">Click me!</div>
<div id="glasspane">
<div id="other">Some glass-pane content</div>
</div>
</div>
And the following CSS code (reduced to the important parts):
#page {
position: absolute;
width: 100%;
height: 100%;
}
#clickable {
position: absolute;
top: 100px;
left: 100px;
background-color: orange;
cursor: pointer;
}
#glasspane {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: transparent;
}
#other {
...
}
Notice how I set the cursor property on the clickable div, but the div is entirely covered by the glasspane div (which I use for effects, dialogs, ...). Is it possible to have the mouse-cursor change to the link-pointer if it hovers above the clickable-div even though the div is covered? In other words: Can I make the glasspane transparent to cursor settings? (I'd prefer not to use JavaScript for this)
Yes you can but there is no IE support, there you go : JSFiddle
The trick is to use pointer-events: none; on the top layer :)
#glasspane {
pointer-events: none;
}