The size of the panel header does not seem to be adjusting as expected within the React

I need help adjusting the header size in a React-Bootstrap Panel within a Typescript application. I've tried wrapping the text in <h1> tags as specified in the documentation, but there seems to be no change.

Even with attempts to add inline styles or a CSS class to adjust the font size, nothing seems to work.

Below is the code snippet:

const title = (<h1>{Constants.gameTitle}</h1>);
<PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>

Would appreciate any suggestions on how this could be achieved effectively?

cssreactjsbootstrap-4react-bootstrap

Answer №1

http://jsfiddle.net/L5tLot9h/

Because the panel-title class comes with a default font-size, you must use !important to override the previously set CSS.

const title = (<h1 style={{fontSize: '80px !important'}}>{Constants.gameTitle}</h1>);
<PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>

Why aren't the font-size styles applied to elements like h1 or h2?

It is because of the existing font-size property in the panel-title class that takes priority over the heading elements.

https://i.sstatic.net/sFGdt.png

How can this be fixed?

You can either use inline styles with !important as demonstrated above, or increase specificity by adding additional tags, ids, or classes to the selector.

or

You could also define a CSS rule with the same selector later in the stylesheet (the last one defined wins).

CSS file

h1.panel-title {
    font-size: 36px;
}
h2.panel-title {
    font-size: 30px;
}
h3.panel-title {
    font-size: 24px;
}
h4.panel-title {
    font-size: 18px
}
h5.panel-title {
    font-size: 14px
}
h6.panel-title {
    font-size: 10px;
}

Answer №2

If you want to achieve this, you can follow the example provided here

var {Button, PanelGroup, Panel, ButtonGroup, DropdownButton, MenuItem} = ReactBootstrap

const titleStyle = {'fontSize': '50px'}

const title = <h1 style={titleStyle}>Tarun</h1>;

const nav = ( <PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>);


var mountNode = document.getElementById("app")
ReactDOM.render(nav, mountNode);

You can also access a live demo on JSFiddle given below

http://jsfiddle.net/6u0eaqur/1/

Once you implement it, you should see the following result

https://i.sstatic.net/O5Suv.png

Why isn't the font size changing with h1, h2, or h3 tags?

The font-size is not changing because the React component assigns a panel-title class with a specified font-size of 16px, overriding any tag-specific styles.

https://i.sstatic.net/8atRQ.png

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

Only object types can be used to create rest types. Error: ts(2700)

