Skip to content
This repository has been archived by the owner on Oct 7, 2020. It is now read-only.

mdc-tab-bar-scroller__indicator misplaced #281

Closed
BrahimLaarif opened this issue Oct 17, 2017 · 12 comments
Closed

mdc-tab-bar-scroller__indicator misplaced #281

BrahimLaarif opened this issue Oct 17, 2017 · 12 comments
Assignees
@trimox

Comments

@BrahimLaarif
Copy link

Hi,
I start using angular-mdc lately and i notice an issue in mdc-tab-bar-scroller.
The mdc-tab-bar-scroller__indicator is not positioned correctly because the width of the mdc-tab change after Roboto has been applied. If you resize the page the mdc-tab-bar-scroller__indicator will set correctly.

Here a screenshot:

You can see the width of mdc-tab-bar-scroller__indicator is longer then the mdc-tab

By the way, you have an error in tab-bar-scroller component, you called the class "mdc-tab-bar-scoller" instead of "mdc-tab-bar-scroller", you forgot the R.

I'm using version 0.5.3
@trimox trimox self-assigned this Oct 17, 2017
@trimox
Copy link
Owner

trimox commented Oct 17, 2017

@ESKI Thanks for reporting the spelling issue. PR available

I'm looking into the tab-bar-scroller issue as well. Let ya know in a bit.

trimox added a commit that referenced this issue Oct 17, 2017
@trimox
fix(tabs): Correct mdc-tab-bar-scroller class binding
f852a42 
Reported in issue #281
@trimox trimox mentioned this issue Oct 17, 2017
Merged
@trimox trimox added this to the Milestone v0.5.4 milestone Oct 17, 2017
trimox added a commit that referenced this issue Oct 17, 2017
@trimox
fix(tabs): Correct mdc-tab-bar-scroller class binding (#283)
626d216 
Issue reported in #281
@BrahimLaarif
Copy link
Author

There's also an issue in the toolbar component. If i have a fixed toolbar with two mdc-toolbar__row, the margin-top who was associated to the body is incorrect.

@trimox
Copy link
Owner

trimox commented Oct 19, 2017

@ESKI I'm testing the original issue regarding tab indicator positioning, and not able yet to duplicate. Which OS and browser are you using? I'll re-test in SauceLabs using your setup.

@BrahimLaarif
Copy link
Author

I'am using Win10, Chrome version 62.0.3202.62. I created a new angular project with your angular-mdc-web v0.5.3.
I loaded Roboto font and material icons in index.html, created a mdc-toolbar with two mdc-toolbar-row, in the second row i have a mdc-tab-bar-scroller with 4 tabs.

You have to open the inspector and disable cache in the network tab or to set a delay with fast 3g to make the Roboto font render after the initialization of the components. then you will notice the wrong position of the tab indicator when you select another tab, specially the last one.

@trimox
Copy link
Owner

trimox commented Oct 19, 2017 •
edited
Loading

Ah, Toolbar was the missing ingredient 😄
Duplicated it this time, working on a PR.

@BrahimLaarif
Copy link
Author

BrahimLaarif commented Oct 20, 2017 •
edited
Loading

Good to hear it :)

It would be great also if you could add a property for mdc-toolbar component to disable the adding of margin-top to the body and then in the setStyleForFixedAdjustElement function just check the state of this property like this for example :

@Input() adjustBodyMargin: boolean = true;
setStyleForFixedAdjustElement: (property: string, value: string) => {
     if (isBrowser() && this.fixed && this.adjustBodyMargin) {
              this._renderer.setStyle(document.body, property, value);
     }
}

@trimox
Copy link
Owner

trimox commented Oct 20, 2017

Good idea. I'll add this.

@trimox trimox mentioned this issue Oct 20, 2017
Closed
4 tasks
@trimox
Copy link
Owner

trimox commented Oct 21, 2017

PR for adjustBodyMargin #298

@trimox
Copy link
Owner

trimox commented Oct 24, 2017

I'll re-test the original issue for scrollbar indicator alignment today using the latest version.

@trimox
Copy link
Owner

trimox commented Oct 25, 2017

Issue remains with transformValue on the indicator line. Problem is upstream with no pending PR. I'll create an issue and submit PR.

@trimox trimox removed this from the Milestone v0.5.4 milestone Oct 26, 2017
@trimox
Copy link
Owner

trimox commented Nov 12, 2017

Resolving this in pull request #369

@trimox trimox mentioned this issue Nov 12, 2017
Merged
6 tasks
trimox added a commit that referenced this issue Nov 13, 2017
@trimox
fix(tabs): Fix scroller indicator width issue
30bd2d3 
Closes #281
@trimox
Copy link
Owner

trimox commented Nov 13, 2017

All set. Once merged, I'll close the issue.

trimox added a commit that referenced this issue Nov 13, 2017
@trimox
feat(tabs): Add disabled tab + improvements (#369)
f073c92 
- [x] Add `disabled` tab
- [x] Fix `[active]` property changes not propagating #349
- [x] Fix `mdc-tab-bar-scroller__indicator` misplaced issue #281
- [x] Remove `mdc-tab-bar-scroll-button` directive

#### mdc-tab
* Add `disabled: boolean` property to `mdc-tab`
* Refactor `active` property
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `getComputedWidth(): number`; return the computed width for tab.
* Add `getComputedLeft(): number`; return the computed left offset for tab.
* Add `isActive()` return true if tab is active.
* Add `setActive(boolean)`; set tab active property to value passed.
* Add `getPreventDefaultOnClick(): boolean`; return true if the tab prevents the default click action.
* Add `setPreventDefaultOnClick(boolean)`; sets tabs `preventDefaultOnClick` property to the value passed.
* Add `measureSelf()`; sets computedWidth and computedLeft for a tab.

#### mdc-tab-bar
* Add `getComputedWidth(): number`
* Add `layout(): void`
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `getActiveTabIndex(): number`
* Add `switchToTabAtIndex(index: number, shouldNotify: boolean = true)`
* Add `MdcTabBarIndicator` directive
* Add `setPreventDefaultOnClickForTabAtIndex(index: number, preventDefaultOnClick: boolean)` 
* Add `isDefaultPreventedOnClickForTabAtIndex(index: number): boolean`

#### mdc-tab-bar-scroller
* Add `layout()`
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `scrollBack(event?: Event)`
* Add `scrollForward(event?: Event)`
* Remove `mdc-tab-bar-scroll-button` directive

BREAKING CHANGE: Removed `mdc-tab-bar-scroll-button` directive. Use `mdc-icon` instead. Please update your code accordingly.
Example:
```html
<mdc-tab-bar-scroll-back>
  <mdc-icon>navigate_before</mdc-icon>
</mdc-tab-bar-scroll-back>
```

Closes #349 Closes #147 Closes #281
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@trimox trimox

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@BrahimLaarif @trimox