I'm using react-universally as a ReactJS application boilerplate and bootstrap 4 for styling. Here is the main component DemoApp:
import 'normalize.css/normalize.css';
import React from 'react';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
import Helmet from 'react-helmet';
import config from '../../utils/config';
import './globals.css';
import Error404 from './Error404';
import Header from './Header';
import AsyncHomeRoute from './AsyncHomeRoute';
import AsyncCounterRoute from './AsyncCounterRoute';
import AsyncAboutRoute from './AsyncAboutRoute';
/// Should change the language below according to the user preference language
function DemoApp() {
return (
<div style={{ padding: '2rem' }}>
<Helmet>
<html lang="en" />
<title>{config('htmlPage.defaultTitle')}</title>
<meta name="application-name" content={config('htmlPage.defaultTitle')} />
<meta name="description" content={config('htmlPage.description')} />
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="msapplication-TileColor" content="#2b2b2b" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
<meta name="theme-color" content="#2b2b2b" />
{/*
A great reference for favicons:
https://github.com/audreyr/favicon-cheat-sheet
It's a pain to manage/generate them. I run both these in order,
and combine their results:
http://realfavicongenerator.net/
http://www.favicomatic.com/
*/}
<link
rel="apple-touch-icon-precomposed"
sizes="152x152"
href="/favicons/apple-touch-icon-152x152.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="144x144"
href="/favicons/apple-touch-icon-144x144.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="120x120"
href="/favicons/apple-touch-icon-120x120.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="114x114"
href="/favicons/apple-touch-icon-114x114.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="76x76"
href="/favicons/apple-touch-icon-76x76.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="72x72"
href="/favicons/apple-touch-icon-72x72.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="57x57"
href="/favicons/apple-touch-icon-57x57.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="60x60"
href="/favicons/apple-touch-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/apple-touch-icon-180x180.png"
/>
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#00a9d9" />
<link rel="icon" type="image/png" href="/favicons/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/favicons/favicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico" />
<meta name="msapplication-TileColor" content="#2b2b2b" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/favicons/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/favicons/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/favicons/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/favicons/mstile-310x310.png" />
<link rel="manifest" href="/manifest.json" />
{/*
NOTE: This is simply for quick and easy styling on the demo. Remove
this and the related items from the Content Security Policy in the
global config if you have no intention of using milligram.
*/}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine"
/>
<link
rel="stylesheet"
href="/scripts/css/bootstrap.css"
/>
</Helmet>
<Header />
<div style={{ paddingTop: '2rem', paddingBottom: '2rem' }}>
<Switch>
<Route exact path="/" component={AsyncHomeRoute} />
<Route path="/counter" component={AsyncCounterRoute} />
<Route path="/about" component={AsyncAboutRoute} />
<Route component={Error404} />
</Switch>
</div>
</div>
);
}
export default DemoApp;
And my global.css file, that styles all the application:
html {
box-sizing: border-box;
font-family: 'Tangerine', serif !important;
color: red;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Inline our ul for our menu */
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li { display: inline; margin: 0 .5rem; }
My problem is that the font set (Tangerine) is not being show. It is being applied but then overwritten by boostraps _reboot.css that sets all font to bootstrap default.
I can imagine that this is due to the import "./globals.css" command that is being executed before loading bootstrap, so when I load bootstrap it calls _reboot to reset all parameter, includind its font, overwriting my settings.
How can I, using the DemoApp shown component approach, invert that order and load globals.css after bootstrap complete its setup cycle, so that my fonts can be used with no problems ?
If not possible, is there other solution availabe to setup bootstrap variables globally in a ReactJS environment ?
Thanks for helping.
You globals.css should override the global bootstrap.css or at least be applied after bootstrap.css has been loaded.
Since the file is global, you could create a Link after bootstrap:
<link
rel="stylesheet"
href="/scripts/css/bootstrap.css"
/>
<link
rel="stylesheet"
href="/scripts/css/globals.css"
/>
Am I missing something?
Related
I'm stuck on this problem, I am using next js and have 5 pages.
pages/index.js
pages/kandan-nagar.js
pages/vallimanavalan-nagar.js
pages/contact-us.js
pages/404-not-found.js
My Pages Here
Then I upload my next js static files to godaddy hosting.My application ran successfully. But, I route vallimanavalan-nagar and reload this page is to redirect index page(Home Page).
Example video is error.
My _app.js File
import SSRProvider from 'react-bootstrap/SSRProvider'
import Head from 'next/head'
import ScrollTopButton from '../components/ScrollTopButton'
import '../scss/theme.scss'
import Script from 'next/script'
const FlatLand = ({ Component, pageProps }) => {
return (
<SSRProvider>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FlatLand Realty</title>
<meta name='description' content='FlatLand - Directory & Listings React / Next.js Bootstrap Template' />
<meta name='keywords' content='react, nextjs, bootstrap, business, directory, listings, e-commerce, car dealer, city guide, real estate, job board, user account, multipurpose, ui kit, css3, javascript, gallery, slider, touch' />
<meta name='author' content='Createx Studio' />
<link rel='apple-touch-icon' sizes='180x180' href='/favicon/apple-touch-icon.png' />
<link rel='icon' type='image/png' sizes='32x32' href='/Share/flatlandlogo.svg' />
<link rel='manifest' href='/favicon/site.webmanifest' />
<link rel='mask-icon' color='#5bbad5' href='/favicon/safari-pinned-tab.svg' />
<meta name='msapplication-TileColor' content='#766df4' />
<meta name='theme-color' content='#ffffff' />
</Head>
<Component {...pageProps} />
<ScrollTopButton
showOffset={600}
duration={800}
easing='easeInOutQuart'
tooltip='Top'
/>
</SSRProvider>
)
}
export default FlatLand
The reason why JavaScript is not running on the main page of the Blazer, considering that we have access to the main file when running the web application and the link to the JavaScript file, it works correctly, and when you click on it, the code is displayed correctly and completely in the Ceres section. It will be given. But the JavaScript function is not called or is not executed at all. My codes are as follows:
function opeSublist() {
try {
if (checkFirstList == 0) {
checkFirstList = 1;
}
var checkList = document.getElementById('FirstList');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
} catch {}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
Referesh . . .
<a class="dismiss">🗙</a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>
navigator.serviceWorker.register('service-worker.js');
</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>
and the javascript function is inside of multiselect-dropdown.js javascript separate file. But it is not clear to me why this function is not executed and the result is not displayed. In fact, by clicking on a DIV, a list should be displayed, and by clicking outside the list, the list should be removed from the display mode. All steps are correct. And in a normal HTML page, this function is executed correctly. But when transferred to Blazor, it does not run. I do exactly the same things I did on the HTML page in Blazer. But it has no effect.
In order to avoid the complexity and disconnection of JavaScript functions, it is better that the functions that are to be called in Blazor are stored in a separate file, for example named blazJavaFile.js, and defined in the index.html file in the wwwroot folder. Your submitted file will change like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<script src="multiselect-dropdown.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<link href="LosacoWeb.Client.styles.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/blazJavaFile.js"></script>
<link href="manifest.json" rel="manifest" />
<link rel="icon" href="images/cropped-lorchlogo-2022-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-lorchlogo-2022-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" sizes="512x512" href="images/logoFa512.png" />
<link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" />
</head>
<body dir="rtl">
<div id="app">
<div class="d-flex justify-content-center" style="margin-top:10%;">
<div class="flex-column align-items-center">
<img src="images/LogoFaNew.png" />
<div class="linear-activity">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
Error ...!
Referesh . . .
<a class="dismiss">🗙</a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<script src="js/plugins.min.js"></script>
<script src="js/toastr.min.js"></script>
</body>
</html>
Then, on the page where you want to call this function, create the following method and call it with the following command.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.InvokeVoidAsync("opeSublist");
}
}
At the same time, don't forget to add this statement #inject IJSRuntime jsRuntime which is dependency injection, at the beginning of the page or at the top of your page. More information and more examples are available in the links Example 1 and Example 2
this is the app.js file
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DashboardLayout from './layouts/DashboardLayout';
import './faithdash/scss/styles.scss';
export default function App() {
return (
<BrowserRouter>
<Switch>
<Route component={DashboardLayout} />
</Switch>
</BrowserRouter>
);
}
this is the index.html file
ive tried everything and have used different my vscode index chrome previewer to view the index file like others but its shows a blank screen
<!DOCTYPE html>
<html lang="en">
<head>
<title> Faithpays dashboard</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
<link
href="https://%PUBLIC_URL%/evergreen.eot"
rel="font"
/>
<link
href="https://%PUBLIC_URL%/evergreen.css"
rel="stylesheet"
crossorigin="anonymous" />
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
<script src="_nav.js"></script>
</body>
</html>
Because you didn't call render function from ReactDOM.
See more here: https://reactjs.org/docs/getting-started.html
I've been creating the signup page, but while running it on my local server all my applied CSS is not showing. I'm using bootstrap 4.
When I'm trying to open the file in the browser it's showing the proper results. It would be helpful if you tell me why it's happening.
I'm not worried about a favicon for now.
Here is my HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Signin Template · Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="public/css/sty.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body class="text-center">
<form action="/" class="form-signin" methode="post">
<img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<input type="text" class="form-control a" placeholder="first name" required autofocus>
<input type="text" class="form-control b" placeholder="last name">
<input type="email" class="form-control c" placeholder="email" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
</form>
</body>
</html>
My node.js code:
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static("public"));
app.get("/",function(req,res){
res.sendFile(__dirname + "/in.html");
});
app.listen(3000,function(req,res){
console.log("running");
});
My outcome:
The outcome I'm looking for:
note: Not exact outcome but it's similar to it
Once you have given this:
app.use(express.static("public"));
There is not need to include public in path like this.
<link href="public/css/sty.css" rel="stylesheet">
try with this
<link href="/css/sty.css" rel="stylesheet">
Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.
https://expressjs.com/en/starter/static-files.html
Otherwise you should use
app.use('/public', express.static('public'));
with
<link href="/public/css/sty.css" rel="stylesheet">
Be sure to check this out. This shows how to use relative path. /public/ & public/ are different.
I have the following code
element.html
<link rel="import"
href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
href="bower_components/core-icons/core-icons.html" />
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
href="bower_components/core-menu/core-menu.html" />
<link rel="import"
href="bower_components/core-item/core-item.html" />
<link rel="import"
href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
href="bower_components/paper-dialog-master/paper_dialog_transition.html">
<link rel="import"
href="bower_components/paper-dialog-master/paper_dialog.html">
Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Maps</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial=scalle=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements.html" />
<link rel="stylesheet" href="styles/Home.css" />
<script src="scripts/app.js"></script>
<style type="text/css">
#dlgAddMap
{
height:100px;
width:100px;
background:#fff;
}
</style>
</head>
<body fullbleed layout vertical>
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer>
<core-toolbar>Menu</core-toolbar>
<core-menu>
<core-item label="Maps"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<div>Maps</div>
</core-toolbar>
<div class="content">
<paper-fab icon="add" id="addMap" onclick="document.querySelector('#dlgAddMap').toggle();" class="addButton"></paper-fab>
</div>
</core-header-panel>
</core-drawer-panel>
<paper-dialog heading="Title for dialog" transition="paper-transition-center" id="dlgAddMap">
<paper-button label="Cancel" affirmative></paper-button>
<paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog>
</body>
</html>
and for completeness
App.js
document.addEventListener('polymer-ready', function () {
var navicon = document.getElementById('navicon');
var addMap = document.getElementById('addMap');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function () {
drawerPanel.togglePanel();
});
addMap.addEventListener('click', function () {
try {
if (document.querySelector('#dlgAddMap')) {
document.querySelector('#dlgAddMap').toggle();
}
else {
alert('Cannot find the Add Map Dialog');
}
}
catch ( e )
{
alert(e.message);
}
});
});
The trouble is even when I click the paper-fab button I have not been able to get the dialog to show. Although you see the click even accepted by the button, nothing happens.
The answer in the end was with the imports. The polymer download uses an underline with the bower_components but uses a dash ('-') in the name of the folders and filenames for components. It was corrected by just correcting the entries in the elements.html
<link rel="import"
href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
href="bower_components/core-icons/core-icons.html" />
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
href="bower_components/core-menu/core-menu.html" />
<link rel="import"
href="bower_components/core-item/core-item.html" />
<link rel="import"
href="bower_components/paper-button/paper-button.html" />
<link rel="import"
href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
href="bower_components/paper-dialog/paper-dialog.html" />
<link rel="import"
href="bower_components/paper-dialog/paper-dialog-transition.html" />
<link rel="import"
href="bower_components/paper-dialog/paper-action-dialog.html" />