im having some issues with unneccessarily large components on big screens. can i use flex with grid to solve that?

[ahemed-haneen]

i am having issues with columns stretch too much on large screens which results in either too much gap between elements or unnecessarily large elements. would i be able to solve that using flex along with mdc-grid? or does mdc have methods to solve these issues?

to explain with a sample situation, i have 2 buttons the first one can be easily accomadated in a single column...the second one though is too large for a single column but is not big enough to fit 2 full columns....no the only options are to either have the button stretch to two columns or or don't stretch it but have a lot of unused space between the first button.

| [button] | ---------[button]------- | [button] |

or

| [button] | [ ------- button------- ] | [button] |

[hilljh82]

@TheLooseCannon Have you considered using a mdc-layout-grid? It's grid has the following max number of columns.

• Phone: 4 columns
• Tablet: 8 columns
• Desktop: 12 columns

Within the the grid, you can then add as many cells as you want and define its with for phone, tablet, and desktop. You can even include empty ones that have no definition on a device to act as spacers. For example, assume I am on a desktop, and I want the buttons you mention to fill 2 columns, but the center column is 8 columns in size. Here is what you can do:

{{#mdc-layout-grid}}
  {{#mdc-layout-grid-cell desktopColumns=2}}
    {{mdc-button label="Left Button"}}
  {{/mdc-layout-grid-cell}}

  {{!-- this is an empty column acting as a spacer --}}
  {{mdc-layout-grid-cell desktopColumns=3}}

  {{#mdc-layout-grid-cell desktopColumns=2}}
    {{mdc-button label="Center Button"}}
  {{/mdc-layout-grid-cell}}

  {{!-- this is an empty column acting as a spacer --}}
  {{mdc-layout-grid-cell desktopColumns=3}}

  {{#mdc-layout-grid-cell desktopColumns=2}}
    {{mdc-button label="Right Button"}}
  {{/mdc-layout-grid-cell}}
{{/mdc-layout-grid}}

You can then use styling to set the widths of the button to 100%.

This approach now raises concerns that on non-desktop devices, you have this empty cell that is doing nothing. You may want to remove those empty space eater cells on tables and phones. Well, this is possible is you are using the layout service from ember-cli-mdc-layout.

The layout service, when added to a component or controller, allows you to query the current device type (based on Material Design breakpoints) as use it in your template definition show/hide elements programmatically instead of using CSS.

For example, assume you want to hide the space eater cells in the example above and you have injected the layout service. We could do the following:

{{#mdc-layout-grid}}
  {{#mdc-layout-grid-cell desktopColumns=2}}
    {{mdc-button label="Left Button"}}
  {{/mdc-layout-grid-cell}}

{{#if layout.isDesktop}}
  {{!-- this is an empty column acting as a spacer --}}
  {{mdc-layout-grid-cell desktopColumns=3}}
{{/if}}

  {{#mdc-layout-grid-cell desktopColumns=2}}
    {{mdc-button label="Center Button"}}
  {{/mdc-layout-grid-cell}}

{{#if layout.isDesktop}}
  {{!-- this is an empty column acting as a spacer --}}
  {{mdc-layout-grid-cell desktopColumns=3}}
{{/if}}

  {{#mdc-layout-grid-cell desktopColumns=2}}
    {{mdc-button label="Right Button"}}
  {{/mdc-layout-grid-cell}}
{{/mdc-layout-grid}}

Lastly, if you are concerned with have all your styling in a single app.scss file, which I really dislike because it lacks separation of concerns, I use the add-on (ember-cli-styled)[https://github.com/onehilltech/ember-cli-styled], which I created so I can scale my SCSS definitions to large, complex Ember applications.

I hope this give you some ideas.

[ahemed-haneen]

thanks..that sure does help... thanks again for replying so fast....in fact i'm using the grid-cells and they do help me a lot. but the thing is

<MdcLayoutGrid>
        <MdcLayoutGridCell @columns={{1}}>
                  <MdcButton @label={{Feat1}} />
        </MdcLayoutGridCell>
        <MdcLayoutGridCell @columns={{2}}>
                  <MdcButton @label={{Add New Feature2}} />
        </MdcLayoutGridCell>
        <MdcLayoutGridCell @columns={{1}}>
                  <MdcButton @label={{Feat3}} />
        </MdcLayoutGridCell>
</MdcLayoutGrid>

now the middle button should be close to each other with it only occupying as much space as it needs. But since its in a column of width 2 span, if the column width is more than necessary, the button would stretch("where width = 100%") or if we set width to max-content, the button would be of the right size...but the rest of the space in the columns would make the buttons far away from feat1 and feat3. i hope my description was clear enough

[hilljh82]

@TheLooseCannon I think I understand the problem you face. You do not want the middle button to fill the entire space, but you need it to fill "some" space. Have you looked at using the mdc-layout-grid component instead the mdc-layout-grid-cell. There is no example in the ember-cli-mdc-layout-grid package, but you can see how to use it here to create a nested grid. What it will allow you to do is create another grid inside the parent grid cell.

[hilljh82]

@TheLooseCannon Closing to due to inactivity.