I'm working on a React project, and I need to add a semi-transparent, fullscreen, persistent image overlay. How can I do this? Any positioning stuff that I've tried before (including position: absolute have resulted in other screwed-up formatting.
Here's where I'd need it to go:
render() {
return (
<div>
{/* // overlay goes here */}
<div className="App" ref={ div => this.appElement = div}>
<div className = "Panels" ref={ div => this.panelElement = div}>
{this.instantiatePanels()[this.state.currentDisplayedIndex]}
</div>
</div>
</div>
);
}
Maybe something like this? I've used position: fixed so it covers the entire scrolling area.
Related
I am trying to create a website using React and Tailwind for the first time.
I want to display a Hero Section at the top and Nav bar at the bottom of the screen.
My strategy for doing this would be to have two separate divs. The hero section at 80vh and the Navbar at 20vh to cover the full page.
When trying to set this up I am trying to set my Hero Component up as such:
const HeroSection = () => (
<div className="h-4/5 bg-green border-nft-gray-1">Hero Section</div>
);
export default HeroSection;
I am using the documentation of h-4/5 for 80% screenspace as document here:
https://tailwindcss.com/docs/height
Unfortunately the front end does not show this effect and here is the result, the Hero Section is the green div, it does not fill 80%vh but remains as big as high as the content.
Here is where the app is being compiled:
const Marketplace = ({ Component, pageProps }) => (
<NFTProvider>
<HeroSection />
<Navbar />
</NFTProvider>
);
export default Marketplace;
And here is the Provider im using to transfer data that wraps the two components and what is returns
return (
<NFTContext.Provider value={{ nftCurrency, buyNft, createSale, fetchNFTs, fetchMyNFTsOrCreatedNFTs, connectWallet, currentAccount, isLoadingNFT }}>
{children}
</NFTContext.Provider>
);
From I can tell this is not interfering with the CSS in any way, what am I doing wrong in regards to tailwind and how do I achieve my desired composition?
Thanks alot
You have set the height of your div (hero section) to h-4/5 which is indeed 80% height. But that height is only relative to its parent window. In order to do the styling you're thinking of you have to specify that you want the height of the whole viewport.
So change it to <div className="h-[80vh] bg-green border-nft-gray-1">Hero Section</div>
Instead you can provide the height when you use the components.
const Marketplace = ({ Component, pageProps }) => (
<NFTProvider>
<HeroSection className="h-4/5" />
<Navbar className="h-1/5" />
</NFTProvider>
);
export default Marketplace;
And remove h-4/5 from the herosection component itself .
I am building a project based on this React Template.
In one of the componenets I have a Select List and under it there's a Card element.
The problem is that when I click on the list the items appear under the card element as you see below:
I had a feeling this was caused by the CSS code of the template itself that configures the card to appear over all other elements.
So what I did is I created a new react project with:
npx create-react-app
And my suspicion was right.
I copied basically the same code:
const selectStyles = {
control: (styles) => ({ ...styles, backgroundColor: "white" }),
option: (styles) => {
return {
...styles,
backgroundColor: "green",
"z-index": -5,
};
},
};
export default class App extends Component {
render() {
return (
<Fragment>
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
styles={selectStyles}
/>
<Card
style={{
position: "absolute",
"background-color": "red",
"z-index": 5,
}}
>
<CardImg
top
width="100%"
src="/assets/318x180.svg"
alt="Card image cap"
/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Fragment>
);
}
}
And the select items appear ABOVE the card:
The card is colored in red.
CONCLUSION: The problem is caused by the card css code of the template.
As you see, I tried with different configurations with the z-index attribute, but to no avail.
Any idea how to fix this?
The problem is with the z-index and position, whichever content you want to show in the top should have higher z-index value.
Try giving the select dropdown the high values compared to card.
Try removing both css attributes position: absolute and z-index if it is not needed. Position absolute is only used when to need to move the content to wherever you want to the respective relative parent container. So if you are just practicing and not doing design try to remove both.
I have a lot of divs, they are the same but the data are differen(I use variable(array of objs) and for loop) but these details aren't important
<div class="item_wrapper">
<div class="item_wrapper_info">
<div class="left-line"></div>
<div class="subject">1</div> <== click here
</div>
<div class="additional_info"> <== display this block
some text
</div>
</div>
I want to achieve this:
If I click .item_wrapper_info div then I want to show .additional_info div
It should be probably done using this keyword.
If I click . item_wrapper_info block I want to find a div with the class name of . additional_info and make display = flex but I don't know how to trigger exactly its . additional_info div.
Probably I can click on .item_wrapper_info > . subject and then show its next neighbour
SOLUTION:
$(document).ready(() => {
$(".item_wrapper").click(function(){
var index = $(".item_wrapper").index(this); get index of a certain clicked .item_wrapper element on my page
$('.additional_info').eq(index).toggle(); using .eq toggle that certain element
});
})
It works for me
I haven't tested this code. Feel free to test it in a runnable snippet.
$(document).ready(() => {
$(".item_wrapper").click(function () {
var index = $(".item_wrapper").index(this)
$('.additional_info').eq(index).css("display","flex");
});
});
I'm trying to create a div which has the initial text loading... inside of it, and can later be overlapped by new elements that are loaded into it. Here's what I'm dealing with:
<div class="results" style="position:relative;" *ngIf="showResults">
<!-- show 'loading...' before the results load, which would then overlap this text -->
<div stlye="position: absolute; z-index: -1;">Loading ...</div>
<!-- angular2 loop to asynchronously load results -->
<div *ngFor="let loc of searchLocations | async" (click)="selectLocation(loc)" class="search-result">
{{ loc.name }}, {{ loc.adminName1 }}, {{ loc.countryCode }}
</div>
</div>
But when I run this, here's what I get something like
so my 'loading...' text has it's own boundry, when i want those proceeding elements to overlap ontop of that text. How can I accomplish something like this?
You could create a boolean for the loader.
export class YourClass(){
isLoading:boolean = true;
constructor(){
// Not sure how you are implementing your GET Request
// So no point in trying to replicate that, just where ever
// you assign searchLocations to an object
// fetch data logic ends with => {
isLoading = false;
}
}
}
Then in your html you just need to add an *ngIf
<div style="position: absolute; z-index: -1;"
*ngIf="isLoading">Loading ...</div>
You could even even make the loader a component to use anywhere, or you could hook into the showResults variable, as long as you place the loading div outside the showResults div with an attribute of *ngIf="!showResults" , which might mean a bit of a style tweek.
I am new to react and I have a react component structure like:
<MainComponent>
<Button />
<Content />
</MainComponent>
Now when I click on the Button, I need to replace the existing div (say div1) of the Content component with another div (div2). Can you please tell me how to do it. Thank you.
Note: Till now, on click event I have been changing the data of the single div using state and prop. Now I got to replace the whole div with another one.
Like this.
render() {
var returnIt;
if (useDivOne) returnIt = (<div id='one'></div>);
else returnIt = (<div id='two'></div>);
return (returnItj);
}
If this is your structure:
<MainComponent>
<Button />
<Content />
</MainComponent>
and Content renders something like:
<div>
this is div 1
</div>
I would think you would need to pass a prop to Content that would tell you which div to render, then in Content's Render you manipulate the properties of Boolean logic to present a different component:
class Content extends Component {
render() {
return(
{
!this.props.RenderDiv2Bool &&
<div>
This is Div1 and it will be rendered
because RednerDiv2Bool is false.
</div>
}
{
this.props.renderDiv2Bool &&
<div>
This is Div2 and it will be rendered
because RednerDiv2Bool is true.
</div>
}
)
};
}
Not necessarily better but just another way to do it.