Support Topics Documentation Slack YouTube Blog

Line break in Text-field

How can I enforce a line break in a simple text field if the text runs out of bounds?
This works today if the text contains spaces. However, it does not work if the text is too long for the field and does not contains spaces …
Regards,

It sounds like there should be logic that figures out if the text length is greater than what the input field can display. The logic would inject \n in the right places. You’'d need to use raw text block for the final result so that line breaks are recognized.

Then it’s probably better to choose a text area which is doing the desired breakdown. I just need to get rid of the default underline style of the text area. Any idea how to do this in a theme extension?
Thanks,

Could you post a screenshot showing what you mean by “underline style”?

@mark-piller : Each UI component of type “Textarea” shows a prominent bottom border line.
image
I tried some CSS extensions of the class .MuiInputBase with border-bottom-style: none, but this is without effect.
Regards,

You can create a CSS/LESS extension that hides the underline:

@textareaStandardUnderlineHover : NULL;
@textareaStandardUnderline : none;

This is where an extension can be created:

Regards,
Mark

This is changing the style of all text areas in the app. I was looking for a class definition which I can assign to an individual UI text area component.
Your solution gave me the hint to search in the theme sdk for the textArea component. After some trials I came up with the following working class definition:

.textAreaNoUnderline {
  &.bl-textarea--standard {
    .bl-textarea-input-root {
      &::before {
        border-bottom: none;
      }
      &:not(.bl-textarea-input--focused):not(.bl-textarea-input--disabled):hover {
        &::before {
          border-bottom: none;
        }
      }
    }
  }
}

Thanks and regards,