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

Surprising sight of a blank canvas behind the font-awesome icon

Is there a way to remove the unexpected white background that appears when adding a font-awesome icon? Here is the HTML code: <div class="notifications-window" id="close-notifications"> <div class="notifications-header&qu ...

htmlcssiconsfont-awesomestyling

Creating a 3D slider on Owl-carousel 2: A Step-by-Step Guide

I am trying to create a slider using Owl-carousel, but I'm having trouble implementing it. I came across this example https://codepen.io/Webevasion/pen/EPMGQe https://i.stack.imgur.com/KnnaN.jpg However, the code from this example doesn't seem ...

htmljquerycssowl-carousel

Ensure the function has completed setting state before proceeding to the next function

async componentDidMount() { this.loadSelectors(); this.useSelectors(); }; loadSelectors = () => { this.setState({"Selector": "Test"}); } useSelectors = () => { console.log(this.state.Selector); } Is there a way to ensure that loadS ...

javascriptreactjs

Having trouble installing shadcn-ui on next.js version 13.4.9?

Error: The request to failed with a connection timeout to 76.76.21.9:443. at ClientRequest. (file:///D:/Projects/WebProjects/Ecommerce/my-app/node_modules/node-fetch/src/index.js:108:11) at ClientRequest.emit (node:events:513:28) at TLSSocket.socketErrorL ...

next.js

Hide the 'white' color on visited links and category tags in the WordPress blog page

I created a custom WordPress theme, and I am having trouble styling the bootstrap navigation. I want the text to be white and change to brown when selected. However, my attempts to add a separate class for H1 tags on the blog post page have not been succes ...

csswordpressclassblogs

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex

Adding additional properties to Material UI shadows in Typescript is a simple process that can enhance the visual

https://i.stack.imgur.com/9aI0F.pngI'm currently attempting to modify the Material UI types for shadows, but encountering the following error when implementing it in my code. There is no element at index 25 in the tuple type Shadows of length 25. I&a ...

reactjstypescriptmaterial-ui

Issue with Next-Auth: Session and Account data not being saved or retrieved properly using Prisma adapter

Currently, I am in the process of integrating credentials authentication with next-auth. GitHub and Google authentication are working perfectly, as after signing in via these providers, the user, account, and session are stored correctly in a PostgreSQL ...

authenticationaxiosnext.jsnext-auth

Implementing unique union type in React: Effective ways to declare typescript type for prop value

I am currently facing an issue where I need to set a specific type for a prop value. However, the challenge lies in the fact that the types are string unions which can vary depending on the usage of the React Component. Let me provide you with the TypeScr ...

reactjstypescript

Encountered an issue with locating the module 'webpack-cli/bin/config-yargs' while attempting to run webpack-dev

Encountering an error while trying to start the webpack dev server with the command provided below. Despite suggestions that it could be due to outdated webpack versions, I am confident that all components are up to date: [email protected] [email ...

javascriptreactjstypescriptwebpackwebpack-dev-server

Ways to eliminate shadows in the Material-UI design scheme

How can I remove shadows in the MuiPaper component? I came across a solution: here However, the solutions provided did not work for me. I am only able to override the root component (MuiPaper) but the shadow is controlled by the class MuiPaper-elevation ...

reactjsmaterial-designmaterial-uireact-admin

ESLint is indicating an error when attempting to import the screen from @testing-library/react

After importing the screen function from @testing-library/react, I encountered an ESLint error: ESLint: screen not found in '@testing-library/react'(import/named) // render is imported properly import { render, screen } from '@testing-lib ...

reactjstypescripteslintreact-testing-library

After updating to version 11 of Next.js, encountered an error due to an unsupported file type: undefined

While attempting to load an image after updating Next.js to version 11 using the code below: import segmentLogoWhitePng from 'assets/images/my-image.png' I encountered the following error message: TypeError: unsupported file type: undefined (fil ...

reactjswebpacknext.js

Input the date manually using the keyboard

I am currently utilizing the rc calendar package available at https://www.npmjs.com/package/rc-calendar When attempting to change the year from 2019 to 2018 by removing the "9," it works as expected. However, when trying to delete the entire date of 1/15/2 ...

javascripthtmlreactjsreduxmaterial-ui

The power of Webpack in handling .css files

mm2:OptionsAPI ivan$ npm -v 6.13.4 When I try to include a .css file, import BaseTable, { Column } from 'react-base-table' import 'react-base-table/styles.css' An error occurs with the following message: ERROR in ./node_modules/rea ...

reactjsnpmwebpack

Ways to prevent a page from scrolling

I'm currently working on a webpage that features a vertical drop-down menu. The issue I'm facing is that when the menu drops down, it causes the text below it to be pushed downwards and off the page. While this behavior is anticipated, it also tr ...

htmlcssscroll

Is there a way to modify the CSS or add custom styling within an iframe form?

Currently I am working on the following page: , where an embedded javascript form called infusionsoft (iframe form) needs to be made responsive at the request of my client. I'm wondering if there is a way to override the css or inject custom styles i ...

javascripthtmlcsswordpressiframe

Turn off hover opacity effect for a specific image

Currently, I've implemented a hover opacity effect on my images using the following CSS: img { opacity: 1.0; filter: alpha(opacity=1.0); } img:hover { opacity: 0.6; filter: alpha(opacity=0.6); } However, I now have a specific image for whi ...

csshoveropacity

The authentication loop conundrum in React Axios PUT is driving me crazy!

While authentication works fine for GET requests, I encounter an issue when trying to authenticate PUT and POST requests as it prompts for the USERNAME and PASSWORD repeatedly. I have written authentication code for both GET and PUT, but I am unable to det ...

reactjsaxios

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout