I've been trying to implement a material design site using AngularDart, and I've hit a wall using the angular_components App Layout setup. For the life of me I can't figure out how to change the look of the nav class="material-navigation" content to match the examples (things like background, text color, and text highlight color). Currently the text has a grey box surrounding it rather than matching the header color. It doesn't seem like these properties are set in layout.scss, so I'm stumped. I've made minimal changes to the layout.scss file, which I've posted below. Any insight into what I'm missing? Thanks in advance :)
AngularDart Material Nav
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'dart:async';
#Component(
selector: 'my-app',
directives: [
coreDirectives,
MaterialIconComponent,
MaterialButtonComponent,
MaterialToggleComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialPersistentDrawerDirective],
templateUrl: 'app_component.html',
styleUrls: [
//Holds modifications for angular_components style sheets. Particularly
//app_layout, which is *not* a component but a weird grouping of components
//and styles.
'main.css',
'app_component.css',
],
providers: [ClassProvider(NomiService)],
)
...
#import 'package:angular_components/app_layout/layout';
.material-header {
background-color: $mat-vanilla-red-400; //vs. $mat-indigo-500
}
// A row within the header.
.material-header-row {
/// Class uses for the title inside of a header.
.material-header-title {
left: auto; //vs. $mat-grid * 10;
height: 36px; //$mat-header-height; //vs. $mat-title-font-size
font-size: 36px;
//border: 3px solid green; Use to check work!
//Used to center text!
margin-left: 37.5%;
margin-right: 37.5%;
text-align: center;
width: 25%;
}
.material-navigation{
border: 3px solid green;
}
}
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<img src="favicon.png" width="30">
<span class="material-header-title">Nomi</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<a>Test</a>
</nav>
</div>
</header>
<material-drawer persistent #drawer="drawer">
<material-list>
<div group>
<material-list-item>
<material-icon icon ="inbox"></material-icon>Inbox
</material-list-item>
<material-list-item>
<material-icon icon ="star"></material-icon>Star
</material-list-item>
<material-list-item>
<material-icon icon ="send"></material-icon>Sent Mail
</material-list-item>
<material-list-item>
<material-icon icon ="drafts"></material-icon>Drafts
</material-list-item>
</div>
</material-list>
</material-drawer>
Related
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;
}
Forgive me if this has been asked before, I have tried some solutions that have been suggested and none has worked for me just yet.
I have a background image and I want to add links in a div, the links are currently unclickable and I don't know where I am going wrong.
Here's my code so far:
import '../../stylesheets/new_style.scss';
import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';
const NewGreeting = props => {
return (
<div className="full-page">
<Modal.Dialog>
<Modal.Body>
<p> Modal Content Here </p>
</Modal.Body>
</Modal.Dialog>
<div className='trial text-center'>
test
</div>
</div>
);
};
export default NewGreeting;
And here is my css code:
.full-page {
background-image: url("./hello.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.trial{
display: block;
color: #474747;
font-size: 2.1em;
margin-top: 50vh;
}
(Converting my comment to an answer:)
The problem is the <Modal.Dialog> element has special behaviour that makes it "take over" the page and make the rest of the page non-interactive - and your <div> with links in it is located outside that <Modal> dialog, so just move your links into the <Modal.Body> and they'll be made interactive again.
Like so:
import '../../stylesheets/new_style.scss';
import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';
const NewGreeting = props => {
return (
<div className="full-page">
<Modal.Dialog>
<Modal.Body>
<p> Modal Content Here </p>
<div className='trial text-center'>
test
</div>
</Modal.Body>
</Modal.Dialog>
</div>
);
};
export default NewGreeting;
Try this:
.trial{
display: block;
color: #474747;
font-size: 2.1em;
margin-top: 50vh;
z-index: 999;
}
z-index will help you.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I have some code that looks like this:
<section>
<div style="height: 100%; max-width: 10%; background-color: deepskyblue;">my content</div>
<router-outlet style="height: 100%; min-width: 90%; background-color: gold;"></router-outlet>
</section>
I want the div to work as a side-bar with the router-outlet taking up the remaining 90% of the space. But what ends up happening is that the content displayed from the router-outlet is pushed beneath the div rather than beside it. It also appears that no CSS is being applied to the router-outlet, as the background color doesn't change. Is there any way to get CSS to make changes to this router-outlet?
simple solution is to to just put router-outlet in a style div.
<section>
<div style="height: 100%; max-width: 10%; background-color: deepskyblue;">my content</div>
<div style="height: 100%; min-width: 90%; background-color: gold;">
<router-outlet ></router-outlet>
</div>
</section>
Short answer
Use:
:host { background: cornflowerblue; }
as the css for the hosted component, to change background of the router outlet.
Long Answer:
Angular CSS pseudo selector/modifier
You can affect the hosting component with the :host modifier. In the case that you would like to change the router oulet styling, add css to the component that will be hosted.
e.g. Change the router outlet blue when showing the page-edit component.
// This is your routing to place your page component in the outlet when
navigating to the edit/1 url.
const routes: Routes = [
{
path: 'edit/:pageId',
component: PageComponent,
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageEditorRoutingModule {}
// PageComponent - stub of component to be rendered in outlet.
#Component({
selector: 'app-page-editor',
templateUrl: './page-editor.component.html', //implement as desired.
styleUrls: ['./page-editor.component.scss']
})
export class PageEditComponent {
// Your implementation
}
// Put this in your page-editor.component.scss to change the router outlet background blue
:host{
background: cornflowerblue;
}
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
I was developing a login screen within angular with the within the app.component.html as such:
app.component.ts
<div class="container">
<app-login></app-login>
</div>
and css as such:
login.css
.form-group {
display: block;
margin-bottom: 15px;
}
.form-group label {
display: block;
margin: 0 0 5px 0;
}
app.component.css
.container {
display: grid;
height: 100%;
}
app-login {
width: 100%;
max-width: 274px;
place-self: center;
}
However, since I have now incorporated routing into my app, I display the login page using the <router-outlet> component, but this has ruined the CSS of the login page is it once was...
app.component.ts
<div class="container">
<router-outlet></router-outlet>
</div>
How can I change my CSS files such that I can get back the look I once had?
Here is a stackblitz to my example
Update
Solution found to the missing CSS (see below)
However now it appears is hogging much of the screen, pushing my element downward?
You need to set
encapsulation: ViewEncapsulation.None
on the AppComponent to allow styles to affect also those components which are used inside AppComponent.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
name = 'Angular';
}
But it will be better to use styles on those components for which they were declared.
This is a working Stackblitz.
You were targeting <app-login> in the app.component.css file and styling it to have a fixed width and align it center. What you have to remember is that, Angular enforces emulated view encapsulation and also when you are using router, <app-login> may be changed to some random dynamic name at run time thereby making your css classes that you might have written in app.component.css ineffective.
Its always a best practice to write styles for a component in its respective CSS file rather than the root components css file.
Here is a changed Stackblitz
Here is the result: