Блог

Главная - Вопросы по программированию - Перемещение текста внутри границы

Перемещение текста внутри границы

#javascript #html #css #reactjs #material-ui

#javascript #HTML #css #reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь переместить текст внутри жирной границы моего родительского элемента. Я использую material-ui, и мой компонент выглядит следующим образом:

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

Стиль 2 элементов (корневых классов и классов fieldLabel):

 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",
  },

Я пытаюсь переместить этот прикрепленный знак PDF внутри границы:

введите описание изображения здесь

Что я делаю не так, поэтому знак все еще находится внутри, а не в границе?

Комментарии:

1. Вместо того, чтобы перемещать его в границу, установите фон текста в соответствии с цветом границы и сделайте так, чтобы он охватывал ширину родительского элемента

2. в качестве альтернативы вы можете установить верхнее значение в отрицательное число.

3. @YannickEich Знак скрывается за границей.

4. @szczocik Это одна из идей, которую я бы не отказался, если нет другого решения

5. Это не то, как использовать границы. Вместо этого используйте элемент контейнера, подобный a div , который имеет цвет в качестве цвета фона, и поместите его в верхнюю часть вашего поля.

Ответ №1:

Нет никакой причины помещать этот заголовок в элемент material-ui List и помещать его в рамку. Просто оберните List в компонент, который отображает заголовок перед списком:

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

Вы можете придать элементу, содержащему heading класс a, стиль, например, придать ему цвет фона и сделать его во всю ширину.

Визуализируйте это так:

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

Ответ №2:

Вместо того, чтобы пытаться сгибать пространство и время для перемещения текста вверх — просто удалите верхнюю границу — и высота и фон текста будут соответствовать внутреннему макету.

Я уклонился от ваших элементов с помощью классов — и это просто работает. и никакого изгиба пространства или времени 🙂

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


 .fieldLabel {
    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="root">
       <Typography class="fieldLabel">
        Attach PDF
       </Typography>
             {/***SOME CODE**/}
  </List>

Ответ №3:

Я предложу вам использовать ListSubheader 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>

И
добавить к нему стили. например:

 subHeader: {
  background: '#388FCE',
  // other required styles
}