Relocate the text within the confines of the border

Question

Relocate the text within the confines of the border

Currently, I am attempting to position the text within a bold border of its parent element. My component, built using material-ui, resembles this code:

   <List className={classes.root}>
       <Typography className={classes.fieldLabel}>Attach PDF</Typography>
             {/***SOME CODE**/}
  </List>

The styles for the two classes (root and fieldLabel) are defined as follows:

root: {
    width: "100%",
    maxWidth: 360,
    border: "3px solid #388FCE",
    marginLeft: "3%",
    maxHeight: 200,
    overflow: "auto",
    borderTop: "40px solid #388FCE",
    position: "relative",
  },


 fieldLabel: {
    transformOrigin: "0 0 ",
    position: "absolute",
    fontSize: "1rem",
    textTransform: "uppercase",
    letterSpacing: "3px",
    top: 0,
    left: 0,
    color: "red",
    fontWeight: "bold",
  },

I am struggling with getting the "Attach PDF" label to appear inside the border:

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

What could I be doing incorrectly that is causing the label to remain inside the border instead of appearing on it?

javascript html css reactjs material-ui

Answer 1

Answer №1

If you want to add a heading to the material-ui List without forcing it into a border, simply wrap the List in a separate component that displays the header before the list:

const ListWithHeading = ({heading, classes, children, ...props}) => (
    <div className="list-container">
        <Typography className={classes.fieldLabel}>{heading}</Typography>
        <List classes={classes} {...props}>{children}</List>
    </div>
);

You can style the element containing the heading by adding a specific class, such as setting a background color and making it full width.

To render this structure, use the following code:

<ListWithHeading heading="Attach PDF">
    {/* list items here */}
</ListWithHeading>

Answer 2

If you want to add a heading to the material-ui List without forcing it into a border, simply wrap the List in a separate component that displays the header before the list:

const ListWithHeading = ({heading, classes, children, ...props}) => (
    <div className="list-container">
        <Typography className={classes.fieldLabel}>{heading}</Typography>
        <List classes={classes} {...props}>{children}</List>
    </div>
);

You can style the element containing the heading by adding a specific class, such as setting a background color and making it full width.

To render this structure, use the following code:

<ListWithHeading heading="Attach PDF">
    {/* list items here */}
</ListWithHeading>

Answer 3

Answer №2

Instead of attempting to manipulate space and time in order to relocate the text, why not simply eliminate the top border? This way, the height and background of the text will seamlessly blend with the intended layout.

I have customized your elements using classes, and it just works without distorting space or time :)

.container {
    width: 100%;
    max-width: 360px;
    border: 3px solid #388FCE;
    margin-left: 3%;
    max-height: 200px;
    overflow: auto;
    border-top: none;
    display: block;
  }


 .labelText {
    height: 40px;
    line-height: 40px;
    background: #388FCE;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: red;
    font-weight: bold;
    display: block;
    padding-left: 10px
  }

<List class="container">
       <Typography class="labelText">
        Attach PDF
       </Typography>
             {/***SOME CODE**/}
  </List>

Answer 4

Instead of attempting to manipulate space and time in order to relocate the text, why not simply eliminate the top border? This way, the height and background of the text will seamlessly blend with the intended layout.

I have customized your elements using classes, and it just works without distorting space or time :)

.container {
    width: 100%;
    max-width: 360px;
    border: 3px solid #388FCE;
    margin-left: 3%;
    max-height: 200px;
    overflow: auto;
    border-top: none;
    display: block;
  }


 .labelText {
    height: 40px;
    line-height: 40px;
    background: #388FCE;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: red;
    font-weight: bold;
    display: block;
    padding-left: 10px
  }

<List class="container">
       <Typography class="labelText">
        Attach PDF
       </Typography>
             {/***SOME CODE**/}
  </List>

Answer 5

Answer №3

My recommendation would be to utilize the ListSubheader component from Material-UI, which can be found at https://material-ui.com/api/list-subheader/

   <List 
      className={classes.root} 
      subheader={
        <ListSubheader className={classes.subHeader} component="div">
          Attach PDF
        </ListSubheader>
      }>
          {/*** Your List Items**/}
  </List>

You can also customize it with styles. For example:

subHeader: {
  background: '#388FCE',
  // add any other necessary styles here
}

Answer 6

My recommendation would be to utilize the ListSubheader component from Material-UI, which can be found at https://material-ui.com/api/list-subheader/

   <List 
      className={classes.root} 
      subheader={
        <ListSubheader className={classes.subHeader} component="div">
          Attach PDF
        </ListSubheader>
      }>
          {/*** Your List Items**/}
  </List>

You can also customize it with styles. For example:

subHeader: {
  background: '#388FCE',
  // add any other necessary styles here
}

Relocate the text within the confines of the border

Answer №1

Answer №2

Answer №3

Similar questions

Angular JS Directive is a powerful feature that allows developers

Encountering a blank screen issue post building with vue-cli-service and electron:build

Using React: Passing the state value of Child1 to the Parent component, then passing it back down to Child2 from

the sorting functionality failing to switch between ascending and descending orders

Showing no background color until the user lifts their finger

aligning a trio of button pieces to seamlessly merge in CSS

increase the number of rows in the table automatically

Is AngularJS causing issues with Foundation modals? Any solutions to this problem?

Issues with the CSS animation not properly scaling

Using res.locals with TypeScript in Next.js and Express

Ways to merge duplicate entries in an html table?

Tips for effectively managing errors in Next.js getStaticProps

Ways to incorporate a dependency from an external script

Python makes sure that HTML values remain constant even after a button is clicked by Selenium

What are the steps to install the LTS release of NodeJS if Node 10 is already installed on my system?

Kineticjs is not performing up to par

What is the reason behind JSF using the file extension .jsf and GET parameter ln=js for delivering JavaScript resources?

Combining react-draggable and material-ui animations through react-transition group: a comprehensive guide

Using htmlentities in PHP while maintaining the integrity of HTML tags

Developing microfrontends using Angular involves loading and navigating a compiled package from npm