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.

Sign up for GitHub

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

fix width:auto on ie8 & ie9 for remaining-time-display #3983

Merged
merged 2 commits into from
Jan 27, 2017
Merged

fix width:auto on ie8 & ie9 for remaining-time-display #3983

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c318e02
fix `width:auto` for ie8 & ie9
brandonocasey Jan 26, 2017
749e92c
use vjs-no-flex from the player on ie8/ie9
brandonocasey Jan 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/css/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,3 +115,10 @@
@extend %fill-parent;
text-align: center;
}

// don't wrap whitespace for the time control and make the text container 0 width
// fixes a bug with 'width: auto' in IE 8/9
.vjs-ie-auto-width-fix {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking about this a bit more. Can we re-use the vjs-no-flex class that gets added to the player div? It'll definitely get added in IE8 and 9.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will test that

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems like vjs-no-flex does not fix the width problem

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I meant, can we rely on the vjs-no-flex class rather than introducing another one? i.e., move the properties from this selector into that?

width: 0px !important;
white-space: nowrap;
}
8 changes: 7 additions & 1 deletion src/js/control-bar/time-controls/remaining-time-display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import Component from '../../component.js';
import * as Dom from '../../utils/dom.js';
import formatTime from '../../utils/format-time.js';
import {IE_VERSION} from '../../utils/browser';

/**
* Displays the time left in the video
Expand Down Expand Up @@ -35,8 +36,13 @@ class RemainingTimeDisplay extends Component {
* The element that was created.
*/
createEl() {
let ieFixClass = '';

if (IE_VERSION && IE_VERSION <= 9) {
ieFixClass = 'vjs-ie-auto-width-fix';
}
const el = super.createEl('div', {
className: 'vjs-remaining-time vjs-time-control vjs-control'
className: `vjs-remaining-time vjs-time-control vjs-control ${ieFixClass}`
});

this.contentEl_ = Dom.createEl('div', {
Expand Down