object Text - in css vertical-align:middle; does not work

[#1]

Hi All,

in a cell with an text-object the css-format

text-align:center;  works

but

vertical-align:middle; does not work

Is there any way to bring the text vertical in the middle?

thx for hints

br harry

[Former Member]

Hi Harry,

I created 2 css classes which you can both try out.

Add the following CSS to your custom css file and add 2 grid components to your bi app where you can test and compare both css classes side by side at the same time while resizing your browser dimensions with your mouse:

/* CSS START */

/* VERTICAL-ALIGN: GRID-STYLE-1 */

.grid-style-1 td {border: 1px solid black;}

.grid-style-1 td span {border: 1px solid red;}

.grid-style-1 td,

.grid-style-1 td div,

.grid-style-1 td span {min-width: 80px; min-height: 22px;} /* adjust if needed */

.grid-style-1 td div {position: relative; width: 100%; height: 100%; line-height: 100%;}

.grid-style-1 td span {

          position: absolute; top: 0; bottom: 0; margin: auto;

          text-align: center !important;

          width: 100% !important;

          height: 22px !important; line-height: 22px !important; /* adjust if needed */

}

/* VERTICAL-ALIGN; FIXED TABLE ROW/CELL HEIGHT: GRID-STYLE-2 */

.grid-style-2 td {border: 1px solid green;}

.grid-style-2 td span {border: 1px solid blue;}

.grid-style-2 tr,

.grid-style-2 td,

.grid-style-2 td div,

.grid-style-2 td span {height: 50px !important; max-height: 50px !important; min-height: 50px !important; line-height: 50px !important; min-width: 80px;} /* adjust if needed */

/* last row is not shown (is made invisible) and changes/increases/decreases height automatically on browser resize,

so that the other table rows can maintain their height and don't have to adjust to the tables new height dimensions */

.grid-style-2 tr:last-child {height: 100% !important; max-height: 100% !important;}

.grid-style-2 tr:last-child td {border: none;}

.grid-style-2 td div {

          display: table;

          width: 100%;

}

.grid-style-2 td span {

          display: table-cell;

          text-align: center !important;

          width: 100% !important;

}

/* CSS END */

Regards

David

[Former Member]

Hi David,

I understand copy the css coding in my css-file but for the properties i don't know what ist the correct css text. I'm not a good css-coder

Can i have a sample-file in here please? Then i can open it with the design studio

thx

br harry

[Former Member]

Hi Harry,

There are 2 css classes with the following names that can be applied (copy/paste name) for GRID LAYOUT components:

• grid-style-1
• grid-style-2

Here is a screenshot of the GRID settings I have in my example for testing purposes (you can see what css classes I applied):

I can't upload/attach the whole bi app, because there is no suitable allowed file extension (content type) that I could use.

Regards

David

[Former Member]

Hi David,

next days i will test it.

Now i know with your screens more thats fine.

br Harry