Userlist grid view - Canvas picture and grid adjustments

Hi Kyle,

Thanks for the new 2.2. After updating to the new cb 2.2 I have initially noticed 2 issues:

1. I am using userlist with grid layout. I cannot find the usual grid layout height and width adjustment options?
2. The canvas picture used in my userlist grid layout, seems not to be auto adjusted like in the older revision?

Thanks.

Br.

Morten

1. I am using userlist with grid layout. I cannot find the usual grid layout height and width adjustment options?

Those were removed as grid usage has been redesigned to be completely responsive.

2. The canvas picture used in my userlist grid layout, seems not to be auto adjusted like in the older revision?

Ensure canvas field is selected as the first field in the first column of your userlist. You can compare your configuration to our demo site below as well.

demo.cbdemosites.com/community-builder/user-lists/grid-layout

Hi again,

1. I am using userlist with grid layout. I cannot find the usual grid layout height and width adjustment options?

Those were removed as grid usage has been redesigned to be completely responsive.

MZ: Ok. Nevertheless would it possible to some how limit the framesizes in the "grid view option"? I would really like that we could adjust or limit the width somehow. I think there were two ways before - by column size (in column settings) or grid width (in parameter settings). If I try to narrow down or increasing my page width I always have 3 profiles in the width....Am I missing something?

2. The canvas picture used in my userlist grid layout, seems not to be auto adjusted like in the older revision?

Ensure canvas field is selected as the first field in the first column of your userlist. You can compare your configuration to our demo site below as well.

MZ: The canvas field is selected as the first field in the column in my case. It does not auto adjust or is responsive in my case. I have used the inspector tool to identify the canvas image size in the "grid view option". Then I resized the image to fit exact (4:1 in my case) and that work well in the desktop view, but is not adjusted well in the mobile view. This worked for me before.
What am I doing wrong, any idea?

3. Nice feature with the 3 different list view options according to your demo site. But where can I find this in my CB setup?

Thanks.

Br.

Morten

MZ: Ok. Nevertheless would it possible to some how limit the framesizes in the "grid view option"? I would really like that we could adjust or limit the width somehow. I think there were two ways before - by column size (in column settings) or grid width (in parameter settings). If I try to narrow down or increasing my page width I always have 3 profiles in the width....Am I missing something?

It will display 3 columns, then collapse to 2, then collapse to 1 depending on the view size (your browser window size). There is no option to change this at this time. We've a feature ticket to implement support for adjusting the starting column size of the grid usage in a future release.

MZ: The canvas field is selected as the first field in the column in my case. It does not auto adjust or is responsive in my case. I have used the inspector tool to identify the canvas image size in the "grid view option". Then I resized the image to fit exact (4:1 in my case) and that work well in the desktop view, but is not adjusted well in the mobile view. This worked for me before.
What am I doing wrong, any idea?

I've no idea, you maybe have a CSS conflict issue or a configuration issue. Please compare your gird userlist configuration against our demo site, which works fine and see if there's a configuration problem. The canvas field should be the first field display and be set to display on 1 line without title.

3. Nice feature with the 3 different list view options according to your demo site. But where can I find this in my CB setup?

You've full access to our demo site. Simply click "Administrator" under the "Login As" module on our demo site and login to backend to explore the configuration.

Hi again,

1.
It will display 3 columns, then collapse to 2, then collapse to 1 depending on the view size (your browser window size). There is no option to change this at this time. We've a feature ticket to implement support for adjusting the starting column size of the grid usage in a future release.

MZ: Ok. I will look forward for that feature.

2.
I've no idea, you maybe have a CSS conflict issue or a configuration issue. Please compare your gird userlist configuration against our demo site, which works fine and see if there's a configuration problem. The canvas field should be the first field display and be set to display on 1 line without title.

MZ: This canvas field is really not my best friend. I think I found that my page content is shown as "fullwidth boxed". I am using Gantry helium template. This looks nice and fully responsive in the grid view of my desktop. But then it is reduced and not responsive in the width on mobile view...???
I then tried to set it in fullwidth to the edges in desktop and mobile view. It then presents the full image but is not a nice solution. I see that it reacted a bit different in the older version when using grid size adjustments.
When I make another image field to replace the canvas field, it gets better with the image size adaption but does not have the same edge to edge functionality. I also tried to test the same on your demo site, same issue with the sizing, with my "fullwidth boxed" solution.
Any thoughts?

3.
You've full access to our demo site. Simply click "Administrator" under the "Login As" module on our demo site and login to backend to explore the configuration.

MZ: Thanks. I was trying the different list options and it´s nice in the desktop view. Still I am missing the opportunity to have list or multicolumn view with 3 columns in the mobile view as an option? Column titles still gets clubbed in the top. Or am I missing something?

4.
After the update to 2.2 I see that the styling color of the field titles now are identical to the content entered in the fields. This makes it more difficult to seperate. Does not seem to be the case on you demo site. Any idea what I am doing wrong or can I change the field title styling somehow?

Thanks.

MZ: This canvas field is really not my best friend. I think I found that my page content is shown as "fullwidth boxed". I am using Gantry helium template. This looks nice and fully responsive in the grid view of my desktop. But then it is reduced and not responsive in the width on mobile view...???
I then tried to set it in fullwidth to the edges in desktop and mobile view. It then presents the full image but is not a nice solution. I see that it reacted a bit different in the older version when using grid size adjustments.
When I make another image field to replace the canvas field, it gets better with the image size adaption but does not have the same edge to edge functionality. I also tried to test the same on your demo site, same issue with the sizing, with my "fullwidth boxed" solution.
Any thoughts?

I've no idea as I'm not the developer of your template. If you can supply a URL to a userlist affected I can take a look at the CSS real quick. You can supply the URL in confidential tags if you don't want it public.

MZ: Thanks. I was trying the different list options and it´s nice in the desktop view. Still I am missing the opportunity to have list or multicolumn view with 3 columns in the mobile view as an option? Column titles still gets clubbed in the top. Or am I missing something?

You can't use 3 column view on mobile. It will collapse down on purpose.

After the update to 2.2 I see that the styling color of the field titles now are identical to the content entered in the fields. This makes it more difficult to seperate. Does not seem to be the case on you demo site. Any idea what I am doing wrong or can I change the field title styling somehow?

There was never a color difference between labels and their values. I'm assuming you mean they're not bold anymore? What you're seeing is just default Bootstrap 4 behavior; we do not alter the defaults. If you want bold labels you'll need to add the CSS for that. You can see how Bootstrap styles forms below.

getbootstrap.com/docs/4.1/components/forms/