I was trying to figure out how to apply horizontal space between elements using ReactJS when I noticed a discrepancy that I can't explain.
SSCCE below: (also in jsfiddle)
<!doctype html>
<html>
<body>
<span>foo</span>
<span style='display:inline-block; width:30px'></span>
<span>bar</span>
<div id='div0'></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"> </script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script type='text/javascript'>
var rce = React.createElement.bind(React);
var x = (rce('div', {}
, rce('span', {}, 'foo')
, rce('span', {style: {display: 'inline-block', width: '30px'}})
, rce('span', {}, 'bar')));
ReactDOM.render(x, document.getElementById('div0'));
</script>
</body>
</html>
The above code produces on the output:
Given that the DOM elements are identical (except for the presence of the data-reactid attributes):
Why then, this discrepancy in the spacing ?
That's because of spacing in your HTML code between inline html elements. React removes it by default.
<span>foo</span><span style='display:inline-block; width:30px'></span><span>bar</span>
DEMO
Same result can be achieved with commenting space in your HTML code.
<span>foo</span><!--
--><span style='display:inline-block; width:30px'></span><!--
--><span>bar</span>
DEMO
Also the code actually does differ. As you can notice there is no whitespace in React's generated HTML.
Related
using dark mode in a nextjs web app with tailwind, when scrolling, if you scroll past the scroll container (almost like your bouncing off the bottom or top of the page when scrolling), the dark mode isn't extending all the way, so the color isn't applying and it's just the previous color underneath (white in this case), what is the reason for this and is there a way to extend the dark mode fully?
Browsers that don't work
Firefox
Brave
Chrome
Browsers that do work
Safari
stackoverflow and tailwindcss.com in dark mode handle this well and the dark mode extends fully on the whole page
_app.tsx
<Store state={state} dispatch={dispatch}>
<Head>
<meta charSet="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
</Head>
<div className="h-screen dark dark:bg-black dark:text-white overscroll-auto lg:overscroll-contain">
<Component {...pageProps} id="app" />
</div>
</Store>{" "}
You must apply the styles to the body or :root (HTML) element. For the examples, I'll show them applied to the :root element.
You have two primary options in Next.js - global stylesheet or inline.
Global stylesheet with tailwind directives
Global styles
global.css
#tailwind base;
#layer base {
:root {
#apply dark:bg-black dark:text-white;
}
}
inline class
To apply styles inline, you must create a custom _document page. Again, you can apply the styles to either the body or html tags.
_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html className="dark:bg-black dark:text-white">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
I believe you need to add these classes to the <body> of the document, not just the main div.
There are a few ways to do add css classes to the body in NextJS, but one of the more common ways is to add it in a useEffect or componentDidMount of your Layout component depending on what kind it is.
For example:
useEffect(() => {
document.querySelector("body").classList.add("dark dark:bg-black dark:text-white");
}, []);
I was running into the same problem. Turns out it was because my dark background/foreground color styling was on a React component (a container layout component) rather than being on the body element.
I fixed it by setting the dark background/foreground directly on the body element in my css file:
#layer base {
body {
#apply dark:bg-slate-800 dark:text-white;
}
}
Then in your pages/_app.jsx file or wherever, you can call document.documentElement.classList.add("dark"); and the dark mode will be set properly even on scroll.
https://tailwindcss.com/docs/dark-mode
I tried all of previous answers and none of them worked for me. The only thing that finally worked was to create a _document.js, and add an id to the HTML section:
_document.js
import React from 'react'
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html id="html" className="bg-white">
<Head />
<body className="bg-bg-light dark:bg-bg-dark">
<Main />
<NextScript />
</body>
</Html>
)
}
Then add and remove the dark background (without the 'dark:' prefix) during the toggle:
DarkMode.jsx
useEffect(() => {
if (darkMode !== undefined) {
if (darkMode) {
document.body.classList.add("dark");
document.getElementById("html").classList.add("bg-black")
} else if (!darkMode) {
document.body.classList.remove("dark");
document.getElementById("html").classList.remove("bg-black")
}
}
}, [darkMode])
I did not add the tailwind directive to globals.css
Thanks to Sean W for setting me in the right direction.
I want to change the max-width of a column in a sharepoint list view. For some reason this will work for increasing the column which is a multiline text field but not decrease it.
here is what I have tried
<style type='text/css'>
td.ms-vb2[DisplayName="Current Issue or Update"]
{
max-width:100px !important;
}
</style>
If it is a multiline text field, please set the style for the class start with "ExternalClass" using Jquery below:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("[class*='ExternalClass']").css('max-width', '50px');
});
</script>
I’m working with a HTML file where empty lines are made using: <p><br/></p>. How do I target paragraph elements after this empty lines? I have tried br + p with no result.
[Note: It is not evident for everybody that this is a parent’s selector problem, for it is not about targeting the (parent) paragraph element that contain the line break, but the one following it.]
Note: I generally do not support javascript solutions to CSS questions. However, a pure CSS solution would probably require a relational pseudo class. Currently (as per january 2018) :has() is a part of the CSS Selectors Level 4 Working Draft, but unfortunately it's not (yet?) supported by any browsers.
What you are asking can be achieved with a combination of javascript and CSS. You may use javascript to find paragraphs that contain only linebreaks, and then add a class to these paragraphs (e.g. a class named linebreak). Then use CSS to style the paragraphs immediately following the ones containing line breaks using the CSS adjacent sibling selector (+).
// Find all <br> elements that are children of a <p> element
for(let br of document.querySelectorAll('p > br')) {
// Climb one level up the DOM to select the parent <p>
let p = br.parentNode
// Use regex to check if the <p> contains only linebreaks
if( p.innerHTML.match(/^(<br\s?\/?>)+$/gi)) {
// If so, add the class 'linebreak'
p.classList.add('linebreak')
}
}
/* Select the <p> following the one containing linebreaks */
p.linebreak + p {
color: red
}
<p>Paragraph</p>
<p>Paragraph</p>
<p><br></p>
<p>Paragraph after linebreak (Should be red)</p>
<p>Paragraph</p>
<p><br><br></p>
<p>Paragraph after double linebreak (Should be red)</p>
<p>Paragraph</p>
<p>Paragraph</p>
I do not know a way in CSS, but using jQuery, you can do that.
This is the HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="s.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="sh.js"> </script>
</head>
<body>
<p>LILI</p>
<br>
<p>Dina</p>
<p>ADEM</p>
</body>
</html>
Just use this jQuery:
$( document ).ready(function() {
$( "br" ).nextAll().css( "font-size", "35px" );
});
So it will apply to all paragraph elements after this empty line.
Using that, Dina and ADEM will have font-weight: 35px, while LiLi still normal. If you want to use more than one style you can do:
$("br").nextAll().css({"color":“beige","font-size":“35px",....});
If you want to only target one paragraph after <br> use the jQuery closest() method.
I'm attempting to conditionally show/hide two divs using ng-show with a boolean value in $scope, based on when an AJAX call has completed. Basically, with the following layout:
<div id="div1" ng-show="!loadingData">
<!--Some markup here-->
</div>
<div id="loadingMessage" ng-show="loadingData">
Loading...
</div>
The function provoking the change contains the following:
$scope.loadingData=true;
var promise = dao.doAjaxGet("url");
promise.then(function(data){
//Hide loading message
$scope.loadingData=false;
});
The AJAX call is operating correctly, and this works fine in Chrome, Safari, Firefox, but not the two versions of IE that we are required to support - IE7 and IE8. The loading message stays hidden and div1 stays visible regardless of what status the call is in. Can anyone advise on this?
If you have console.log in your controller, get rid of it. It helped to get things working in IE8 e.g. ng-hide
Turns out this is caching related. Chrome and IE both cache ajax calls after the first call. I've managed to resolve the problem in chrome by introducing cache:false into the ajax call configuration but this seems to have no effect in IE. If anybody has further information on this, please let me know.
Here's a fully working Angular ie7 template. Ues a very old Angular, but works
My HTML File
https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css'>
<!--[if lte IE 8]>
<script type="text/javascript">
// IE7 fix for missing
if (!window.console) {
var console = {
log: function() {},
warn: function() {},
error: function() {},
time: function() {},
timeEnd: function() {}
}
}
</script>
<script src="https://cdn.jsdelivr.net/json2/0.2/json2.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript" src="https://cdn.jsdelivr.net/es5.shim/4.5.7/es5-shim.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angularjs/1.1.5/angular.js"></script>
<script>
/**
* Main AngularJS Web Application
*/
var app = angular.module('myapp', []);
app.controller('MyPageCtrl', pageController);
function pageController($scope) {
$scope.languages = [
{ 'Id': 1, 'Name': 'French' },
{ 'Id': 1, 'Name': 'German' },
];
};
</script>
</head>
<body ng-controller="MyPageCtrl">
<div class="col-xs-12">
<select name="languagesDropDown" id="languagesDropDown" class="form-control" style="width: 200px;">
<option ng-repeat="language in languages" value="{{language.Id}}">{{language.Name}}</option>
</select>
</div>
I faced this same issue of ng-show not working in Internet Explorer.
The official ngShow AngularJS documentation mentions about this, and provides a few workarounds for this.
(I'll copy-paste the text mentioned in that link, in case that link has expired or is not working for some reason)
When using ngShow and / or ngHide to toggle between elements, it
can happen that both the element to show and the element to hide are
visible for a very short time.
This usually happens when the ngAnimate module is included, but no
actual animations are defined for ngShow / ngHide. Internet
Explorer is affected more often than other browsers.
There are several way to mitigate this problem:
Disable animations on the affected elements.
Use ngIf or ngSwitch instead of ngShow / ngHide.
Use the special CSS selector ng-hide.ng-hide-animate to set {display: none} or similar on the affected elements.
Use ng-class="{'ng-hide': expression} instead of instead of ngShow / ngHide.
Define an animation on the affected elements.
The second suggestion (replacing ng-show with ng-if) worked for me. So in your case, you could consider using this -
<div id="div1" ng-if="!loadingData">
<!--Some markup here-->
</div>
<div id="loadingMessage" ng-if="loadingData">
Loading...
</div>
For some reason, when a user has their display set to 125% from the Control panel, IE9 will add extra width inline to elements like so:
<div class="container" id="main" style="width: 1500px">
<!-- Code goes here-->
</div>
The inline style above (with the width) is the one added by IE9. IE8 does not have this problem, and it's definitely triggered by setting the Windows display settings to 125%. Chrome and Firefox display things properly without the extra style too. Don't suppose anybody has a workaround or fix for this? Can't control what settings the users have, but I've seen other sites render properly.
Ok, so I solved this with a conditional comment and a bit of jQuery:
<!--[if IE 9]>
<script type="text/javascript">
window.onload = function () {
if ( $('#main').attr('style') !== 'undefined' ) {
$('#main').removeAttr('style');
}
}
</script>
<![endif]-->
Basically, it checks to see if IE put a "style" attribute on the offending element, and if so, it removes the attribute.
Yep or if you want to be more selective to width and height
jQuery(document).ready(function () {
removeInlineWidthHeightElements($('#main'));
});
function removeInlineWidthHeightElements(element) {
element.attr('style', function (i, style) {
return style.replace(/width[^;]+;?/g, '').replace(/height[^;]+;?/g, '');
});
}
Is it possible to remove inline styles with jQuery?