The use of dangerouslySetInnerHTML causes the page layout to stretch, expand, or grow in size

I am currently working on my NextJs app, where I'm utilizing CosmicJs as a headless CMS to showcase content on the webpage.

Within the layout of my page, I have structured it with 3 columns, and the content pulled from the CMS is meant to be displayed in the 2nd column.

However, an issue arises as the 2nd column expands, causing the 1st and 3rd columns' width to shrink. How can I prevent this unwanted expansion of the 2nd column?

I've attempted solutions like using flex-grow-0 and grow-0 within the div and parent attributes, but unfortunately, nothing seems to solve the problem.

Below is a snippet of the code in question:

<div className="w-1/2 items-center border-2 border-primary flex-grow-0">
                <div className="flex-grow-0 grow-0" dangerouslySetInnerHTML={{ __html: post?.metadata.content }}/>
            </div>

Your help in resolving this matter would be greatly appreciated. Thank you in advance for your assistance.

cssreactjsnext.jsflexboxcosmicjs

Answer №1

Ah, at last I have uncovered the root of the problem.

Upon upgrading to NextJS 13, I failed to update the tailwind.config.js file to include the /app directory. As a result, Tailwind continued to utilize my customized settings and colors, but did not acknowledge the default tailwind colors and spacing. My webpage consisted of 3 grid columns with the blog content positioned in the central column, yet I was unable to adjust the width of the grid columns.

After making the necessary adjustment to the tailwind.config.js by adding the new /app directory, everything functioned as intended.

content: ['./pages/**/*.{js,ts,jsx,tsx}', 
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
],

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to use jquery to specifically target classes?

I am trying to achieve the following: $('.class.img').css('cellpadding', variable); However, this code does not seem to be working as expected. Despite searching online, I have not been able to find a solution. Any assistance on how to ...

javascriptjquerycssclassselector

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

I am currently experiencing a challenge involving the responsiveness of a website I am developing, particularly when it comes to iPhones. The site utilizes Bootstrap 5 and displays correctly on Android devices and in Chrome Dev Tools. However, upon testing ...

javascripthtmlcssiphonebootstrap-5

What is the best way to implement lazy loading for headless UI Dialog components in a React

Is there a way to implement lazy loading for the headless ui Dialog component while preserving transitions? Below is the current implementation that almost works: // Modal.js const Modal = ({ isOpen }) => { return ( <Transition show={isOpen ...

javascriptreactjsnext.jslazy-loadingheadless-ui

What causes npm to be undefined when I verify node?

screenshot of my terminal Currently learning react and encountered an issue while checking if npm downloaded properly. It appears to be running fine, but for some reason, after I enter 'node' and then try to check npm again, I get an error messa ...

node.jsreactjsnpm

Hovering over an image with CSS for a cool effect - altering the background and text

I'm experimenting with creating a mouseover effect on images where the background becomes dimmer and text appears on top. For example, you can take a look at this page and scroll down to see how the second set of images darken and display text when y ...

cssbackground-image

Modify the class name of the clicked button and another button when a button is clicked in ReactJs

I have a React component that displays two buttons. When the user clicks on the left button, it should change the class of both buttons and render the ListView component. Similarly, when the user clicks on the right button, it should change the class of bo ...

javascriptreactjsmaterial-ui

Tips to center a circular progress bar in Material UI

Does anyone know how to properly center-align a circular progress bar in a login form using material UI? I'm having trouble with it not being positioned correctly: screenshot {isLoading && <CircularProgress />} {user?.ema ...

javascripthtmlcssreactjsmaterial-ui

What is preventing the "car" icon from moving along the designated "path" in an svg file?

When I click "next", the path changes color, but the "car" does not move. When I setState . However, if I setState in: const [position, setPosition] = useState('here!!! I set position') The car moves. What could be the problem? Unfortunately ...

reactjssvguse-effectuse-state

What is the method for accessing Firebase config variables within React code?

Currently in the process of transitioning from Netlify to Firebase Hosting and encountering an issue with my .env environment variables disappearing after a few minutes of being hosted on Firebase. While researching, I discovered that Firebase uses 'c ...

reactjsfirebaseenvironment-variablesfirebase-hosting

The npm installation for react-icons is failing to add the package

I am new to React and I'm attempting to download react-icons. However, I encountered an error that is different from what I have seen before. Can anyone offer assistance? (base) Jana-MacBook-Air:react_project jb$ npm install react-icons --save Respo ...

reactjsnpm

Experimenting with PIXI.js and Jest within a React Single Page Application

I am currently working on a react application that utilizes PIXI.js and @inlet/react-pixi for animations. During testing with Jest, I encountered the following errors: Error: Uncaught [TypeError: Cannot read properties of null (reading 'stage' ...

reactjstypescriptjestjsreact-testing-librarypixi.js

How can I resize or break the overflowing Bootstrap pagination within the parent div based on the resolution?

When utilizing boostrap4 theming for my pagination, a problem arises when loading the page on smaller resolutions than my monitor. The paginate section exceeds the parent div, resulting in an unsightly display. Below is a snippet of my code: <div clas ...

htmlcssbootstrap-4

Overlapping Flexbox elements causing stacking issues

My attempt to create a gallery layout with two larger blocks amidst smaller blocks is not functioning correctly. The large block is overlapping the two smaller blocks below it. Is there a way to prevent block overlapping using CSS? I have searched Stack O ...

cssuser-interfaceflexboxoverlapping

Tips for adjusting the CSS styles within a jQuery plugin

I need some help with styling the form on my test page located at While using FireBug, I noticed a lot of padding space surrounding the tabs within this div: <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> How can I redu ...

jqueryhtmlcss

React Application Experiencing Issue with Google Map Display

Currently, I am in the process of working with the package.json file. The library that I have implemented for my component using Google Maps can be found here. { "name": "webpack-win", "version": "1.0.0", "description": "none", ... "dependencies": ...

google-mapsreactjs

Maintaining Portrait Lock for Viewport in HTML5/CSS3: A Guide

Can the orientation of a mobile device's view port be locked to portrait mode? I tried searching for a solution on Google, but was unable to find clear instructions on how to achieve this. ...

htmlcssmobileviewportportrait

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

javascriptjqueryhtmlcsscss-transitions

Tips for creating a responsive div that contains both an image and description, including automatically resizing the image to fit the

#content { background-color: #ACAE4C; float: right; display: inline-block; padding: 0; } <div id="content"> <div class="pic"></div> <div class="desc"></div> </div> I need assistan ...

htmlcssresponsive-design

Troubleshooting Parallax Logic in NextJS

import Head from 'next/head' import styles from '../styles/Home.module.css' import Image from 'next/image' import React, { useRef ,useEffect, useState } from 'react'; export default function Home() { let ref = use ...

javascriptevent-handlingnext.jsdom-eventsparallax

Transform the date format in react.js using information provided by an API endpoint

I'm currently working on a project using React and TypeScript where I need to format the date retrieved from an API. I am able to map over the data and display it, but I'm struggling to convert it into a format like '22 June 2021'. The ...

reactjstypescript