I am trying to make the login button float right on the nav bar I made but it is not working and I have searched everywhere for the correct answer. Any ideas?
import React, { Component } from "react";
import "./App.css";
class Home extends Component {
render() {
return (
<div className="nav-bar">
<h1 style={{color: 'white'}}>To-do list</h1>
<div style={{float: 'right'}}>
{/*The button I am trying to fix*/}
<a className="btn btn-dark btn-lg" href="/login">Login</a>
</div>
</div>
)
}
}
export default Home;
The problem is that the h1 is a block level element so your button won't float to the right of it since the h1 takes up the whole line.
One solution would be to make your .nav-bar use the flexbox layout mode:
.nav-bar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
Once you set the layout mode to flexbox, the float property no longer has any effect. You can remove that from the element's inline style.
Related
Hi I've been trying to add a navbar to my homepage. Since my navbar is going to have the same background, I would like to have the content on my homepage to stay at the exact same spot.
The issue however is that when I import my navbar, or insert anything under the class home, the content on my homepage gets squeezed down.
Hence I would like to import my navbar in a way such that it lays on top of my homepage or recenter the items on my homepage such that it takes into account the downward shift caused by the navbar.
In the example below, I would like only the class hometext to be centered
home.js:
import React from "react";
import Navbar from "../components/Navbar";
const home = () => {
return (
<>
<div className="home">
<Navbar />
<p className="hometext">Home</p>
</div>
</>
);
};
export default home;
Navbar.js:
import React from "react";
const Navbar = () => {
return <nav>This is navbar</nav>;
};
export default Navbar;
main.css
.home {
background: var(--background);
}
.hometext {
height: 100vh;
font-family: Ace Sans;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
Using an absolute position is not an option for me as the webpage as a whole uses a snap scroll feature so under the homepage there are different pages with different content. Thank you!
Here's the website before adding the Navbar component:
and here's the website after adding the new component:
I have no idea what properties are causing this, but here's the code:
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// React entry point
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
index.css
/* tailwind directives */
#tailwind base;
#tailwind components;
#tailwind utilities;
body,
html {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif !important;
}
App.js
import { ChakraProvider } from '#chakra-ui/react';
import Welcome from './components/Welcome';
import Navbar from './components/Navbar'
// Main React component
export default function App() {
return (
<ChakraProvider>
<div className="App w-screen">
<Welcome />
<Navbar />
</div>
</ChakraProvider>
);
}
Welcome.js
import "./Welcome.css"
import React from "react";
// Welcome section
export default function Welcome() {
return (
<div className="Welcome w-screen h-screen grid place-items-center">
<div className="Welcome-content grid place-items-center space-y-10 text-white">
<p className="Welcome-text text-center ">
Hello, I'm <span className="Welcome-name text-emerald-400">Omar El Atyqy</span>.
<br />
I'm a <span className="Welcome-job text-emerald-400 txt-rotate" data-period="1000"
data-rotate='[ "web developper", "data scientist", "passionate geek" ]'></span>.
</p>
<a href="#" className="Welcome-button hover:bg-emerald-500 py-4 px-6">
Let's have a look!
</a>
</div>
</div>
);
}
welcome.css
.Welcome {
background-image: url("../../public/images/background.png");
}
.Welcome-text {
font-size: 32pt;
line-height: 36pt;
font-weight: 400;
}
.Welcome-button {
font-size: 15pt;
border: 2px solid #fff;
transition-duration: 0.5s;
}
Navbar.js
import './Navbar.css'
export default function Navbar () {
return (
<div className='Navbar w-screen'>
hello world
</div>
);
}
I haven't included App.css and Navbar.css because they are empty.
Since you are using w-screen, the navbar and welcome components will have a with of 100vw. Which is exactly the with of the viewport. You have set h-screen on the welcome component, so that one will fill the viewport completely. Now if you add the navbar, the height of the total page will exceed the hight of the viewprot, so it will add a sidebar on the right. This makes the actual area to fit the components in smaller, so your components are to wide for the window, that’s why the vertical scroll bar appears.
You can fix this by replacing w-screen with w-full, which makes components take 100% of the available space, rather than fixed width based on the width of the viewport.
See the different descriptions of the classes in the tailwind docs.
Hope this helps.
Try using the browser debug, if you are using chrome, press F12, after opening, press CTRL + SHIFT + C or select the pointer in the upper left corner and hover over the element, check what is causing this, because this way, it is very complicated to debug and understand
Have you tried adding margin: 0 and box-sizing: border-box in App.css ?
By default, div elements might have margin: 1rem or kind of stuff so if you set your container element to take full width, its content might overflow and causes a slider.
So App.css file will look like this.
* {
margin: 0;
box-sizing: border-box;
}
I'm just testing out flex with a simple layout and I noticed that when I inspect the page and test it's responsiveness, when it gets below around 400px in width, the content start shrinking vertically, leaving a bunch of empty on the bottom space as show below. Is it normal for flex to do this below a certain width? if so, do you just use media queries to fix this or is there another method?
(the top is just header with shrunken items, which is why it looks weird)
Here is the link as I'm not yet allowed to post pictures
* {
margin: 0;
padding: 0;
overflow-y: hidden;
}
#mainContent{
display: flex;
background-color: rgb(208, 255, 218);
}
.sideNav{
background-color: rgb(159, 255, 134);
padding: 100% 2% 100% 2%;
}
Home Component
import React from 'react'
import Header from './Header';
import SideBar from './SideBar';
function Home() {
return (
<div>
<Header></Header>
<div id='mainContent'>
<SideBar></SideBar>
</div>
</div>
)
}
export default Home
Header Component
import React from 'react'
import {BrowserRouter as Link} from "react-router-dom";
function Header() {
return (
<div>
<navbar className="nav-bar">
<ul className="navItems">
<li>
<h1>Groupster</h1>
</li>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/login'>Login</Link>
</li>
</ul>
</navbar>
</div>
)
}
export default Header
SideBar Component
import React from 'react';
function SideBar() {
return (
<div className='sideNav'></div>
)
}
export default SideBar
Good morning!
I'm using a Material Design side navigation in my Angular app to offer page selection to the user. The side navigation contains a logo first and then all the pages the user can choose from - if he is logged in.
Problem:
If the user is not logged in, the logo is the element with the biggest width; and that confuses the positioning of the page content. The page content is overflowed by the sidenav, because the page content is aligend with the page links but not with the logo.
As you can see the sidenav respects the width of the logo. The content does not.
HTML:
<mat-card>
<mat-sidenav-container>
<mat-sidenav #drawer mode="side" opened role="navigation">
<mat-nav-list>
<div class="logo-nav">
<img src="./assets/MyLogo.png">
</div>
<a id="nav-home" mat-list-item routerLink='home' routerLinkActive="active">Home</a>
<a id="nav-schulauswahl" mat-list-item routerLink='page1' routerLinkActive="active" *ngIf="loggedIn">
Page 1
</a>
<a id="nav-schule-list" mat-list-item routerLink='page2' routerLinkActive="active" *ngIf="loggedIn">
Page 2 with very long name
</a>
<a id="nav-logout" mat-list-item (click)='logout()' routerLinkActive="active">Logout</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
Some Content
</mat-sidenav-content>
</mat-sidenav-container>
</mat-card>
Typescript:
import { Component } from '#angular/core';
#Component({
selector: 'my-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent {
get loggedIn(): boolean {
return true; // <- Toogle this to see all page links
}
}
The core of the problem: The margin-left of mat-sidenav-content is calculated wrongly. As a workaround I hard coded it to 230px but this of course produces an ugly gap between sidenav and content if the user is not logged in:
CSS:
#import '../../styles/colors.scss';
.logo-nav {
width: 100%;
text-align: center;
}
// Workaround
mat-sidenav-content {
margin-left: 230px !important;
}
If the user is logged in, then the longer page names appear which makes the left-margin being calculated correct.
There are multiple ways to fix this. For example:
Applying a width property to your logo image. Can be 100% or 230px as you have used.
.logo-nav img {
min-width: 230px;
}
Setting a width property to the sidenav itself. https://material.angular.io/components/sidenav/overview#setting-the-sidenav-39-s-size
.mat-sidenav {
width: 230px;
}
Changing the display of mat-nav-list to flex with column direction.
.mat-nav-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I'm working with angular and angular-material.
Inside a page, I have a form, and some buttons (grouped in a div) which are depending on this form.
But, I'd like to have these buttons (the div) sticking the bottom of the page, even if I scroll.
Here's some code :
<form (ngSubmit)="update()" #updateForm="ngForm">
<div> some content with inputs and selects </div>
<div class="button-container"> buttons like save, cancel, ... </div>
</form>
and :
.button-container {
position: sticky !important;
bottom: 0;
float: right;
z-index: 999;
}
If I put the buttons out of the form, they don't work anymore. Thing is, it'd be better if I don't change the buttons' methods, and only modify HTML and CSS.
What I did doesn't work, any idea ?
I did this on plunker, with the same CSS properties as my project https://plnkr.co/edit/pw7zOruWwhV0o1Vya717?p=preview
In case you cannot reproduce the failing version in plunkr, then some other css-styling in your project might be preventing the sticky-position.
In my case the sticky-position did not work in case the containing div had
overflow:hidden;
Maybe you have the value set on the containing div?
I think I had the same problem. Normally I would use position fixed but this wouldn't work because material used transform: translate3d(0,0,0). This made fixed to behave like absolute. To solve this problem I used the below:
//Place this in your form
<app-fnls-displacer>
<div style="position: fixed; right: 30px; bottom: 30px; padding-bottom: 2em; z-index: auto">
<button mat-fab class="fab" type="submit" (click)="myfunction()">
<mat-icon>add</mat-icon>
</button>
</div>
</app-fnls-displacer>
This is the component and directive used:
import {AfterViewInit, Component, Directive, OnDestroy, TemplateRef, ViewChild, ViewContainerRef} from '#angular/core';
import {Overlay, OverlayRef, OverlayConfig, TemplatePortal} from '#angular/material';
#Directive({ selector: '[displacerPortal]' })
export class DisplacerPortalDirective extends TemplatePortal<any> {
constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
super(templateRef, viewContainerRef);
}
}
#Component({
selector: 'app-fnls-displacer',
template: `
<ng-template displacerPortal>
<ng-content></ng-content>
</ng-template>
`
})
export class DisplacerComponent implements OnDestroy, AfterViewInit {
private _config = new OverlayConfig();
#ViewChild(DisplacerPortalDirective)
private _portal: DisplacerPortalDirective;
private _overlayRef: OverlayRef = undefined;
constructor(private _overlay: Overlay) {}
public ngOnDestroy() {
this._overlayRef.detach();
}
public ngAfterViewInit() {
this._overlayRef = this._overlay.create(this._config);
this._overlayRef.attach(this._portal);
}
}
I found it on a material GitHub page. It places the content inside it directly to the body, so that you can use position: fixed.
Set a fixed height to the scrolling element and fix the button position:
<div style="height:calc(100vh - 100px) !important; overflow: scroll !important" class="mat-tab-body-content ng-trigger ng-trigger-translateTab">
......
<button style="top: calc(100vh - 50px) !important; position: fixed !important" md-button (click)='alert("clicked!");'>button</button>
Plunker