I created a wrapper for my app in React. I am trying to get the footer to stay at the absolute bottom of the page but when the children render, the footer stays at the original bottom of the page and does not resize with the page. Code below. (imagine a scrollable page with a footer in the middle now after child renders).
import React, { Component } from 'react';
import Header from "./Header";
import Footer from "./Footer";
export default class Wrapper extends Component {
render() {
return (
<div className="app-wrapper">
<Header/>
<div className="content">
{this.props.children}
</div>
<div>
<Footer/>
</div>
</div>
);
}
}
I'm not that good at CSS. Any ideas as to what I could try? I have already tried googling around for solutions to no avail.I have tried the basic solutions such as position:relative; left:0; bottom:0; right:0; position: fixed, position: absolute etc.
You should give position: relative|fixed (depending on your needs) to the parent container.
For exemple :
<div style={{ position: 'fixed', bottom: '0' }}>
<Footer />
</div>
HTML dock to bottom
sorry for the confusion guys. I had the style redefined in my css file so my styles were being overridden. :(
Related
I am trying to add some small .png icons in a horizontal row in a main container. I am struggling to figure out the easiest way to go about doing this
Here is a code sandbox of what I have created so far
https://codesandbox.io/s/broken-dew-76c4rf
I have been struggling with this for a while now and I cannot seem to get it. I have tried creating a div, inserting tags in the div but I don't think this is correct. Any help is greatly appreciated!
Do like this
First import the img_path at the top
import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";
Then define a div with style flex flex-direction:row like this
<div className="img-container">
<div className="img">
<img src={imgurl1} alt="aws" />
</div>
<div className="img2">
<img src={imgurl2} alt="c" />
</div>
<div className="img3">
<img src={imgurl3} alt="java" />
</div>
</div>
and style like this
.img-container {
display: flex ;
flex-direction: row ;
}
.img1, .img2 ,.img3 {
/* any style for the images */
background-color: black;
}
Just set the style from the div with the images to display: 'flex', flex-direction: 'row'
I am implementing React-accessible-accordion in my React application.The click functionality is working fine however, I do not see the arrow icon appearing on the accordion. I tried to compare it with the DOM structure shown in the example in npm and I see the div for the icon itself is not getting added to my DOM.
My code-
import React from 'react';
import ReactDOM from 'react-dom';
import {
Accordion,
AccordionItem,
AccordionItemTitle,
AccordionItemBody,
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';
<div className="container">
<Accordion>
<AccordionItem>
<AccordionItemTitle>
<h4>Hello, This is me..</h4>
</AccordionItemTitle>
<AccordionItemBody>
Some Text
</AccordionItemBody>
</AccordionItem>
</Accordion>
</div>
The arrow icon comes from the
<div class="accordion__arrow" role="presentation"></div>
and this is not getting added for me. Any reason why is that happening. I am using the exact demo code shown in on npm site.
Link I have referred-
https://www.npmjs.com/package/react-accessible-accordion
In my knowledge, the only thing I have not added is,
document.querySelector('[data-mount]')
Is that the reason my arrow icons are not loading?
I am not sure if this is an open bug but the examples shown has these icons in each of the accordion.
Did you import the CSS style ?
// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';
Adding below in AccordionTitle, solves the issue-
<h3 className="u-position-relative">
Accessible Accordion
<div className="accordion__arrow" role="presentation"/>
</h3>
You need to do couple to things to make it work:
1] You need to copy all the contents of this file'react-accessible-accordion/dist/fancy-example.css'; to another file because we going to override some classes.
2] You need to add a div in the AccordionItemTitle
<AccordionItemTitle>
<h4>Hello, This is me..</h4>
<div className="accordion__arrow" role="presentation" />
</AccordionItemTitle>
3] in the stylesheet you createdm type the following styles
.accordion__item {
position: relative;
}
.accordion__arrow {
display: inline-block;
width: 24px;
height: 12px;
position: absolute;
top: 40px;
right: 15px;
margin-top: -6px;
}
The toggle button should appear after that.
add yhis piece of code
<AccordionItemTitle>
<h3 className="u-position-relative">
Accessible Accordion
<div className="accordion__arrow" role="presentation" />
</h3>
</AccordionItemTitle>
i'm new to ReactJs and my question may seem stupid to many of you, but i have a problem with setting the background. My React code is:
<header className="masthead ttt">
<div className="overlay"></div>
<div className="container">
<div className="row">
<div className="col-lg-8 col-md-10 mx-auto">
<div className="site-heading">
<h1>Blog Name</h1>
<span className="subheading">blablablablabla</span>
</div>
</div>
</div>
</div>
</header>
So basically i'm trying to set an image as background in my header , so i created a class .ttt and modified it to my css that way :
.ttt{
background-image: url("../img/home-bg.jpg");
}
And finally here's the way the folders are set :
Am i doing anything wrong in my code ? Or there's another way of doing things in ReactJS!
Thanks!
So far what I understood from your problem is that you are not getting the image on the front-end. While checking it through developer options it must be pointing you to a blank div at the top of the screen.
If that's the case then it is because that every background image needs some size to be displayed.
You can either give width and height or you can give background-size property as follows:
.ttt{
background-image: url("../img/home-bg.jpg");
width: 100%;
height: 100%; // giving height is not compulsary but just for good practice.
}
OR
.ttt{
background-image: url("../img/home-bg.jpg");
background-size: 100% 100%; // First value: {Width} Second value: {Height}
}
This would resolve your issue.
Use inline css in javascript like this:
import Background from '../img/home-bg.jpg'; // make sure path is correct
<header className="masthead" style={{ backgroundImage: `url(${Background})` }} >
ref Be mindful of using backgroundImage instead of background-image
Working for me
<div className="drag-dashboard" style={{ backgroundImage: `url(${config.DESTINATION_MEDIA_CDN+ "assets/icons_skining/upload_placeholder_skining.png"})`}}>
</div>
I have the following angular component lets call it child-component
<div>
<a-component-tag></a-component-tag>
<router-outlet></router-outlet>
</div>
which is itself being rendered into another router-outlet like this
<div>
<top-component></top-component>
<router-outlet></router-outlet>
<div>
I would like the component that is rendered in the first router-outlet above to either render below a-component-tag or cover a-component-tag, depending on the user clicking a maximize, minimize button. It shouldn't cover anything but a-component-tag (i.e. it should not cover top-component).
This component is defined by
<div id="thiscomp" [ngclass]="max?cover:minimize">...</div>
I tried to define these two classes as
.cover{
position: absolute;
top: 0;
left: 0;
z-index:100;
}
.minimize {
margin-top:30px;
}
but the cover class is not working: Some of the subcomponents in the thiscomp div are rendered above some stay minimized.
You're trying to change the order in which two DOM elements appear -- there are better techniques than absolute positioning available for that.
The javascript in this example is just for demo; the work is being done in the CSS:
document.getElementById("example").onclick = function() {
document.getElementById("container").classList.toggle('flip');
}
#container {display: flex; flex-direction:column}
#container.flip {flex-direction: column-reverse}
<div id="container">
<div class="componentA">Component A</div>
<div class="componentB">Component B</div>
</div>
<button id="example">Toggle</button>
I have an angular2 application using the Angular2-material library for styling. I'm trying to add a FAB (Floating Action Button) to hover in the right corner of the application, but it's fixing itself to its parent component, and not the window.
The hierarchy of the application is as follows:
app.component
|-detail.component
Within the app.component template, I am using the md-sidenav-layout directive with router-outlet in the body of the layout directive:
<md-sidenav-layout>
<md-sidenav #sideNav (open)="closeStartButton.focus()">
<router-outlet name="navMenu"></router-outlet>
<br>
<button md-button #closeStartButton (click)="sideNav.close()">Close</button>
</md-sidenav>
<md-toolbar color="primary">
<button md-icon-button (click)="sideNav.toggle()">
<md-icon class="md-24">menu</md-icon>
</button>
<span>{{title}}</span>
</md-toolbar>
<div role="main">
<router-outlet></router-outlet>
</div>
</md-sidenav-layout>
Inside the detail component template, I have the following at the top of the template:
<button md-mini-fab class="fab" (click)="toggleAdd()">
<i class="material-icons">add</i>
</button>
And the css for that component:
.fab {
display: block;
position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 10;
}
However, when I navigate to the detail page, the .fab is positioned relative to the component, not the window. I've tried using encapsulation: ViewEncapsulation.None on the detail component, but that doesn't affect it either. Is there a way to keep the fab defined within the detail component, but have it still be fixed relative to the window?
Look for something applying a CSS transform up the chain. In my case I was applying a transform via Angular animations. Apparently transform breaks position:fixed. Why does `transform` break `position: fixed`?
I hope I can figure out how to make this work, now.
in your app.component.html add this code:
<md-sidenav-container>
<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
<div class="my-content">Main content</div>
</md-sidenav-container>
global styles.css:
html, body, material-app, md-sidenav-container, .my-content {
margin: 0;
width: 100%;
height: 100%;
}
it works for me! ;)
I answered a very similar question here.
The gist: I solved this with a quite heavy workaround. I removed the FAB from the main content, defined a secondary router outlet in my template (outside md-sidenav-layout), created a standalone component for the FAB, and used an Observable in a service to broadcast the click events to the main components.
The answer in the other thread contains code samples and a working plunker example.