Вопросы Теги

Установка высоты и d-flex вместе на .card-header не работает, когда содержимое карты-тела переполнено

Вот пример: 

@GET
@Path("retrieve/{uuid}")
public Response retrieveSomething(@PathParam("uuid") String uuid) {
    if(uuid == null || uuid.trim().length() == 0) {
        return Response.serverError().entity("UUID cannot be blank").build();
    }
    Entity entity = service.getById(uuid);
    if(entity == null) {
        return Response.status(Response.Status.NOT_FOUND).entity("Entity not found for UUID: " + uuid).build();
    }
    String json = //convert entity to json
    return Response.ok(json, MediaType.APPLICATION_JSON).build();
}

Взгляните на класс Response .

Обратите внимание, что вы всегда должны указывать тип контента, особенно если вы передаете несколько типов содержимого, но если каждое сообщение будет представлено как JSON, вы можете просто аннотировать метод с помощью @Produces("application/json")

1
задан Michael_B 13 July 2018 в 19:36
поделиться

1 ответ

Card-header - это гибкий элемент карты, поэтому мы должны работать со своим свойством flex. Попробуйте следующее:

Отредактируйте, чтобы объяснить, почему работает следующий код:

  • .card - это гибкая рамка с flex-direction:column
  • .card имеющие два элемента гибкости: .card-header и .card-body
  • Если общая сумма двух элементов гибкости меньше высоты flexbox, указанная проблема не будет возникать. Но в тот момент, когда он превосходит высоту flexbox, свойство flex-shrink обоих элементов гибкости входит в игру и сжимает высоту обоих предметов в равной пропорции.
  • Ниже кодовых наборов flex-shrink для .card-header 0, то есть его высота не изменится, когда высота .card-body увеличивается (за исключением переполнения) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<style>
    .card{
        width: 500px;
        height: 500px;
    }
    .card-header{
        flex: 1 0 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-body{
        overflow-y: scroll;
    }
    .border-red{
        border: 1px solid red;
    }
</style>
<body>

<div class="card text-center">
    <div class="card-header border-red ">
        <div>left</div>
        <div>center</div>
        <div>right</div>
    </div>
    <div class="card-body">
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
    </div>
</div>

</body>
</html>

1
ответ дан dasfdsa 17 August 2018 в 12:23
поделиться
  • 1
    +1. Но можете ли вы объяснить, почему это происходит, как я спросил в вопросе? Обычно у меня не было бы проблем с высотой установки контейнера flexbox. – dasfdsa 13 July 2018 в 18:13
  • 2
    Чтобы быть более конкретным, почему работа над высотой не работает, а гибкая основа? – dasfdsa 13 July 2018 в 19:42
  • 3
    @dasfdsa Chapeau, мужик. Не мог бы лучше сказать это! +1 к вашему редактированию! ;) – ReSedano 14 July 2018 в 00:02
Другие вопросы по тегам:

Похожие вопросы: