Hiding Content in a Column Web Pattern


Hi There

I am using the Web Patterns Structure/Columns 4 to show a Form with a collection of drop downs and input boxes.

I am surrounding the widgets in the content placeholders in If Blocks, to not show them if the content is blank.

This hides the element, but there is still a space.

(See screenshot)

There is still a large gap where there should be 2 rows of data. 

Any ideas what else I need to do?

Edward


Hi Edward,


Are you hiding using the display properties or with CSS?


Best Regards,

Diogo Romero

Hi.

I'm using the Blue Diamond If Block to hide as I've been warned against doing it through the Display Block. Should I be using CSS display:none instead of the blue diamond?


Edward

Hi again Edward,

No that is not the issue. The problem is that you didn't used the containers to set how much space a widget would take in the screen. You problably just pressed enter when building the screen layout and by doing that you are generating <br> tag's on your source code. If you check your page source code you will see that you have <br> tag's there and if you remove them you will get the desired layout you wanted. 

So, just enclose in a container your widgets and make sure you have a label and its and its corresponding TextBox. Then according to your needs adjust the width of them (1col,2col,3col...).

By doing this instead of pressing enter in the layout, you will prevent the <br> tag's from being generated.


Hope it helped !


Best Regards,

Diogo Romero


Romero wrote: Hi Romero Sir 

I just check your solution related to Adaptive column i have same question for that

- there are 3 columns and in that column there are image enclose with Container

- there are 3 button for 3 images respectively

- if  i click to first button the container is hide but it is not hide that space (so can you give brief information for that)

- i want if image 1 click then (image 2 and image 3  while covered that space)

note-buttons are not in the columns


Hi again Edward,

No that is not the issue. The problem is that you didn't used the containers to set how much space a widget would take in the screen. You problably just pressed enter when building the screen layout and by doing that you are generating <br> tag's on your source code. If you check your page source code you will see that you have <br> tag's there and if you remove them you will get the desired layout you wanted. 

So, just enclose in a container your widgets and make sure you have a label and its and its corresponding TextBox. Then according to your needs adjust the width of them (1col,2col,3col...).

By doing this instead of pressing enter in the layout, you will prevent the <br> tag's from being generated.


Hope it helped !


Best Regards,

Diogo Romero




Solution

Hi Edward and Ahshaj,


the columns pattern has the explicit goal of dividing the space of your screen in sections to organise things on it.  Think of it maybe as columns in a newspaper.  This is regardless of what you put in that space.  The fact that you hide the content inside a column does not affect the space that column takes up.  

Which makes a lot of sense, it's not because some detail on the left of a screen is not visible in a given situation, that you want all things that are normally to the right, to move.   I like my users to know where to find something on a screen.

So I think in most cases, i'd say, there's nothing you need to do, like U2 said 30 odd years ago : "everything in it's right place".

But if you still feel like empty columns should "collapse", than the columns widget is probably not the one to use.  Have you maybe tried with a gallery ?

See attached oml for a quick test,

Good luck,

Dorine 

Solution

Hi


Thanks all for your responses.


Looking at the screenshot, I think we abandoned the columns approach and just displayed things vertically.


If I was to try this again.maybe I'd use a 3 or 4 column table with conditional widths.


Ed

Dorine Boudry wrote: hi dorine ,

Akshay is here 

and thank you for quick response, but still i m not getting proper solution 

 is there other way to hide/collapse column(of adaptive/column )?

because all that three columns is under one web block and used that is react and mobile as well

it is working properly in the mobile (and hiding space also that's why i want  solution in adaptive/column only)



Akshay Deshpande


Hi Edward and Ahshaj,


the columns pattern has the explicit goal of dividing the space of your screen in sections to organise things on it.  Think of it maybe as columns in a newspaper.  This is regardless of what you put in that space.  The fact that you hide the content inside a column does not affect the space that column takes up.  

Which makes a lot of sense, it's not because some detail on the left of a screen is not visible in a given situation, that you want all things that are normally to the right, to move.   I like my users to know where to find something on a screen.

So I think in most cases, i'd say, there's nothing you need to do, like U2 said 30 odd years ago : "everything in it's right place".

But if you still feel like empty columns should "collapse", than the columns widget is probably not the one to use.  Have you maybe tried with a gallery ?

See attached oml for a quick test,

Good luck,

Dorine 



Hi Akshay,


you say it works in mobile.  Can you share an oml of how you do that ?  Do you add ExtendedClass or something ?

Processing Upload...

Dorine Boudry wrote: hi dorine mam,


-yes sure , i send my mobile Oml as well react also (In mobile i just used screen and that web block which is done in the react)

-No i m not used extended class or something adaptive column has phone behavior Property as look in that Image

-U also check on the Url 

1)Mobile Url:-https://akshayproject.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/MobileOml/Main?_ts=637281830690395496

