why do some styles inside jsx (in case of a width) stop working, for example, the red color span seems broken and does not change to the width value to 100px, the green ones without jsx work correctly
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<div class="title test">df</div>
<div class="title test">dfwertds4</div>
<script type="text/babel">
function App() {
let arr = [
{ title: '12', text: 'text' },
{ title: '43', text: 'text' },
{ title: '23', text: 'text' },
{ title: '56w2345', text: 'text' },
{ title: '34234645436', text: 'text' },
{ title: '2344f', text: 'text' }
];
return (
<>
{arr.map((i, index) => {
return (
<div className="item" key={i.title}>
<span className="title" >
{i.title}
</span>
<span>{i.text}</span>
</div>
);
})}
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
</script>
<style>
.title {
background: #e31937;
border-radius: 4px;
width: 100px;
height: 20px;
}
.test {
background: green;
}
</style>
</body>
</html>
Why is this happening?
And why, for example, background works correctly both inside jsx and without jsx
Related
Hi everyone Im trying to add a save button to my quill text editor (code below). I have it typing out to HTML but now I need to have a button that saves it and also a button on a different page that can reload the same thing. I have not found enough information on this that isn't super specific or relates to my project.
Also the text is printing on screen aswell in a "HTML" format and I cant figure out how to get it logging without printing that on screen but this is secondary.
Thank You
{% load static %}
<HTML>
<head>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<link rel="stylesheet" href="{% static "css/text_editor.css" %}">
<meta charset="UTF-8">
<title>Collapsible Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static "css/side.css" %}">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="blue">
<div class="nav-wrapper">
Logo
<a href="/signup/front_page" class="header__image" style="color: orange"><i class="material-
icons">landscape</i></a>
<ul class="right brand-logo">
<li>Sass</li>
<li>Components</li>
<li>Account</li>
<li>LOGOUT</li>
</ul>
</div>
</nav>
</head>
<div class="container" id="editor-container">
<body>
<div id="editor" style=height: 200px></div>
<div id="editor style="height: 200px"></div>
</body>
<div class="container javascript" id="delta-container"></div>
<script>
var toolbarOptions = [
[{ 'font': [] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic'],
[{ 'align': [] }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'color': [] }, { 'background': [] }],
[ 'image', 'link', 'video' ],
['blockquote'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
['clean'] // remove formatting button
]
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function logHtmlContent() {
console.log(quill.root.innerHTML);
}
quill.on('text-change', update);
var container = document.querySelector('#delta-container');
update();
function update(delta) {
var contents = quill.getContents();
console.log('contents', contents);
var html = "contents = " + JSON.stringify(contents, null, 2);
if (delta) {
console.log('change', delta)
html = "change = " + JSON.stringify(delta, null, 2) + "\n\n" + HTML;
}
container.innerHTML = HTML;
hljs.highlightBlock(container);
}
</script>
</html>
html,body {
margin: 50;
height: 95%;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#editor-container {
height: 100%;
/* added these styles */
flex: 1;
display: flex;
flex-direction: column;
}
#editor {
height: 100%;
/* added these styles */
flex: 1;
overflow-y: auto;
top: 0px;
width: 100%;
}
.container:first-child {
border-right: 0px;
}
I am a beginner in react. When I render elements with createElement, it works fine. But rendering like below with JSX, it throws and error saying Uncaught SyntaxError: Unexpected token <
const { createElement } = React;
const { render } = ReactDOM;
const style = {
fontFamily: 'Arial',
color: 'White',
backgroundColor: 'Red',
padding: '10px',
border: '10px solid black'
}
render(
<h1 id="emp-title" className="header" style={style}>Full time Employee</h1>,
document.getElementById('react-container-jsx')
);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<title>React 101</title>
</head>
<body>
<div id="react-container-jsx"></div>
<script src="index.js"></script>
</body>
</html>
Attempts: tried but did not work
<script src="index.js" type = "text/babel"></script>
Also
<script src="index.js" type = "text/jsx"></script>
Didn't work. Any help is much appreciated.
You will need to link babel-standalone as well
And add type="text/babel" to the script tag.
Working snippet:
const { createElement } = React;
const { render } = ReactDOM;
const style = {
fontFamily: 'Arial',
color: 'White',
backgroundColor: 'Red',
padding: '10px',
border: '10px solid black'
}
render(
<h1 id="emp-title" className="header" style={style}>Full time Employee</h1>,
document.getElementById('react-container-jsx')
);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<title>React 101</title>
</head>
<body>
<div id="react-container-jsx"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
Basically im Creating A Markdown Previewer In Reactjs As Of Now Im Getting Error like Uncaught TypeError: value.replace is not a function and Had No Idea What Causing It Any Help Here if I Remove this.format from here dangerouslySetInnerHTML={this.format((this.rawMarkup()))} /> works fine but while typing on input box if i press enter it is not taking me to next line
var App =React.createClass({
getInitialState:function(){
return{
value:"My Value"
}
},
updateValue:function(modifiedValue){
this.setState({
value:modifiedValue
})
},
format: function (value) {
return { __html: value.replace(/\r?\n/g, '<br>') };
},
rawMarkup: function() {
var rawMarkup = marked(this.state.value.toString(), {sanitize: true});
return { __html: rawMarkup };
},
render:function(){
return(
<div className="inputBox container-fluid">
<h1 className="text-center text-primary">Hello Coders !!!</h1>
<div className="row">
<div className="col-md-6 col-md-offset-1">
<InputBox value={this.state.value} updateValue={this.updateValue}/>
</div>
<div
className="outputBox col-md-6 col-md-offset-1"
dangerouslySetInnerHTML={this.format((this.rawMarkup()))} />
</div>
</div>
);
}
});
var InputBox =React.createClass({
update: function() {
var modifiedValue = this.refs.initialValue.value;
this.props.updateValue(modifiedValue);
},
render:function(){
return(
<textarea type="text" value={this.props.value} onChange={this.update} ref="initialValue">
</textarea>
);
}
});
ReactDOM.render(<App />,
document.querySelector("#app")
);
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>React Tutorial</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.outputBox,textarea{
width: 400px;
border: 5px solid gray;
margin: 0;
height: 500px;
}
</style>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>
As you are using markdown you don't need replace \n to <br>, you can just set breaks option to true
rawMarkup: function() {
return { __html: marked(this.state.value, { sanitize: true, breaks: true }) };
},
Example
This is my code
<!DOCTYPE html>
<html class="no-js" ng-app="test"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title></title>
<meta content="width=device-width" name="viewport">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js"></script>
<style>
body {
padding: 60px;
min-height: 600px;
}
.grid {
width: 900px;
height: 400px;
}
.placeholder {
height: 50%;
width: 50%;
border: 3px solid black;
background: #ccc;
}
</style>
</head>
<body ng-controller="Main">
<h2>Grid</h2>
<button ng-click="export()">Export to Csv</button>
<button ng-click="exportPdf()">Export to Pdf</button>
<div class="custom-csv-link-location">
<br />
<span class="ui-grid-exporter-csv-link"> </span>
</div>
<br />
<div>
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-move-columns class="grid"></div>
</div>
<button ng-click="print()">Print</button>
<!-- <div class="placeholder"> -->
<!-- </div> -->
<br>
<br>
<script>
var app = angular.module('test', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns']);
app.controller('Main', function ($scope, $http, $filter, uiGridConstants) {
$scope.filteredData = [];
$scope.gridOptions = {};
$scope.gridOptions = {
paginationPageSizes: [10, 15, 20],
paginationPageSize: 10,
columnDefs: [
{ name: 'id', enableColumnMenu: false },
{ name: 'name', pinnedLeft: true, enableColumnMenu: false },
{ name: 'age', pinnedRight: true, enableColumnMenu: false },
{ name: 'company', enableColumnMenu: false },
{ name: 'email', enableColumnMenu: false },
{ name: 'phone', enableColumnMenu: false },
//{ name: 'about', width: 200, enableColumnMenu: false }
],
exporterPdfDefaultStyle: { fontSize: 9 },
exporterPdfTableStyle: { margin: [10, 10, 10] },
exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'A3',
//exporterPdfMaxGridWidth: 1000,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
$scope.export = function () {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport('all', 'all', myElement);
};
$scope.exportPdf = function () {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.pdfExport('all', 'all', myElement);
};
});
</script>
</body>
</html>
In the above code i have 500 rows data to display with paging , but when user click print button printing total grid data by using angularjs. so please could somebody help me to resolve this,because i am new to this technology
Hint 1:
If you refer in how to print with ui-grid, the ui-grid website indicates help at Exporting Data, where you can export your data from the grid menu.
Hint 2
If you want to manage exporting to Pdf in a custom menu item, you have to define something like this:
$scope.gridOptions = {
gridMenuCustomItems = [
{
title: 'Exporting as PDF',
action: function ($event) {
var exportColumnHeaders = uiGridExporterService.getColumnHeaders(this.grid, uiGridExporterConstants.ALL);
var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var docDefinition = uiGridExporterService.prepareAsPdf(this.grid, exportColumnHeaders, exportData);
if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
uiGridExporterService.downloadPDF(this.grid.options.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).download();
}
},
order: 2
}
}
Note: You have to include reference to this at your angular controller: uiGridExporterService, uiGridExporterConstants
Hint 3
If you have any trouble printing more than 500 rows, there is a bug in the pdfmake.js library that is used by the ui-grid component. For this, you have a workaround at github. You have extra info at this github issue.
I'm having trouble getting the Angular Deckgrid to simply display images.I have added the depency. I have an object. However nothing is showing up on the screen for title. The only error I'm getting in the console is angular-deckgrid: No CSS configuration found. I also am including the script files in the 'head' . Any help in this would be appreciated. See below sample code:
Index.html
<html ng-app="myApp">
<script src="javascripts/Angular/angular.min.js"></script>
<script src="javascripts/Angular/angular-route.min.js"></script>
<script src="javascripts/bower_components/angular-deckgrid/angular-deckgrid.js"></script>
<script src="javascripts/imagesloaded.pkgd.min.js"></script>
<script src="javascripts/Angular/app.js"></script>
<div ng-controller="mainController">
<div deckgrid class="deckgrid" source="photos">
<div class="a-card">
<h1>{{card.title}}</h1>
<img src="" data-ng-src="{{card.src}}">
</div>
</div>
</div>
app.js
var myApp = angular.module('myApp',['akoenig.deckgrid']);
myApp.controller('mainController', ['$scope',function($scope) {
$scope.photos = [ {title: 'something here',src: "Images/ipsum/one.jpg"},
{title: 'another picture', src: "Images/ipsum/two.jpg"},
{title: 'another picture', src: "Images/ipsum/three.jpg"},
{title: 'another picture', src: "Images/ipsum/four.jpg"},
{title: 'another picture', src: "Images/ipsum/five.jpg"},
{title: 'another picture', src: "Images/ipsum/six.jpg"}
];
}]);
you need use this css
<style>
.deckgrid[deckgrid]::before {
content: '4 .column.column-1-4';
font-size: 0;
visibility: hidden;
}
.deckgrid .column {
float: left;
}
.deckgrid .column-1-4 {
width: 25%;
}
</style>
Reference: https://github.com/akoenig/angular-deckgrid