on 08-21-2013 7:51 AM
Hi All,
in a cell with an text-object the css-format
text-align:center; works
but
Is there any way to bring the text vertical in the middle?
thx for hints
br harry
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Harry,
There are 2 css classes with the following names that can be applied (copy/paste name) for GRID LAYOUT components:
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
Hi Harry,
Try Padding, i think it'll work.
Regards,
Fazith
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hello Harald,
As Nicolas said u can apply that css script befor or aftr your css class formatting. It will work as you wanted.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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
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
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
89 | |
10 | |
10 | |
10 | |
7 | |
6 | |
6 | |
5 | |
4 | |
3 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.