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

IE expanded nav width sometimes is too narrow to show app names #7525

Closed
LeeDr opened this issue Jun 21, 2016 · 2 comments
Closed

IE expanded nav width sometimes is too narrow to show app names #7525

LeeDr opened this issue Jun 21, 2016 · 2 comments
Labels
bug Fixes for quality problems that affect the customer experience good first issue low hanging fruit

Comments

@LeeDr
Copy link

LeeDr commented Jun 21, 2016

Kibana version: kibana-5.0.0-alpha4

OS version: Windows 10
Browser(s): Same behavior on IE 11 and Edge browser.
Original install method (e.g. download page, yum, from source, etc.): unzipped
Description of the problem including expected versus actual behavior: When you mouse-over the nav bar it expands to show the full app names. But after I click on "Dashboard" the expanded size becomes smaller and too small to show the full text.

Steps to reproduce:

  1. mouse-over and away from the nav bar. It expands to show the full app names.
  2. click on Dashboard
  3. mouse-over and away from the nav bar. It expands a smaller width and now does not show the full app names.

I don't see this problem when I click on any other app names in the nav bar.

I don't see this problem on Chrome or Firefox. Only on IE 11 and Edge.

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

ie_nav

@LeeDr LeeDr added bug Fixes for quality problems that affect the customer experience P3 labels Jun 21, 2016
@epixa epixa added P1 and removed P3 labels Jun 28, 2016
@Bargs Bargs added the good first issue low hanging fruit label Jul 8, 2016
@ppisljar
Copy link
Member

thats quite weird ....

looking at how this works, its a CSS solution. in ui/public/chrome/directives/app_switcher.less we have this styles:

.app-links-wrapper {
  width: @as-open-width;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-color: @app-links-wrapper-background;
  overflow: hidden;
  transition: width @transition-time;
  transition-delay: @transition-delay;

  &:hover {
    .app-title {
      display: inline-block;
    }
    + .app-wrapper {
      transform: translateX(@as-open-width - @as-closed-width);
    }
  }

and

.app-wrapper {
  .real-flex-parent();
  position: absolute;
  transition: transform @transition-time;
  transition-delay: @transition-delay;
  left: @as-closed-width;

which should do whats expected ...

further checking in IE dev tools i can see that the styles get applied correctly.
however when i click dashboard or discover links something weird happens.

styles are not updated ... and if i disable and enable left: 53px rule on the .app-wrapper it starts to look ok again.

i am guessing we override the style somewhere from javascript ( to left: 10px ) ... but i cant find such code.

@ppisljar ppisljar self-assigned this Jul 10, 2016
@ppisljar ppisljar added ready and removed ready labels Jul 17, 2016
@ppisljar ppisljar removed their assignment Sep 7, 2016
@epixa
Copy link
Contributor

epixa commented Sep 19, 2016

I don't think this is an issue any longer since we removed the auto-expand/collapse functionality of the sidebar. We can reopen this if it gets reproduced again.

@epixa epixa closed this as completed Sep 19, 2016
jbudz pushed a commit that referenced this issue Feb 23, 2024
`v93.1.1`⏩ `v93.2.0`

---

- Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new
`hasEmbellish` prop (defaults to false)
([#7521](elastic/eui#7521))
- Added `diff` glyph to `EuiIcon`
([#7520](elastic/eui#7520))
- Added `newChat` glyph to `EuiIcon`
([#7524](elastic/eui#7524))

**Bug fixes**

- Fixed `EuiSideNav` not correctly typing the `items` prop as required
([#7521](elastic/eui#7521))
- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering
in some SSR environments, particularly Next.js v13 and up
([#7525](elastic/eui#7525))
- Fixed `EuiDataGrid` component to clean up timer from side effect on
unmount ([#7534](elastic/eui#7534))

**Accessibility**

- Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles
if no heading or mobile title exists
([#7521](elastic/eui#7521))

**CSS-in-JS conversions**

- Converted `EuiSideNav` to Emotion; Removed the following Sass
variables: ([#7521](elastic/eui#7521))
  - `$euiSideNavEmphasizedBackgroundColor`
  - `$euiSideNavRootTextcolor`
  - `$euiSideNavBranchTextcolor`
  - `$euiSideNavSelectedTextcolor`
  - `$euiSideNavDisabledTextcolor`
- Removed the `euiSideNavEmbellish` Sass mixin. Use the new
`EuiPageSidebar` `hasEmbellish` prop instead
([#7521](elastic/eui#7521))
- Added a new memoization/performance optimization utility for CSS-in-JS
styles ([#7529](elastic/eui#7529))
semd pushed a commit to semd/kibana that referenced this issue Mar 4, 2024
`v93.1.1`⏩ `v93.2.0`

---

- Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new
`hasEmbellish` prop (defaults to false)
([elastic#7521](elastic/eui#7521))
- Added `diff` glyph to `EuiIcon`
([elastic#7520](elastic/eui#7520))
- Added `newChat` glyph to `EuiIcon`
([elastic#7524](elastic/eui#7524))

**Bug fixes**

- Fixed `EuiSideNav` not correctly typing the `items` prop as required
([elastic#7521](elastic/eui#7521))
- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering
in some SSR environments, particularly Next.js v13 and up
([elastic#7525](elastic/eui#7525))
- Fixed `EuiDataGrid` component to clean up timer from side effect on
unmount ([elastic#7534](elastic/eui#7534))

**Accessibility**

- Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles
if no heading or mobile title exists
([elastic#7521](elastic/eui#7521))

**CSS-in-JS conversions**

- Converted `EuiSideNav` to Emotion; Removed the following Sass
variables: ([elastic#7521](elastic/eui#7521))
  - `$euiSideNavEmphasizedBackgroundColor`
  - `$euiSideNavRootTextcolor`
  - `$euiSideNavBranchTextcolor`
  - `$euiSideNavSelectedTextcolor`
  - `$euiSideNavDisabledTextcolor`
- Removed the `euiSideNavEmbellish` Sass mixin. Use the new
`EuiPageSidebar` `hasEmbellish` prop instead
([elastic#7521](elastic/eui#7521))
- Added a new memoization/performance optimization utility for CSS-in-JS
styles ([elastic#7529](elastic/eui#7529))
fkanout pushed a commit to fkanout/kibana that referenced this issue Mar 4, 2024
`v93.1.1`⏩ `v93.2.0`

---

- Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new
`hasEmbellish` prop (defaults to false)
([elastic#7521](elastic/eui#7521))
- Added `diff` glyph to `EuiIcon`
([elastic#7520](elastic/eui#7520))
- Added `newChat` glyph to `EuiIcon`
([elastic#7524](elastic/eui#7524))

**Bug fixes**

- Fixed `EuiSideNav` not correctly typing the `items` prop as required
([elastic#7521](elastic/eui#7521))
- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering
in some SSR environments, particularly Next.js v13 and up
([elastic#7525](elastic/eui#7525))
- Fixed `EuiDataGrid` component to clean up timer from side effect on
unmount ([elastic#7534](elastic/eui#7534))

**Accessibility**

- Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles
if no heading or mobile title exists
([elastic#7521](elastic/eui#7521))

**CSS-in-JS conversions**

- Converted `EuiSideNav` to Emotion; Removed the following Sass
variables: ([elastic#7521](elastic/eui#7521))
  - `$euiSideNavEmphasizedBackgroundColor`
  - `$euiSideNavRootTextcolor`
  - `$euiSideNavBranchTextcolor`
  - `$euiSideNavSelectedTextcolor`
  - `$euiSideNavDisabledTextcolor`
- Removed the `euiSideNavEmbellish` Sass mixin. Use the new
`EuiPageSidebar` `hasEmbellish` prop instead
([elastic#7521](elastic/eui#7521))
- Added a new memoization/performance optimization utility for CSS-in-JS
styles ([elastic#7529](elastic/eui#7529))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience good first issue low hanging fruit
Projects
None yet
Development

No branches or pull requests

4 participants