Same height column does not work - Support | Kriesi.at

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
April 16, 2020 at 6:54 pm #1204506

marcoabis81
Participant

Hi guys,
I noticed that there is a new feature which allows me to have the columns of the same row same height..

I set the feature for same height and then there is a second option which asks me if I want to align the colunt to top, center of bottom. Still not sure what this means considering that the first option should make all the boxes same height.

This is if I align to the bottom https://www.screencast.com/t/wwzSdMvh6j

Chat room Londra e Regno Unito

Can you please help?

Thanks
Marco

April 19, 2020 at 2:56 am #1205158
Mike
Moderator
Hey marcoabis81,
Sorry for the late reply and thanks for the login. I believe that the inner box-shadow height is controlled by the content and does match the column height. You could remove your box-shadow and apply it to the columns for the full column height.
Another option is to set the box-shadow height to the same as the column, which I did by adding this function to your functions.php
```
function new_custom_height_script(){
  ?>
  <script>
(function($){
  $(window).load(function(){
      var s1 = $('#top.page-id-12491 #av_section_5 .av_one_third.av-equal-height-column').height();
    var s2 = $('#top.page-id-12491 #av_section_5 .av_one_third.av-equal-height-column .avia_textblock.box-shadow').height();

    if (s2 < s1) {
        $('#top.page-id-12491 #av_section_5 .av_one_third.av-equal-height-column .avia_textblock.box-shadow').css('height', s1 + "px");
    }
    else {}
    
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'new_custom_height_script');
```
Please clear your browser cache and check.

Best regards,
Mike
April 19, 2020 at 8:48 am #1205186
Guenni007
Participant
First of all – you gave the box-shadow to the text-block section? Why don’t you use the option on column – there is allready an option for that.

here is my setting: https://webers-testseite.de/pureinstall/nsgcouk/
put only these 1/3 columns in one color-section
give a custom class or ID to the color-section ( i did with ID: flex-section )
do not choose the equal height option ! ( we make that via flex modell )
on the right column the text-block : i put the text in a span with custom-class

then the css for quick css is:
```
#flex-section .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
}
#flex-section .entry-content-wrapper::before, 
#flex-section .entry-content-wrapper::after {
  display: none;
}
#flex-section .entry-content-wrapper .flex_column {
  flex: 1 1 auto;
  min-width: 280px;
  margin-bottom: 50px;
}
#flex-section .avia_textblock span {
    display: flex;
}
@media only screen and (max-width: 1054px ) {
  #flex-section .entry-content-wrapper .flex_column:nth-of-type(1) {order: 1;}
  #flex-section .entry-content-wrapper .flex_column:nth-of-type(2) {order: 3;}
  #flex-section .entry-content-wrapper .flex_column:nth-of-type(3) {order: 2;}
}
```
the flex: 1 1 auto; only makes sence if you reorder like in my example the columns.
if you do not like to have the second under the two other columns in responsive case change it to: flex: 0 1 auto;
- This reply was modified 4 years, 8 months ago by Guenni007.
April 19, 2020 at 1:47 pm #1205208

marcoabis81
Participant

Hi Mike,
thanks for the answer, I had tried the box at column level but when I did not like it when I had the 1st column 1/3 and a short text inside. It was not looking nice but with 3 1/3 columns is does thanks :-)

Now, I added the shadow to the last raw (not column). How can I also add the border to the entire raw and also left and right padding? I do not see the options.

Thanks for your help :-)
Marco

April 19, 2020 at 1:48 pm #1205209

marcoabis81
Participant

Hi Guenni,
thank you for your answer :-)

much appreciated.

Marco

April 19, 2020 at 3:27 pm #1205246

Mike
Moderator

Hi,
I assume you found @Guenni007 solution to work well, did you need more assistance or shall we close this?

Best regards,
Mike

April 19, 2020 at 4:19 pm #1205256

marcoabis81
Participant

Hi Mike,
I followed yours, it’s easier without adding code :-)

I asked something about the last box on the same page. How do I add a border to the row box? It allows me to add only shadow and margin top and bottom, no left and right padding.

Chat room Londra e Regno Unito

Thanks
Marco

April 19, 2020 at 10:40 pm #1205329
Mike
Moderator
Hi,
Try this css:
```
#top.page-id-12491 #av_section_7 > div > div > div > div > div {
    border-width: 1px;
    border-color: #0a0a0a;
    border-style: solid;
    box-shadow: 0 0 10px 0 #74a6e8;
    padding: 0px 10px 0px 10px;
    border-radius: 5px;
}
```
Best regards,
Mike
April 20, 2020 at 11:14 am #1205452
marcoabis81
Participant
Hi Mike,

It worked thank you.

However I noticed that sometimes when I set the column height equal for all columns, it does not save. I managed to save it only after several times I tried. And also I got a weird behaviour. Look at it please.

https://www.ninserviziogratuito.co.uk/chat-room-londra-regno-unito (no space between rows)

UPDATE: I just noticed that it does that if I set the columns same height. But I think this is not the result I have to get?

Thanks
Marco
- This reply was modified 4 years, 8 months ago by marcoabis81.
April 21, 2020 at 11:12 am #1205736
Mike
Moderator
Hi,
To add some padding between the rows, please try this css:
```
#top.page-id-12491 .flex_column_table.av-equal-height-column-flextable {
	padding-top: 40px;
}
```
After applying the css, Please clear your browser cache and check.
Expected results:

Best regards,
Mike
April 21, 2020 at 11:21 am #1205738

marcoabis81
Participant

Hi Nike,
thank you for answering.

I would not want to use a specific CSS on this one as I may be moving this element on different positions and not wanting to depend on a CSS per ID element.

I would like to understand why it is behaving like that when I set the “same column height”. Is it a normal behaviour or is there something wrong? Same column height should not mean that all the element lose their padding all around.

Can you please explain?

thanks,
Marco

April 22, 2020 at 11:22 am #1206141

Mike
Moderator

Hi,
I don’t think that the rows are losing any padding, I don’t believe there is added padding to the rows when they are stacked like this, the padding option under “styling” is for the “inner padding”, this is for the cells:

Try looking at the margin option and add the margin you would like there, I added 50px to each row.

Please clear your browser cache and check.

Best regards,
Mike

April 22, 2020 at 11:35 am #1206143

marcoabis81
Participant

Hi Mike,
Thanks for replying.

Yes, I added the padding (internal to each cell) and that is ok.
And thanks for making me notice that I can solve it with adding margin to each row.

The question was: is it an expected behaviour that when I set the columns to have same column height, the space between the boxes disappear?
Indeed, if I set column height “individual” I will have the space between them without adding the margin to each row.

Anyway, solved.

And once again, thank you for your patience. I appreciate it a lot.

Marco

April 23, 2020 at 1:15 pm #1206516

Mike
Moderator

Hi,
I’m not sure if this is expected behavior, I have asked for the dev team to check.
So I assume we can close this then?

Best regards,
Mike

April 23, 2020 at 1:29 pm #1206520

marcoabis81
Participant

Hi Mike,
thank you,

yes you can close this one :-)

Thanks,
Marco

April 23, 2020 at 8:22 pm #1206660

Victoria
Inactive Moderator

Hi Marco,

Glad we could help :)

We are closing the thread.

If you need further assistance please let us know in a new one.
Best regards,
Victoria
Author

Posts