Solved

Vertical Text alignment in display mode does not work anymore

  • 31 May 2023
  • 4 replies
  • 197 views
Bart
Badge +1

Since a while I noticed that the vertical alignment via CSS styling is no longer applied properly.

The inner control works well (like in edit mode) but displaying the content of e.g. a dropdown box or multiline text field, is no longer writing vertically.

Also it looks like the length (size) of the controls is not properly set by CSS.

 

I am using this style:
 

.bb-input-vertical-up
{position: absolute;
.nf-filler-control select { height: 100%; width: 100%; }
display: inline;   
transition: width 2s, height 2s, background-color 2s, rotate 2s;
-webkit-transform: rotate(270deg);   
-moz-transform: rotate(270deg);   
-o-transform: rotate(270deg);
transform: rotate(-90deg); z-index: 1;
writing-mode: vertical-lr;
text-align: left;
}
.bb-input-vertical-up:hover{ position: absolute; rotate: 90deg; z-index: 999 !important;}


The code will align the assigned controls, vertically and rotate it -90 degrees (horizontal) again when hovering.

 

When I inspect the control in Display mode then the content is using:

    font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
    color: rgb(68, 68, 68);
    font-size: 10pt;
    visibility: visible;
    border-collapse: collapse;
    writing-mode: vertical-lr;
    text-align: left;
    overflow-wrap: break-word;
    overflow: auto;
    height: 100%;

There is a line saying “writing-mode” which should do the job I assumed.
Now the strange thing is that when I adjust that line (like remove lr -r then is suddenly pops vertical.

Anyone an idea why this happened so suddenly?
Maybe CSS is not declaring everything or not properly. Am I missing things or are there lines modyfied recently?

 

 

icon

Best answer by MegaJerk 1 June 2023, 16:20

View original

4 replies

Bart
Badge +1

This shows what it should look like.. but a bit odd to show it this way 

 

 

MegaJerk
Userlevel 5
Badge +14

Not entirely sure what you’re trying to accomplish but your css is written as SCSS which Nintex Forms doesn’t use. Also it’s missing a few properties. In your :hover{} case you wrote just “rotate: 90deg;” when that function needs a transform prop in front of it. 

The non scss css would end up looking like: 

.bb-input-vertical-up {
   position: absolute;
   display: inline;
   transition: width 2s, height 2s, background-color 2s, rotate 2s;
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   transform: rotate(-90deg);
   z-index: 1;
   writing-mode: vertical-lr;
   text-align: left;
}
 .bb-input-vertical-up .nf-filler-control select {
   height: 100%;
   width: 100%;
}
 .bb-input-vertical-up:hover {
   position: absolute;
   transform: rotate(90deg);
   z-index: 999 !important;
}

 

But even that really doesn’t do much other than just flip all of the text upside-down whenever you hover over it. 

Really if you just wanna turn everything 90 degrees (or 0 when hover) all you need to use is:

.bb-input-vertical-up {   transform: rotate(-90deg);}

.bb-input-vertical-up:hover {   transform: rotate(0deg);}

 

 

SimonMuntz
Userlevel 6
Badge +22

Hi @Bart,

If this was working and is now not you need to look at what has changed in your environment.

If Nintex forms has not been updated to cause the issue, the only other change most likely is a browser update that is interpreting the code differently.

Cool Nintex courses: https://learn.nintex.com/
Bart
Badge +1

Not entirely sure what you’re trying to accomplish but your css is written as SCSS which Nintex Forms doesn’t use. Also it’s missing a few properties. In your :hover{} case you wrote just “rotate: 90deg;” when that function needs a transform prop in front of it. 

The non scss css would end up looking like: 

.bb-input-vertical-up {
   position: absolute;
   display: inline;
   transition: width 2s, height 2s, background-color 2s, rotate 2s;
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   transform: rotate(-90deg);
   z-index: 1;
   writing-mode: vertical-lr;
   text-align: left;
}
 .bb-input-vertical-up .nf-filler-control select {
   height: 100%;
   width: 100%;
}
 .bb-input-vertical-up:hover {
   position: absolute;
   transform: rotate(90deg);
   z-index: 999 !important;
}

 

But even that really doesn’t do much other than just flip all of the text upside-down whenever you hover over it. 

Really if you just wanna turn everything 90 degrees (or 0 when hover) all you need to use is:

.bb-input-vertical-up {   transform: rotate(-90deg);}

.bb-input-vertical-up:hover {   transform: rotate(0deg);}

 

Thank you for your inputs.

z-index: 999 !important; is to make sure that the control will overlay when the control transforms back from vertical to horizontal. Otherwise part of the text will fall behind the other input fields.

transition: width 2s, height 2s, background-color 2s, rotate 2s; is to transform the control from vertical to horizontal

For the rotate you are right! You only need transform to do that and it seems that the writing-mode: vertical-lr was overkill. (saying: “kill” :) )
Everything is working fine again after disabling that line /*writing-mode: vertical-lr;*/ 

 

 

 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings