Struggling to make justifyContent function properly when using flexbox in conjunction with material ui

I need assistance with returning JSX to the title prop of a material-ui card component. My goal is to have two boxes displayed with space between them, one on the left side and one on the right side of the header.

Using flex box, I am able to display the divs inline as expected, but I am having trouble moving them across the horizontal axis. Below is a screenshot showing what it looks like currently: screenshot

renderCardTitle() {
    return (
      <div style={{ display: 'inline-flex', justifyContent: 'space-between' }}>
            <div>
                first box
            </div>
            <div style={{ alignSelf: 'flex-end' }}>
                second box
            </div>
        </div>
    );
  }

The code for the card component in question is as follows:

<Card style={styles.cardStyles}>
      <CardHeader
      title={this.renderCardTitle()}
      actAsExpander
      showExpandableButton
      />
      <CardText expandable>
        Details about the quiz
      </CardText>
     </Card>

Any help or suggestions would be greatly appreciated!

cssflexboxmaterial-ui

Answer №1

When using <code>display: inline-flex
, the parent element will collapse to the content size, causing justify-content not to work properly. In such cases, it is recommended to use display: flex instead.

body > div {
  padding: 5px;
}
div {
  border: 1px solid gray;
}
<div style="display: flex; justify-content: space-between">
  <div>
    first box
  </div>
  <div>
    second box
  </div>
</div>

Alternatively, you can give the parent element a width wider than the content of the two boxes.

body > div {
  width: 50%;
  padding: 5px;
}
div {
  border: 1px solid gray;
}
<div style="display: inline-flex; justify-content: space-between">
  <div>
    first box
  </div>
  <div>
    second box
  </div>
</div>

Another option is to add a margin to the second box.

body > div {
  padding: 5px;
}
div {
  border: 1px solid gray;
}
<div style="display: inline-flex;">
  <div>
    first box
  </div>
  <div style="margin-left: 20px;">
    second box
  </div>
</div>

Answer №2

Perhaps the issue lies with the width of the main div element, as it is not filling the entire Card Header container. Have you tried adjusting the width:'100%' property?

renderCardTitle() {
return (
  <div style={{ width:'100%', display: 'inline-flex', justifyContent: 'space-between' }}>
        <div>
            first box
        </div>
        <div style={{ alignSelf: 'flex-end' }}>
            second box
        </div>
    </div>
);
}

Answer №3

The responses provided were instrumental in identifying a two-fold issue:

1) The parent div did not have a width set to 100%. To override the inline style of the card title text component, utilize the text style prop of the card header component as outlined in the Material UI documentation http://www.material-ui.com/#/components/card

      <CardHeader
      title={this.renderCardTitle()}
      actAsExpander
      showExpandableButton
      textStyle={{ width: '100%' }}
      />

2) Additionally, as mentioned in one of the responses, it is necessary to use flex instead of inline-flex, since inline flex collapses to the size of its content.

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

What is the best way to incorporate code into a page with numerous conflicting CSS styles, without resorting to Scoped CSS?

Struggling to incorporate tab code into a page with conflicting CSS? Even after attempts to edit classes and labels, the original code fights back against the new additions. While scoped CSS seems like the perfect fix, it's not widely supported yet. ...

htmlcssmerge

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%. However, when I try to reveal the sidebar by sw ...

javascriptjqueryhtmlcss

Utilizing CSS flex to perfectly align buttons

Struggling to master the art of aligning buttons using flex. On desktop, everything looks perfect: https://i.sstatic.net/vpdXn.png Even in portrait mode on mobile: https://i.sstatic.net/jAAAk.png But when it comes to landscape view, things get a littl ...

htmlcssbootstrap-4flexbox

Javascript functions properly on Chrome, Opera, and Edge browsers, but unfortunately does not work on FireFox and IE 11

If you're interested, I have some code available on JS Fiddle that showcases my skills. var getJSON = function (url) { "use strict"; return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get' ...

javascripthtmlcssinternet-explorerfirefox

What is the best way to link various stylesheets to a Rails project?

In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...

ruby-on-railscss

iOS users are experiencing issues with mobile responsiveness

