0

Help. I am not great at UX. I am creating an app in React and using Material UI for the look. I really want to create something like this:

enter image description here

Where the "Some Title" is a dynamic field from my database as well as the contents. The thing I cannot figure out is what is the best (non skanky) way to add the title into the outline? Thoughts?

Charlene
  • 307
  • 3
  • 12
  • You can use a negative `margin-top` on the title to pull it upwards. – Francis Rubio Aug 10 '20 at 18:36
  • Since this looks almost identical to material-ui's outlined input fields, I would recommend investigating which CSS classes they use for those and then try to reuse those same classes as much as possible. This way you can ensure that your look is consistent with the rest of the UI framework, which you should aim for, because consistency is one of the top reasons to use a UI framework in first place. – Christian Fritz Aug 10 '20 at 18:47
  • here is a hint with transform : https://stackoverflow.com/questions/7731310/text-in-border-css-html/63346925#63346925 – G-Cyrillus Aug 10 '20 at 19:40

1 Answers1

0

You can accomplish this by absolute positioning the title with a negative top margin. The title needs to be display:inline-block with a white background and padding so the border doesn't show through.

.borderd-content {
  border: 1px solid #0000ff;
  border-radius: 4px;
  height: 100px;
  margin-top: 20px;
  position: relative;
}

.borderd-content .title {
  margin: -10px 0 0 10px;
  background: #fff;
  padding: 3px;
  display: inline-block;
  font-weight: bold;
  position: absolute;
}

.borderd-content .content {
  padding: 10px;
}
<div class="borderd-content">
  <div class="title">Title</div>
  <div class="content">asdsad</div>
</div>
imvain2
  • 15,480
  • 1
  • 16
  • 21