时间戳

首页 > 解决方案 > 在弹性框中旋转文本后保持其他样式

javascript - 在弹性框中旋转文本后保持其他样式

问题描述

我正在使用表（Ag-grid）。标题的样式是可授予的（可以通过道具更改），即可以更改高度/宽度和文本对齐方式。由于我无法访问每个标题单元格中的标题高度，因此我在标题单元格中使用弹性框来正确保持文本对齐（垂直/水平）。

现在我收到了一个新的更改请求，要求有另一种样式以使 text(HeaderName) 垂直因此用户可以为那些宽度不足的 Header 旋转文本。像这样在此处输入图像描述。为此，我在 HeaderCellRenderer 中进行了更改

我的问题是，如果我旋转文本，我的垂直对齐（上/中/下）和水平对齐（左/中/右）与客户预期的不一致。所有对齐方式都应与未旋转文本时相同。

请协助我这样做。

这是我附上的一个 plunker 链接，只是为了向您展示我的 Header 单元格是（Its dummy），以及我面临的问题。应用旋转后，文本对齐（上/下/左/右）系统的行为应与非旋转相同。

// 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

标签： javascripthtmlcssreactjsag-grid-react

解决方案

您必须定义一个“转换原点”并删除“宽度：100％”然后您必须使用 flex 属性移动您的内部容器（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>

推荐阅读