Изменить расположение сетки - PullRequest
Новая
       19

Изменить расположение сетки

0 голосов
/ 11 декабря 2018

Я использую Kendo UI, я хочу изменить расположение сетки, но не могу.Внизу, моя сетка ниже поля ввода, я хочу поместить рядом с правой стороной примечания к доставке + мою сетку

пример

Я хочу добавить околодата доставки справа.

Не могли бы вы представить, как я могу это сделать?

1 Ответ

0 голосов
/ 11 декабря 2018

Вы можете использовать display: flex, чтобы решить все проблемы, с которыми вам нужно иметь дело, чтобы получить то, что вы хотите.

См. Прилагаемый фрагмент для демонстрации. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
  
  <style>
    .block-container {
      display: flex;
      flex-direction: row;
    }
    
    .block {
      margin: 10px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="block-container">
    <div class="block">
      <label for="name">Name: </label><input type="text" id="name">
    </div>

    <div class="block">
      <div id="grid"></div>
    </div>
  </div>
  
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ]
  }
});
</script>
</body>
</html>
...