React-grid-layout: Question: Where do I include the 2 css files

[jamesjsewell]

where do i include the 2 css files in my application?

[STRML]

Anywhere you want.

On Oct 10, 2017 10:21 PM, "James J Sewell" [e-mail] wrote:

where do i include the 2 css files in my application?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/STRML/react-grid-layout/issues/642, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ABJFP7zhj86NiFt4oyzQdrTBV-tQ8K2dks5srDQhgaJpZM4P03FK
.

[jamesjsewell]

I'm not sure what that means?

[jamesjsewell]

'../../node_modules/react-grid-layout/css/styles.css'
'../../node_modules/react-resizable/css/styles.css'
it says to import these, but where do I import them? inside of my javascript? what is making use of these imports and how are they being used if I can just put them anywhere

[jamesjsewell]

could i import them in the head of my html file? I'm just wondering because I'm not sure if these need to be compiled down into my distribution css file

[jamesjsewell]

Well i imported them in the head of my css and now it seems to be working.

[jamesjsewell]

@STRML its working for the most part but I am having an issue that i see others had where the block jumps down below the mouse cursor, it seems i am missing css. You said in a similar issue "Embedding the correct CSS is absolutely necessary for RGL to work properly" I put the two required stylesheets in the head of my html because I am not sure where else to put them for the css to be utilized

[jamesjsewell]

Maybe I could just copy this into my main style sheet? ( COPY THE CSS FROM THE RGL REPO AND PUT IT INTO YOUR MAIN STYLE SHEET, or from the node modules like they say in the docs i guess)

`
.react-grid-layout {
position: relative;
transition: height 200ms ease;
}
.react-grid-item {
transition: all 200ms ease;
transition-property: left, top;
}
.react-grid-item.cssTransforms {
transition-property: transform;
}
.react-grid-item.resizing {
z-index: 1;
will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
transition: none;
z-index: 3;
will-change: transform;
}

.react-grid-item.react-grid-placeholder {
background: red;
opacity: 0.2;
transition-duration: 100ms;
z-index: 2;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.react-grid-item > .react-resizable-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
background-position: bottom right;
padding: 0 3px 3px 0;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: se-resize;
} `

[jamesjsewell]

@STRML yep ^^ that worked. I feel even more stupid now. Maybe there is someone out there just as stupid as me that this will help

[kumarharsh]

@jamesjsewell good that you got it working, although that's not the correct way to do it!

If you're using webpack (you probably should), you can just @import this css file into your css file: https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41970702, or `import 'react-grid-layout/css/styles.css' into your js file with css-loader.

[ErichBSchulz]

so the main doco could be improved...

in the latest Create React App react I just had to include the following in the relevant *.js file:

import 'react-grid-layout/css/styles.css' 
import 'react-resizable/css/styles.css'

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days