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

[hs1]

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 Harald,

You have everything right except for one single thing - Fix your height and Width absolute (with proper values other than auto), then all your CSS will work for vertical align.

BR

Gowtham S

[vitran23]

Only issue with doing absolute is if the application grows or decreases it won't adjust to the window properly.

Premdas's solution seems to work perfectly.

[Former Member]

Hi Harald,

This seems an old post however noticed that you have not marked as "Answered"

The below script in CSS seems to work perfectly fine for me

	display: flex;
	justify-content: center;
	flex-direction: column;
	height: auto;

Below are some additional links explaining this in detail. Hope this helps

https://css-tricks.com/centering-css-complete-guide/

Centering in the Unknown | CSS-Tricks

Regards,

Premdas

[Former Member]

Hi Harald,

To make CSS coding look easy to understand, you can run your application in Google Chrome and try out by right clicking on the application and click Inspect element option in the browser. You can search and  goto the grid layout component used in the application and check the css code written by default and try by changing the CSS there itself and test if it is helping to solve your issue.

Thanks,

Sambit

[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

[hs1]

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

[hs1]

Hi David,

next days i will test it.

Now i know with your screens more thats fine.

br Harry

[Former Member]

Hi Harry,

Try Padding, i think it'll work.

Regards,

Fazith

[hs1]

Hi Fazith,

Padding: 0px

do not work.

thx for hint

br harry

[Former Member]

Hi Harry,

Did you try giving more than 0px? usually when you give 10 or 15 it usually centre it up, In the Default Template they would have given the Padding to achieve what you have hinted.

Thanks,

Fazith

[hs1]

Hi Fazith,

yes i take 15px and 50px test more values. The Objekt goes bigger then maincell.

I want to look now in the Default Template

thx harry

[former_member197738]

Hi Harald,

Please try this, hope this helps.

padding-left: 12px;

Define padding for either left, right, top, bottom, thanks

-Fahad

[Former Member]

Hello Harald,

As Nicolas said u can apply that css script befor or aftr your css class formatting. It will work as you wanted.

[hs1]

Hi Pantel,

thy for answer.

Did you have a sample css textobject in a maincell?

The sample from tammy works but the textbox is smaller as the main-cell.

br harry

[Former Member]

I have applied following code :

color: #FFFFFF;

text-align: center;

font-size: 20px;

background-color: #797B79;

display: table-cell;

vertical-align: middle;

That  gave me below effect.

[hs1]

Hi Pantel,

thx for the code.

The code is good but the text-object is not resized to the main cell.

top left .... = 0 width and height is auto i think in the css code must the height from the table-cell 100% then grow up to the main-cell but it is not working see the screenshot

The dotterd line in the screenhot show the real height

br harry

[Former Member]

Hello Harald,

You can directly increase size of text component as similar to main text. You dont need any css code for that.

You can simply simply drag it with arrow key.

If I am wrong, Please share the image how u want your text component to be (with help of paint or something)

Thanks,

Manali Patel

[hs1]

Hi Pantel,

Step 1:

make a new projekt

Step 2:

insert a grid_layout with one cell

Step 3:

insert a textbox

in the property i write the text

now the text is left top corner

now i want make the font bigger, the text center vertical and center horizontal

i write in the css-property     is this wrong? in the grid_layout-cell is no property

color: #FFFFFF;

text-align: center;

font-size: 20px;

background-color: #797B79;

display: table-cell;

vertical-align: middle;

when display: table-cell; ist enabled then the Textbox is very small

when display: table-cell; ist disabled then the Textbox is the same size as the cell but the text is not center both directions

i dont know what is wrong.

It is simple two elements
grid_layout and a text box and the text has be center in both directions

width and height is auto full screen all elements

br harry

[Former Member]

keep your text component and grid cell component size same. and den apply this css code it will work.

please see below images...

1) text component

2) grid data cell

[hs1]

Hi Pantel,

yes you are right when width and height ist fixed , but this work only when width and height from the textbox is not "auto"

the cell are auto and the textbox  must grow up automatically  the same size as the cell.

thx

br harry

[Former Member]

Try creating CSS class and apply the same for both the components in the properties of Text and Cell component.

Manali...

[hs1]

Hi Manali,

thx for help but is does not work.

I do the code in my user.css but it is not working.

.mytext_v_center

font-family: arial, sans-serif;

font-size: 20px;

color: black;

line-height: 45px;

text-align: left;

display: table-cell;

vertical-align: middle;

other css sections working in my user.css

you know more of the user.css?

I dont know how is the checkfield structure defined i want to make the font of them bigger

For a normal checkfield is the font very small

thank you for hints

br harry

[murali_balreddy2]

Harry,

Text of Certain components cannot be formatted using CSS.

Thanks.

[Former Member]

Hello Harald,

You should try to add this css code to your cell:

display: table-cell;
vertical-align: middle;

The vertical-align property only works on html cells, and that's the aim of adding display: table-cell

Waiting for your feedback,

Best,

Nicolas

[hs1]

Hi Nicolas,

ths for answer

I checked it but the Celle ist not in the middle of the main-cell.

You dotterd the maincell and the table-cell is left and top

you can see the css in the screenshot

Have you more idea?  thx br harry

[TammyPowlas]

I am not a CSS expert, but after Googling and then trying it out on my system, here is what I have working:

background:indigo;

vertical-align: middle;

  text-align: center;

  #text{ line-height: 30px; vertical-align:middle; }

    width: 50px;

    height: 34px;

    text-align: center;

    line-height: 30px;

    vertical-align: middle;

<style type="text/css">

          #myoutercontainer2 { line-height:4em }

</style>

...

<p id="myoutercontainer2">

          Hey, this is vertically centered. Yay!

</p>

I cannot tell you which part of the CSS makes this work, but it is working on my test system.

Regards,

Tammy

[hs1]

Hi Tammy,

thanky for the idea.

Yes it works but is the same the main-cell ist not fillend.

I changed the code by height = 100% then filled the main-cell but the text is not vertical in the middle.

thx for hint  br harry