Fix Size Buttons

Topic: Fix Size Buttons

afshinshahpari@gmail.com free asked 5 years ago

I need to have a container to show buttons with the same size side by side ( multiple row by multiple columns ),

1) How I can have fix the button size that doesn't expand while the text inside that is more than the width, I need it show text in multiple line in some cases and in other case I need to show 3 text in 3 lines.

2) Is there anywhere that I can see what are the properties that I can set for MDBtn and also other components?

Thanks in advance

Add comment

Jakub Mandra staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

Hi,

In your case, I think that it will be best to use Buttons Group. Docs here .

1) How to fix the size - you can write your own class with maxWidth and textWrap and attach it to every problematic button, or add class d-flex to the button's container.

2) Every page of documentation has Overview section and API section. In the second one, you can find every property and method associated with the component. Use the top Tabs to navigate.

Best,

Jakub

afshinshahpari@gmail.com free commented 5 years ago

Thanks Jakub,

I tried using "d-flex" but unfortunately it had no affect. is there any file to import or anything in the code that I have to do in order to use that.

I would appreciate to have a sample source code including other settings that I have to do in order to do that.

There are many other features that are in the help but unfortunately using them has no effect like using "start", "no-gutter", etc.

I thought there must be the same issue?

Thanks in advance for your advice

Jakub Mandra staff commented 5 years ago

Okay, that was my mistake, flex won't help here, unfortunately. I think the only way to do that is to fix the with of all the buttons.

class Buttons extends React.Component {
  render() {
    const style = { width: '200px' }
    return (
      <MDBContainer className="mt-5">
        <MDBRow>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some muuuuuuuuuuuuuuuuuuuuuuch longer text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some muuuuuuuuuuuuuuuuuuuuuuch longer text text text text text text text text text text text text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
        </MDBRow>
      </MDBContainer>
    );
  }
}

export default Buttons;

<p>Okay, that was my mistake, flex won't help here, unfortunately. I think the only way to do that is to fix the with of all the buttons.</p>

<pre class="prettyprint"><code>class Buttons extends React.Component {
  render() {
    const style = { width: '200px' }
    return (
      <MDBContainer className="mt-5">
        <MDBRow>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some muuuuuuuuuuuuuuuuuuuuuuch longer text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some muuuuuuuuuuuuuuuuuuuuuuch longer text text text text text text text text text text text text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
        </MDBRow>
      </MDBContainer>
    );
  }
}

export default Buttons;
</code></pre>

Please insert min. 15 characters.

Jakub Mandra staff commented 5 years ago

To combine more complex layout you could try to play with our new examples of Masonry layouts: https://mdbootstrap.com/docs/react/layout/masonry/

Best,

Jakub

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.8.4
Device: MAC book
Browser: chrome
OS: macos
Provided sample code: No
Provided link: No

afshinshahpari@gmail.com

100Support score
16Questions 2Answers 1Snippets