Сохранение других стилей после поворота текста в гибком поле - PullRequest
Новая
       58

Сохранение других стилей после поворота текста в гибком поле

0 голосов
/ 06 августа 2020

Я работаю с таблицей (Ag-сеткой). Стиль заголовков может быть задан (может быть изменен через реквизиты), т.е. высота / ширина и текстовое расположение могут быть изменены. Поскольку у меня нет доступа к высоте заголовка в каждой ячейке заголовка, я использую гибкое поле в ячейках заголовка для правильного выравнивания текста (по вертикали / горизонтали).

Теперь я получил новый запрос на изменение, чтобы иметь его больше стиля, чтобы сделать текст (HeaderName) вертикальным Таким образом, пользователь может повернуть текст для тех заголовков, ширина которых недостаточна. вот так введите описание изображения здесь . Для этого я внес изменения в HeaderCellRenderer

Моя проблема в том, что если я поверну текст, мое вертикальное выравнивание (вверху / по центру / внизу) и горизонтальное выравнивание (влево / по центру / вправо) не соответствует ожиданиям клиента. Все выравнивание должно работать так же, как если бы текст не был повернут.

Пожалуйста, помогите мне сделать это.

Это ссылка на плункер, которую я прикрепил, чтобы показать вам, как выглядит моя ячейка заголовка (Его манекен) и проблема, с которой я столкнулся. После применения поворота система выравнивания текста (сверху / снизу / слева / справа) должна вести себя так же, как и без поворота. 

// Add your code here
function hori(value) {
  var x = document.getElementsByClassName("outer");
  x[0].style.textAlign = value;
 // alert('changed');

  
}
function vertical(value) {
  var x = document.getElementsByClassName("inner");
  x[0].style.alignSelf = value;
 // alert('changed');

  
}
function rotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'rotate(-90deg)';
}
function rotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'rotate(-90deg)';
}
function Notrotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'none';
}
/* Add your styles here */
.outer {
    text-align : center;
    display : flex;
    height : 100px;
    width : 200px;
    background-color : yellow;
    color: red;
    overflow : hidden;
    border : 1px solid black;
    
    
}
.inner {
    align-self : center;
    width : 100%;
   
    
    
}
<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    
<button onclick="rotate()">rotate</button>
<button onclick="Notrotate()">Not rotate</button>
<button onclick="vertical('flex-start')">v-top</button>
<button onclick="vertical('center')">v-center</button>
<button onclick="vertical('flex-end')">v-end</button>
<button onclick="hori('left')">left</button>
<button onclick="hori('center')">center</button>
<button onclick="hori('right')">right</button>
<hr/>
    <div class="outer">
        <div class="inner">
      text
    </div>
        
        
    </div>
    
  
</body>
</html>

https://plnkr.co/edit/epE0bXvqePvpS2zL?preview

1 Ответ

0 голосов
/ 07 августа 2020

Вы должны определить «transform-origin» и удалить «width: 100%», затем вы должны переместить свой внутренний контейнер с помощью свойств гибкости (justify-content) 

// Add your code here
function hori(value) {
  var x = document.getElementsByClassName("outer");
  x[0].style.justifyContent = value;
 // alert('changed');

  
}
function vertical(value) {
  var x = document.getElementsByClassName("inner");
  x[0].style.alignSelf = value;
 // alert('changed');

  
}
function rotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'rotate(-90deg)';
}
function rotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'rotate(-90deg)';
}
function Notrotate() {
  var x = document.getElementsByClassName("inner");
  x[0].style.transform = 'none';
}
    .outer {
        text-align : center;
        display : flex;
        height : 100px;
        width : 200px;
        background-color : yellow;
        color: red;
        border : 1px solid black;
    }
    .inner {
        align-self : center;
        transform-origin: center;
    }
<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    
<button onclick="rotate()">rotate</button>
<button onclick="Notrotate()">Not rotate</button>
<button onclick="vertical('flex-start')">v-top</button>
<button onclick="vertical('center')">v-center</button>
<button onclick="vertical('flex-end')">v-end</button>
<button onclick="hori('flex-start')">left</button>
<button onclick="hori('center')">center</button>
<button onclick="hori('flex-end')">right</button>
<hr/>
    <div class="outer">
        <div class="inner">
      text
    </div>
        
        
    </div>
    
  
</body>
</html>
...