I have some warnings:
Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: Transition
and
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely in ...
which I didn't have like a month ago.
<Modal
style={{position: "relative",
top: "50%",
transform: "translateY(-50%)"}}
className="fadein-elements"
isOpen={modal}
toggle={toggle}
>
<ModalHeader toggle={toggle}>Add Post</ModalHeader>
<ModalBody>
<Form onSubmit={onSubmit}>
<FormGroup>
<Label for="subject">Subject</Label>
<Input
type="text"
name="subject"
id="subject"
placeholder="Add Subject..."
onChange={onChange}
/>
<Label for="content">Content</Label>
<Input
type="textarea"
name="content"
id="content"
placeholder="Add content..."
onChange={onChange}
/>
<Button
color="dark"
style={{ marginTop: '2rem' }}
block>
Add Post
</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
App works fine, but I always want to clear all warnings in correct way.
I assume that I have to add transition Component from react-transition-group, however I prefer to do all my transitions and animations in CSS(which for me works much better with react-waypoint).
My React version is 16.13.1
Well finally, I have two questions.
1) What is the purpose of this warning, it means why it is deprecated?
2) Where should I insert this react-group-transition Transition or how should I change this Modal to clear the errors?
I had the same issue while using Bootstrap 5 within NextJS. So I'm not sure if this is the same way you arrived at this, as you haven't mentioned, but if it's similar, you can use the same solution.
The warning is caused by not adding the CSS & JS Bundle from Bootstrap. I edited my _app.js file as below and it did the trick.
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Script from 'next/script'
// add bootstrap css
import 'bootstrap/dist/css/bootstrap.css'
class App extends React.Component {
render() {
const { Component, pageProps } = this.props
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossOrigin="anonymous"
/>
</Head>
<Component {...pageProps} />
<Script
id = 'bootstrap'
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossOrigin="anonymous"
/>
</>
)
}
}
export default App
Related
const express = require('express');
const path = require('path');
const app = express();
// Use static folder middleware
app.use(express.static(path.join(__dirname , "public")));
// Get
app.get("/" , (req , res)=>{
res.sendFile(`${__dirname}/index.html`);
});
// Listen
app.listen(3000 , ()=>{
console.log('server running on port 3000');
});
Folder structure
Root
-index.html
-app.js
public
-css
-index.css
-images
-image.png
In the index.html page The index.css file and the image.png are linked.
However, Those two are not being server as static files in app.js. But I have included the middle for serving static folders.
can some one explain what is the issue
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Hugo 0.82.0">
<title>Sign up</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-
beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-
touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-
tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-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/index.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form action="/" , method="POST">
<img class="mb-4" src="./public/images/image.png" alt="" width="72"
height="57">
<h1 class="h3 mb-3 fw-normal">Sign Up</h1>
<div class="form-floating">
<input type="text" name="fname" class="form-control top"
id="firstName" placeholder="first name">
<label for="firstName">First Name</label>
</div>
<div class="form-floating">
<input type="text" name="lname" class="form-control middle" id="lastName" placeholder="last name">
<label for="firstName">Last name</label>
</div>
<div class="form-floating">
<input type="email" name="email" class="form-control bottom" id="email" placeholder="inkey#email.com">
<label for="email">Email ID</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2020–2021</p>
</form>
</main>
</body>
</html>
This is the html page taken from bootstrap
The css file under the comment custom styles for this template
and the png is below the form tag.
The files are added correct as when the html page is seen in the browser independently then the image and css is showing up
However when it is served using node and express the image and css arent showing up
OK, So I am answering my own question here.
After refering to #jdmayfield 's answer and searching about MIME type errors I reached link to this link.
I realised that when you set the pubic folder as static in node, Then that public folder should not be added in the path to css or images in html
Meaning that
In the folder structure given above if we want to link css in html the code we use is
<link href="./public/css/index.css" rel="stylesheet">
And this gave me a MIME type error.
So I changed the above code to
<link href="css/index.css" rel="stylesheet">
This worked.
However if You independently open the HTML file by going live in vscode, the css and images wont load. But when served with node they will be served.
UPDATED POST:
In light of the recent comment by #Nav giving the error regarding mime-type, here is a snippet I found at Express: Setting content-type based on path/file?
"The Express documentation shows that it can do this if you pass in the
file name."
var filePath = 'path/to/image.png';
res.contentType(path.basename(filePath));
// Content-Type is now "image/png"
Try this example first. If that does not work, reload and check Dev console for different errors. It is possible there is more than one cause of your issue.
ORIGINAL POST:
Based on the code you have submitted, I think your problem is the default CORS policy. You need to incorporate a method of allowing Cross-Origin Resource Sharing between the domains, ports, and protocols you are using. I found a good document detailing CORS explicitly, but succinctly, with a solution that appears specifically suited to your needs. You might open the Dev console in your browser and look for similar error messages as outlined in the document to confirm.
Here's the link:
https://flaviocopes.com/express-cors/
Well I followed the example
https://www.youtube.com/watch?v=Sh3_k_QPGzw
I don't get the Quill tool bar as shown in the any of the examples
<div style="text-align:center">
<div class="container-fluid">
<div class="row pt-5">
<div class="col-md-8">
<form [formGroup]="editorForm" (ngsubmit)="onSubmit()">
<div class="form-group">
<label for="editor"><h3>editor</h3></label>
<quill-editor></quill-editor>
</div>
</form>
</div>
I just tried your example:
<div class="form-group">
<label for="editor"><h3>editor</h3></label>
<quill-editor></quill-editor>
</div>
Result:
It works fine showing all the standard toolbar-items, so make sure you also imported quill.snow.css and quill.bubble.css
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
in your html and
#import "./app/quill/quill-emoji.css";
#import "./app/quill/quill-mention.css";
in your styles.css.
If you are using your own custom toolbar container you also need to create the buttons inside it.
From the official docs:
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '#toolbar', // Selector for toolbar container
handlers: {
'bold': customBoldHandler
}
}
}
});
Because the container option is so common, a top level shorthand is also allowed.
var quill = new Quill('#editor', {
modules: {
// Equivalent to { toolbar: { container: '#toolbar' }}
toolbar: '#toolbar'
}
});
The official documentation and some good examples:
Doc on toolbar
Example
Example on Stackblitz
Example on CodePen with custom toolbar-container
Just running barebones "material-components-web" and I can't get the input field to look like it's supposed to. JS interaction is working great. Theme looks good. But my field is getting cut off
index.html:
<html>
<head>
<link rel="stylesheet" href="bundle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
</head>
<body class="mdc-typography">
<h1 class="mdc-typography--headline1">Big header</h1>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" type="text" id="input">
<label for="input" class="mdc-floating-label">Input Label</label>
<div class="mdc-line-ripple"></div>
</div>
<!-- at the bottom of the page -->
<script src="bundle.js"></script>
</body>
</html>
app.scss:
#import "material-components-web/material-components-web";
app.js:
import * as mdc from 'material-components-web'
mdc.autoInit()
I have no other files pulling in. No other styles added. What could be happening?
That usually happens when .mdc-text-field__input has incorrect box-sizing (for example, inheriting parental .mdc-text-field's border-box). Please ensure that .mdc-text-field__input has initial box-sizing:
.mdc-text-field__input {
box-sizing: initial; // or content-box
}
The following worked for me: add the following to a custom style sheet.
.mdc-text-field {
width: -webkit-fill-available;
width: fill-available;
}
First, the code:
$(document).ready(function() {
$('#member_pattern').hide();
$('.add-member').click(function() {
var clone = $('#member_pattern').clone(), cont = $('.members-cont');
$(cont).append(clone);
$(cont).find('#member_pattern').show(200, function() {
$(this).attr('id', '');
componentHandler.upgradeAllRegistered();
});
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-indigo.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<div class="members-cont">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="first_name_<?php echo $member->id; ?>" value="<?php echo $member['first_name']; ?>"/>
<label class="mdl-textfield__label" for="first_name_<?php echo $member->id; ?>">Имя</label>
</div>
</div>
<button class="add-member add-member-top mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
<div id="member_pattern" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="[name]_[id]" value=""/>
<label class="mdl-textfield__label" for="[name]_[id]">Имя</label>
</div>
Objective:
By pressing a button on the page dynamically insert another field [.mdl-textfield], you want to apply the "material design" on Google
All is good, but the methods
componentHandler.upgradeAllRegistered ();
or
componentHandler.upgradeDom ();
in any does not want to renew, re-emerged, the elements on the page.
I also was having problems cloning an element and getting it to work correctly. What I did was to remove the MDL specific classes from the div and change it to a generic class name that I could select on.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
became
<div class="upgradeTextField">
Then in javascript, after cloning the element, I selected for those divs within the cloned element and added the MDL specific classes to them. After that, running componentHandler.upgradeDom() seemed to work.
var textFieldUpgrades = cloned.querySelectorAll('.upgradeTextField');
if(textFieldUpgrades) {
for(var i=0;i<textFieldUpgrades.length;++i) {
textFieldUpgrades[i].className = 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label';
}
}
componentHandler.upgradeDom();
I haven't verified this, but it seems that when you clone an existing element within the dom that has been upgraded by MDL previously, it won't upgrade it when you add the cloned object to the DOM. So that's why I simply removed the MDL classes so it wouldn't be upgraded beforehand.
Alternatively, if you need it upgraded beforehand and still want to clone it. Then what you can do is to remove the attribute 'data-upgraded' and class 'is-upgraded' from your element after you clone it. Then when you run the componentHandler.upgradeDom() it should upgrade it. So, instead of just setting the class name as in the above snippet, you'd simply remove the upgrade info:
textFieldUpgrades[i].setAttribute('data-upgraded','');
textFieldUpgrades[i].className = textFieldUpgrades[i].className.replace(/is-upgraded/g,'');
This seemed to work for me.
Thanks for the answer, but it turned out to solve it more concise way
var index = $('.member-section').length;
var clone = $('.member-section-pattern').clone();
$(clone)
.removeClass('member-section-pattern')
.find(':not([data-upgraded=""])').attr('data-upgraded', '');
$('.members-cont').append(clone);
$(clone).show(200, function() {
componentHandler.upgradeAllRegistered();
});
I left on Friday with my application working in dev mode....I came in this morning and the Layout.Mobile.chtml was NOT being used.....THIS IS DEV MODE so I still starting the web server each time.... I read about a similar issue related to the cache....but I don't see how this could be related to my problem as once the web server shuts down the cache is cleared.
I am using Visual Studio 2012 as my development "web server".
Everything was running and I don't see where the problem is nor do I understand where to look next. Any suggestions of how to diagnosis this problem or where to look would be appreciated.
This is ONLY for the Layout.Mobile.cshtml....when I switch back to the Layout.cshtml it is being called fine....
In my global.asax.cs I have the following set to force firefox to display using the mobile layout:
//The following forces Firefox to use the Mobile View ONLY
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("mobile")
{
ContextCondition = (context =>
context.Request.UserAgent.IndexOf("Mozilla", StringComparison.OrdinalIgnoreCase) >= 0)
});
My _ViewStart.cshtml file is:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
My _Layout.Cshtml is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Etracs</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
#RenderSection("scripts", required: false)
</head>
<body>
<header>
*#
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_ViewSwitcher")
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Turning Basin Services</p>
</div>
</div>
</footer>
</body>
</html>
My _Layout.Mobile.cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#* #Styles.Render("~/Content/Mobile/css") *#
#* #Styles.Render("~/Content/jquerymobile/css") *#
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#* #Scripts.Render("~/bundles/jquery") *#
#* #Scripts.Render("~/bundles/jquerymobile") *#
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
#RenderSection("scripts", required: false)
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header">
#RenderSection("backbtn", false)
<h1>#ViewBag.Title</h1>
#RenderSection("Home", false)
</div>
<div data-role="content">
#* #RenderSection("featured", false) *#
#RenderBody()
</div>
<div data-role="footer">
<h4> #Html.Partial("_ViewSwitcher") © #DateTime.Now.Year - Turning Basin Services</h4>
</div>
</div>
</body>
</html>
In my views I am usually setting up the view to impliclity map to the Layout using viewstart.... however, my .Login.Mobile.cshtml hardwires the assocaiation to the mobile layout as follows:
#model TBS.Etracs.Web.Main.Models.LoginModel
#{
ViewBag.Title = "Log in";
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
#Html.ValidationSummary(true)
<section id="loginForm">
#* #using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { *#
#using (Html.BeginForm ("Login")) {
#Html.AntiForgeryToken()
<div data-role="content">
<div data-role="fieldcontain">
<label for="UserName">UserName:</label>
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div data-role="fieldcontain">
<label for="Password">Password</label>
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div data-role="fieldcontain">
<label for="ProgramMode">ProgramMode</label>
<select name="ProgramMode" id="ProgramMode">
<option value="VW">VW</option>
<option value="Porsche">Porsche</option>
<option value="Bentley">Bentley</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="ConnectionMode">ConnectionMode</label>
<select name="ConnectionMode" id="ConnectionMode">
<option value="Production">Production</option>
<option value="Test">Test</option>
</select>
</div>
<input type="submit" value="Log in" />
</div>
}
</section>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I see you acknowledged you didn't believe this was related to the cache - but I'm adding this here since it's critical to be aware of when using mobile views.
The caching bug is explained here
Dave Ward:
Something everyone should be aware of when using MVC 4's mobile view
support is that there's a bug in the RTM version that results in the
wrong view being rendered for mobile devices after the view falls out
of the resolution cache the first time. The tricky part is that you
won't notice this in debug mode or until 15 minutes of inactivity in
release mode, so it's incredibly easy to let the buggy behavior slip
into production. There's an easy fix on NuGet, which Rick Anderson
covers here:
http://blogs.msdn.com/b/rickandy/archive/2012/09/17/asp-net-mvc-4-mobile-caching-bug-fixed.aspx
See also comments in this post
http://www.hanselman.com/blog/MakingASwitchableDesktopAndMobileSiteWithASPNETMVC4AndJQueryMobile.aspx
If you have a custom view engine (like i do) you can just change the base class after installing the nuget package:
public class SiteIdentityViewEngine : Microsoft.Web.Mvc.FixedRazorViewEngine, IVirtualPathFactory
Using Glimpse I found that that the _layout.mobile.cshtml was still being called and included....the problem was that it was not working....which relates to a problem I had earlier.....
In my _Layout.Mobile.chtml I went back to the following code and my layout is now working
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I used this to replace the following lines in my _layout.Mobile.cshtml
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
The big question that I am VERY confused about is what happened .... this prevous worked for several days and then quit working..... Input would be appreciated.