Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ion-grid doesn't render correctly in ion-item #17075

Closed
norbertbede opened this issue Jan 12, 2019 · 7 comments

Comments

4 participants
@norbertbede
Copy link

commented Jan 12, 2019

Bug Report

Ionic version:

[x] 4.x RC1

Current behavior:
ion-grid doesn't render grid layout - all columns are centered

wrongbehaviour

Expected behavior:
ion-grid must have same behavior inside ion-item as normally/without

our business app v3 example
ionic3-grid-inside-item2

Steps to reproduce:

  1. create ionic4 rc1 project
  2. add bellow code
  3. see result

Related code:

    <ion-item > 
        <ion-grid >
            <ion-row >
              <ion-col>
                <div>
                  1 of 2
                </div>
              </ion-col>
              <ion-col>
                <div>
                  2 of 2
                </div>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <div>
                  1 of 3
                </div>
              </ion-col>
              <ion-col>
                <div>
                  2 of 3
                </div>
              </ion-col>
              <ion-col>
                <div>
                  3 of 3
                </div>
              </ion-col>
            </ion-row>
          </ion-grid>
      </ion-item>

Other information:

this is important to create complex business applications with many informations - in master detail mode - eg. inventory countlist and their lines. (product code, name, qty, location...etc.) grid allow organise it in v3 well.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.7.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v10.13.0 (/usr/local/bin/node)
   npm    : 6.5.0
   OS     : macOS [Mojave]

@ionitron-bot ionitron-bot bot added the triage label Jan 12, 2019

@abennouna

This comment has been minimized.

Copy link
Contributor

commented Jan 12, 2019

You may want to apply a full width on the ion-grid as a workaround.

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jan 14, 2019

Content in an ion-item is now required to be wrapped in an ion-label. In v4 we do less "magic" to an item, so we are no longer placing it in the label for you. Please see the breaking changes for more information: https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#label-required

Here is a codepen that shows your example with a label wrapper: https://codepen.io/brandyscarney/pen/MZLwzR

Thanks!

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jan 14, 2019

Actually the more I think about it maybe grid should be an exception to this rule - maybe we can just add flex: 1 to the ion-grid and if that has no negative effects we could allow this markup to work. Thoughts @manucorporat?

@trazek

This comment has been minimized.

Copy link
Contributor

commented Jan 25, 2019

@brandyscarney I'll make your recommended change and see if anything odd crops up

@trazek

This comment has been minimized.

Copy link
Contributor

commented Jan 25, 2019

@brandyscarney I checked the visual tests in core and didn't see any negative impact of adding this style.

#17258

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jan 25, 2019

@trazek Awesome, thank you! I will take a look!

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Jan 25, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to Needs review 🤔 in Ionic Core Jan 25, 2019

@brandyscarney brandyscarney moved this from Needs review 🤔 to Done 🎉 in Ionic Core Jan 25, 2019

@ionitron-bot

This comment has been minimized.

Copy link

commented Feb 24, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Feb 24, 2019

liamdebeasi added a commit that referenced this issue Apr 26, 2019

Update 4.0.x with 4.0.1 and 4.0.2 (#18156)
* docs(ng): update angular test readme
Closes #17212

* docs(breaking): add breaking changes and copy editing (#17214)

- adds col auto to grid
- updates overlays to point to the same usage
- copy editing
- adds more info on the tabs changes
- documents event changes closes ionic-team/ionic-docs#258
- update nav event documentation

references #16819

* fix(build): modify rollup.config.js to work with Windows (#17231)

* docs(react): fix typo
Closes #17243

* fix(reorder): capture click event (#17244)

fixes #17241

* fix(grid): add flex to ion-grid to allow it to properly render in an ion-item (#17258)

fixes #17075

* docs(segment) add example for default Value
Closes #17275

* docs(alert): correct alert-controller link path (#17294)

references ionic-team/ionic-docs#254

* docs(loading): correct loading-controller link path (#17295)

closes ionic-team/ionic-docs#254

* fix(range): chrome bug with will-change

* docs(): update links
Ref #17256

* docs(): rebuild docs

* docs(): rebuilding

* docs(): update incorrect links

* fix(searchbar): hide search icon when focused with cancel button (#17260)

fixes #17252

* fix(react): duplicate events being fired in ionic/react (#17321)

* docs(modal): fix typo with returning header (#17333)

* test(searchbar): update searchbar tests to take focused ss (#17318)

- gets focus test working properly
- adds a no cancel button focus test

this should prevent the regression in #17252 in the future

* Merge branch 'master' into update-pwa-check

merge:

* Merge branch 'master' into add-mobileweb-platform

merge

* Merge pull request #17356 from ionic-team/add-mobileweb-platform

feat(platform): add mobileweb platform

* Merge branch 'master' into update-pwa-check

merge

* Merge pull request #17355 from ionic-team/update-pwa-check

fix(platform): add additional check for safari PWA

* Merge branch 'master' into add-mobileweb-platform

merge

* Merge pull request #17356 from ionic-team/add-mobileweb-platform

feat(platform): add mobileweb platform

merge

* Merge branch 'master' into update-pwa-check

merge and try again.

* Merge pull request #17355 from ionic-team/update-pwa-check

fix(platform): add additional check for safari PWA

merge

* docs(rtl): Fix small typo in item docs (#17365)

* docs(datetime): fix typo (#17360)

* docs(loading): remove dismissOnPageChange, add ionLoadingDidDismiss (#17357)

* docs(loading): remove dismissOnPageChange, change onDidDismiss to ionLoadingDidDismiss

* docs(loading): add usage showing events

* docs(loading): update example to show proper usage

* docs(rtl): Fix small typo in item docs (#17365)
merge

* docs(loading): update example to show proper usage

docs(loading): update example to show proper usage
merge and try again.

* test(platform): Add Platform tests (#17354)

* test(platform): add base platform tests

* test(platform): add isPlatform test, clean up test file

* test(platform): do not export matchMedia

* test(platform): change window to win to avoid confusion

* fix(menu): fix content shadow when revealed in iOS (#17383)

* fix(popover): originate animation from right in RTL/MD (#17381)

* fix(popover): apply fixed position to keep backdrop in viewport (#17352)

fixes #17337

* 4.0.1

* fix(tab-bar): add translucent tab-bar styles back (#17376)

- updates css to allow for translucent tab-bar
- adds translucent test

* docs(datetime): usage typos and clean up (#17415)

Fix some typos, clean up a code snippet, reword slightly to use clearer language (in consideration of ESL readers).

* docs(reorder): Update incomplete reorder docs (#17417)

* add base reorder doc updates

* update doc wording

* remove extra sentence

* clear up explanation sentence

* fix typo

* run build

* fix doc definition for ionitemReorder

* make requested changes

* remove prop table

* chore(github): update issue template

* docs(loading): update breaking doc to show new loading usage (#17431)

* docs(loading): add missing async to new loading example (#17432)

* update loading example

* add async

* chore(react): release of ionic react 0.0.4 (#17442)

* chore(github): update issue templates (#17433)

* fix(searchbar): allow setting of toolbar color and searchbar color (#17474)

* fix(searchbar): allow setting of toolbar color and searchbar color

* fix test label typo

* docs(popover): add missing comma in example (#17401)

* fix(range): implement RTL (from PR 17157) (#17384)

- MD PIN fixes not committed because they depend on mixin changes

references #17012

* docs(): Add documentation for slots (#17441)

* add button slot

* add component slot docs

* update content default slot description

* run npm build

* fix typos

* update md files

* docs(slots): update slot components and the build files

* chore(stencil): updates stencil to build readmes

* chore(build): update the swiper bundle file to match master

* update default slot doc wording

* revert changes

* Revert "update default slot doc wording"

This reverts commit e184014.

merge

* docs(slots): update default slot doc wording

* docs(avatar): update angular usage for img src (#16884)

* fix(config): update types for scrollPadding, inputBlurring and hideCaretOnScroll to boolean (#17302)

* feat(range): add neutral point (#17400)

* feat(Range): add neutral point

* feat(Range): generate proxies and api

* fix(): check positive case in neutralPointChanged

* fix(Range): neutralPoint to min if neutralPoint < min

* fix(Range): active bar style

* fix(Range): tick styling

* fix(range): improved rtl support (#17479)

* fix(Range): rtl support

* fix(Range): knob position in rtl

* fix(select): Account for when options are not loaded immediately (#17405)

* Added logging to begin debugging issue

* identify potential fix, add test

* fix(select): render when options are loaded after a delay

* fix linter issues

* fix e2e test

* fix edge case with if statement

* fix(item-sliding): Sliding no longer breaks after removing an item (#17492)

* fix(item-sliding): Sliding no longer breaks after removing an item

* run linter

* fix(datetime): default to current date when no value given (#17443)

* fix(datetime): default to current date when no value given

* test(datetime): add spec test

* move getDateValue to utils

* docs(process): update process documentation

* fix(button): show proper shade for activated button on ios (#17508)

fixes #17436

* 4.0.2

* chore(range): revert neutral point (#17550)

* Revert "fix(range): improved rtl support (#17479)"

This reverts commit f832de5.

revert range rtl support

* Revert "feat(range): add neutral point (#17400)"

This reverts commit 15acb4b.

revert neutral point

* sync in 4.0.1 and 4.0.2

* docs(): Add documentation for slots (#17441)

* add button slot

* add component slot docs

* update content default slot description

* run npm build

* fix typos

* update md files

* docs(slots): update slot components and the build files

* chore(stencil): updates stencil to build readmes

* chore(build): update the swiper bundle file to match master

* update default slot doc wording

* revert changes

* Revert "update default slot doc wording"

This reverts commit e184014.

merge

* docs(slots): update default slot doc wording
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.