I've encountered a strange issue with the mobile responsive design of a website. The website in question is While everything displays correctly on desktop using dev tools > responsive, and on any Android device, the problem arises when viewing i ...

cssnext.jstailwind-csstailwind-ui

Using CSS to mask an image may not produce the desired results in the Chrome browser

Example: .mask1 { -webkit-mask-image: url(feather.png); mask-image: url(feather.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } <div class="mask1"> <img src="camp nou.jpg" alt="barcelona" width="600" height="400"> & ...

htmlcss

"Discovering the active span tag in a webpage: A step-by-step guide

I have a main anchor tag with two span tags inside, each with a different class name as shown below. <a class="clickSlide" id="btnmain_login" href="/"> <span class="Icohide"></span> <span ...

htmljquerycss

Tips on adding several elements to an array depending on the selected value from various checkboxes?

I am working on a project where I need to populate an array based on selected checkboxes. Let's assume we have 3 arrays containing strings: const fruits = ["Apple", "Banana", "Orange", "Grapes"]; const vegetable ...

javascriptreactjsmaterial-ui

Removing Delivery Address and Method From Checkout Page in OpenCart 2

Is there a way to remove "Step 2, Step 3: Billing Details" from the Checkout Page in OpenCart 2.0? I have searched for solutions online but haven't found one specifically for OpenCart 2.0. This is what I tried: <div class="panel panel-default" s ...

phpcssopencart

Blending ThreeJS graphics with typical HTML/CSS pages

Is it feasible to swap out an animated image in the background of a website with JSON geometry while keeping the HTML elements in the forefront? I've attempted to utilize DOM Elements in ThreeJS without success. I experimented with incorporating my JS ...

jsonhtmlcssthree.jswebgl

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

javascripthtmlcssarrayslinux

Tips for preventing FormLabel components from turning blue when a radio button is selected

Currently, I am working on a Reactjs project that utilizes Material Ui components. In this project, I am tasked with creating a form to generate a new event where users can select the event location type from three options - In-Person, Hybrid, and Virtual ...

javascriptreactjsformsmaterial-uicrud

CSS is not appearing on my Node.js server application

The code snippet below is from my node.js server (using express): app.get('/appointment/:id',function(req,res){ res.writeHead(200,{'Content-Type':'text/html'}); res.write('<link href="public/css/style.css" rel="st ...

htmlcssnode.jsexpress

Tips for Aligning an Element in the Middle of a Material UI Grid

I've been attempting to center an element inside a Grid using material-ui, but I'm having trouble getting the items to center. <Grid container direction="row" justify="center" alignItems="center"> <My El ...

reactjsmaterial-ui

I find myself struggling to manage my javascript dependencies

Currently, I am utilizing NPM along with various angular packages. As per the tutorial on Basic Grid Part 1 at this link, I am encountering challenges. This is my file directory structure: D:/nodeStuff/uiGrid includes: node_modules uigrid.css uigrid.h ...

javascripthtmlcssangularjsnpm

Make the height of the input element equal to 100% of its parent

I am struggling with setting the height of input (type text) to fit 100% of its parent element (td). I attempted to individually adjust the height of each input using jQuery, but this method is time-consuming, especially since the site I am working on ha ...

htmlcssinputhtml-table

To access an RSS feed, use Google Chrome as your browser

I am struggling with my .php script that generates an RSS-Feed on-the-fly. My goal is to attach a .css stylesheet to this script so that browsers lacking a built-in RSS-viewer can properly display the feed. I achieved this using the following code snippet ...

phpcssgoogle-chromerss

HTML does not support the use of certain symbols

Currently, I am in the process of designing a homepage for my school project. However, I have run into an issue. The content that I want to be displayed on my homepage is as follows: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online ...

htmlcss

Having trouble with pinning the expand column on the far left side of my Material React Table

I am utilizing the Material React Table to display my data in a tree-like structure. My requirement is to pin the expand column (used for collapsing or expanding rows) at the leftmost position, followed by pinning the tasks column. While I have successful ...

reactjswebmaterial-uitanstackmaterial-react-table