As I work on developing a custom input component for my project, I am encountering an issue unlike the smooth creation of the custom button component: Button Component (smooth operation) export type ButtonProps = { color: 'default' | 'pr ...

javascriptreactjstypescript

How can I modify the color scheme of radio buttons to include a variety of different hues?

Is there a way to customize the colors of my radio buttons with three different options? I want numbers 1, 2, and 3 to be red, number 4 to be orange, and number 5 to be green... Here is the code I am using: /* Option 1 */ input[type='radio'] { ...

css

In Firefox, the scaling of svg masks is not functioning properly

Trying to utilize an svg for masking an image, but encountering scaling issues in Firefox. Safari and Chrome seem to display correctly, with proper fallbacks for IE. Website: SVG File: CSS: -webkit-mask: url("../img/feelfilms-logo.svg#logo_mask"); mask ...

csssvgscalemask

Attempting to assign the object retrieved from the interface as the new value for window.location.href

I encountered an issue where the error message Type MyInterface' is not assignable to type 'string' popped up. Although I comprehend the problem, finding a suitable solution has proven to be challenging. MyInterface solely returns one item, ...

javascriptreactjstypescriptinterface

Unable to locate a selenium-recognized element within this field

I've attempted to use FindElementByName but I keep getting a no such element error when it should recognize this name. What am I overlooking? This issue is occurring on the website Intacct.com. Despite my efforts, I have been unable to find a unique C ...

cssexcelvbaseleniumweb-scraping

Tips for ensuring the scrollbar remains at the bottom as new data is added

My dilemma revolves around a scrollable content feature. As new data is continuously added, the scrollbar naturally appears to navigate through it. However, my goal is for the scrollbar to always remain positioned at the bottom automatically, eliminating t ...

reactjs

The width of sibling divs in IE7 does not match their sibling's width

Currently facing a challenge with resolving an IE7 problem. My goal is to ensure that my sibling div has the same width as its counterparts. The initial sibling serves as the header, whereas the subsequent siblings have specific dimensions. Any advice woul ...

csshtmlinternet-explorer-7

effective ways to extract objects from nested structures using a specific identifier

In this sample data, I am looking to filter an object based on its ID key let myData = { "nodeInfo": { "9": { "1": { "ID": "14835" ...

javascriptjquerynode.jsreactjs

What steps should I take to ensure my navigation bar spans across the entire page?

I'm new to this and looking for help. I want my navigation bar to span the entire width of the page without any white spaces on the sides or top. Below is my CSS: nav ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; backgr ...

htmlcssnav

What causes the disappearance of my Bootstrap navbar when viewing on mobile devices?

On larger screens, the bootstrap navbar displays perfectly, but on mobile devices, it completely disappears. I've attempted to use @media queries and adjust sizes, but I'm still facing issues. **css** #navbar {display: inline-block; back ...

mobilebootstrap-4navbar

Design adaptable HTML backgrounds

Hello, I am working on a webpage that uses two background images. Here is the CSS I'm using: body{ background: url('<?=base_url();?>/assets/header_bg.png') no-repeat, url('& ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

IE11 React application cannot recognize the <main> tag

When using my React application, I encountered the following error message in the dev console while using IE11: Warning: The tag <main> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase let ...

reactjshtmlinternet-explorer-11

Expanding a wrapper to fit the entire width of its content

I am facing an issue where the background color of a wrapper does not adjust to the overflowing content within it. How can I make sure that the background stretches behind all the content, regardless of its size? <div style="background-color: black;m ...

htmlcss

The omission of property transmission when invoking a component

I'm currently learning React.js on Udemy through video tutorials, and I've hit a roadblock when trying to pass a property while calling a component. Interestingly, my code matches exactly with the instructor's code in the tutorial video wher ...

reactjsreact-router-dom

Adjust the width of the indicator on Tabs in Material-UI

Essentially, this is the functionality I am trying to achieve. The "indicatorClassName" attribute is not providing the desired result for me, and even after attempting to use the indicator from the provided CodeSandbox link, there was no change. Upon revie ...

reactjsfrontendmaterial-ui

What is the method for retrieving the input text value in CodeMirror when utilizing a class-based approach instead of a function-based one?

I have taken up the challenge of creating a leetcode clone with reactjs and nodejs. To push myself, I decided to write it using a class instead of an overall function. However, I am facing issues with getting <button onClick={() => axios.post("h ...

node.jsreactjsreact-nativeclasscodemirror

mention the element to display on the pagination

I find the logic here quite puzzling. This particular code block seems to be related to pagination, as it involves a function that is triggered upon clicking. componentDidUpdate() { const { location } = this.context; const { query } = this; if ...

javascriptreactjs

How can we efficiently recycle Redux reducers and actions?

I have been exploring the idea of creating an HOC or reducing the number of reducers/actions. My approach involves a library-reducer that consolidates all data and an getItemList action to manage various actions. In this setup, when invoking the action fro ...

reactjsredux

What exactly is the function of the NextPage feature in Next.js?

Recently, I began incorporating TypeScript into my Next project. Could someone clarify the purpose of the following code snippets for me? import { NextPage } from 'next'; export const Page: NextPage = () => {} After reviewing the documentation ...

javascriptreactjstypescriptnext.jstsx

What could be causing the delay in the execution of Redux dispatch?

When I open a file and parse it, the dispatch into redux state takes longer than anticipated. It seems like the dispatch itself is taking several hundred milliseconds more than the reducer. After opening and parsing the file, the following dispatch is mad ...

reactjstypescriptreact-redux