2)React Url:-https://akshayproject.outsystemscloud.com/Timepass/Screen1?_ts=637281050927914327

if you go through that two link you find my problem 

-In mobile it hide that space , so in react (in web application ) i want some solution over that)


Hi Akshay,


you say it works in mobile.  Can you share an oml of how you do that ?  Do you add ExtendedClass or something ?



Akshay Deshpande wrote:hello Dorine,
Here is React Oml 

Dorine Boudry wrote: hi dorine mam,

-yes sure , i send my mobile Oml as well react also (In mobile i just used screen and that web block which is done in the react)

-No i m not used extended class or something adaptive column has phone behavior Property as look in that Image

-U also check on the Url 

1)Mobile Url:-https://akshayproject.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/MobileOml/Main?_ts=637281830690395496

2)React Url:-https://akshayproject.outsystemscloud.com/Timepass/Screen1?_ts=637281050927914327

if you go through that two link you find my problem 

-In mobile it hide that space , so in react (in web application ) i want some solution over that)


Hi Akshay,


you say it works in mobile.  Can you share an oml of how you do that ?  Do you add ExtendedClass or something ?





Akshay Deshpande wrote:hello Dorine,

may be some problem while uploading Mobile oml in above comment so i paste mobile oml  here 

Dorine Boudry wrote: hi dorine mam,

-yes sure , i send my mobile Oml as well react also (In mobile i just used screen and that web block which is done in the react)

-No i m not used extended class or something adaptive column has phone behavior Property as look in that Image

-U also check on the Url 

1)Mobile Url:-https://akshayproject.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/MobileOml/Main?_ts=637281830690395496

2)React Url:-https://akshayproject.outsystemscloud.com/Timepass/Screen1?_ts=637281050927914327

if you go through that two link you find my problem 

-In mobile it hide that space , so in react (in web application ) i want some solution over that)


Hi Akshay,


you say it works in mobile.  Can you share an oml of how you do that ?  Do you add ExtendedClass or something ?





Hi Akshay,


Ok, I see what you mean now.

It is not a matter of mobile app vs. reactive app.  It's a matter of each column getting a width as percentage of the total width in case they are shown next to each other.  They don't get a height, and so they adjust their height to what's inside.  

So when shown on top of each other (in narrow viewport as on mobile, but also when you make browser window narrow enough) they only have minimal height, meaning it looks like they are not shown.  But they are still there, with a bottom margin of 16px.

I still think that this is normal behaviour for columns widget, and you should use Gallery instead, but you could also try to tweak the columns css to get closer to the behaviour you want.

See attached oml, where I compare normal Columns4 to Gallery and to tweaked Columns4.

The tweak I added, is that empty column-items are not shown.  It's not same as gallery, because the total width gets redistributed for 3 columns if the 4th is empty, but maybe this is what you want anyway, making full use of the width of the screen.

.columns-item:empty{
    display:none;
}



Btw notice, that even in the phone view where they are stacked onto each other, gallery looks better than the normal Columns4, that still has some space allocated to the empty columns, and this tweaked version of Columns4 solves that as well.



Hope this helps,

Dorine

Dorine Boudry wrote:hi Dorine, 

Look forward to it and will change my approach 

Thank you ??

Hi Akshay,


Ok, I see what you mean now.

It is not a matter of mobile app vs. reactive app.  It's a matter of each column getting a width as percentage of the total width in case they are shown next to each other.  They don't get a height, and so they adjust their height to what's inside.  

So when shown on top of each other (in narrow viewport as on mobile, but also when you make browser window narrow enough) they only have minimal height, meaning it looks like they are not shown.  But they are still there, with a bottom margin of 16px.

I still think that this is normal behaviour for columns widget, and you should use Gallery instead, but you could also try to tweak the columns css to get closer to the behaviour you want.

See attached oml, where I compare normal Columns4 to Gallery and to tweaked Columns4.

The tweak I added, is that empty column-items are not shown.  It's not same as gallery, because the total width gets redistributed for 3 columns if the 4th is empty, but maybe this is what you want anyway, making full use of the width of the screen.

.columns-item:empty{
    display:none;
}



Btw notice, that even in the phone view where they are stacked onto each other, gallery looks better than the normal Columns4, that still has some space allocated to the empty columns, and this tweaked version of Columns4 solves that as well.



Hope this helps,

Dorine