
You can simply paste this in the developer console.

```js:script.js
const all  = document.querySelectorAll('*')
all.forEach(el => {
    if (el.clientWidth + el.getBoundingClientRect().x > window.innerWidth) {
        console.log(el)
    }
})


```

---
url: https://shreshth.dev/blog/check-if-an-element-is-going-out-of-window-width
---

You can simply paste this in the developer console.

```js:script.js
const all  = document.querySelectorAll('*')
all.forEach(el => {
    if (el.clientWidth + el.getBoundingClientRect().x > window.innerWidth) {
        console.log(el)
    }
})


```

status:published

category:code

Check if an element is going out of window width


- [ ] TODO: This will still break if there's a conflict with other `dependencies` in `package.json`

I recently ran into a problem where I needed a package, but the existing set of npm packages would break if I installed the one I needed. This is because they needed a different Node.js version.

So here's what I did.

1. Switch to my desired version of node:
```sh
nvm use v16
```
2. Install the required package without saving
```sh
npm install --no-package-lock --no-save tailwindcss@^3.3.0
```
3. Define a script in `package.json` and then run it:
```json:package.json
"scripts": {
    "twdev": "tailwindcss -i ./tailwind/styles.css -o ./app/assets/stylesheets/tailwind.css --watch"
}
```
4. As an additional step I could switch back to the node version they were using earlier in a shell script
```sh
# Make note of current node version
nvm ls
# Store that in a variable and switch to that with
nvm use <prev-node-version>
```

---
---

- [ ] TODO: This will still break if there's a conflict with other `dependencies` in `package.json`

I recently ran into a problem where I needed a package, but the existing set of npm packages would break if I installed the one I needed. This is because they needed a different Node.js version.

So here's what I did.

1. Switch to my desired version of node:
```sh
nvm use v16
```
2. Install the required package without saving
```sh
npm install --no-package-lock --no-save tailwindcss@^3.3.0
```
3. Define a script in `package.json` and then run it:
```json:package.json
"scripts": {
    "twdev": "tailwindcss -i ./tailwind/styles.css -o ./app/assets/stylesheets/tailwind.css --watch"
}
```
4. As an additional step I could switch back to the node version they were using earlier in a shell script
```sh
# Make note of current node version
nvm ls
# Store that in a variable and switch to that with
nvm use <prev-node-version>
```

Everything related to code