diff --git a/src/components/header-top/index.js b/src/components/header-top/index.js index c08eaec..d12eee6 100644 --- a/src/components/header-top/index.js +++ b/src/components/header-top/index.js @@ -15,7 +15,7 @@ class HeaderTop extends Component { const { headerTitle } = this.props; return ( -
+
{this.props.enableMobileMenu === true ?
diff --git a/src/components/header-top/style.scss b/src/components/header-top/style.scss new file mode 100644 index 0000000..19ccb23 --- /dev/null +++ b/src/components/header-top/style.scss @@ -0,0 +1,3 @@ +.kmt-header__top { + position: static; +} diff --git a/src/components/license-dropdown/index.js b/src/components/license-dropdown/index.js index e9b8a0f..af717c2 100644 --- a/src/components/license-dropdown/index.js +++ b/src/components/license-dropdown/index.js @@ -1,8 +1,7 @@ import React, { Component, PropTypes } from 'react'; import Delegate from 'ftdomdelegate'; -import viewport from 'o-viewport'; import oDom from 'o-dom'; -import { toggleDropdown, updateDropdownStyle } from "../../actions/license-dropdown"; +import { toggleDropdown } from "../../actions/license-dropdown"; import { changeLicense } from "../../actions/license-change"; let componentEventsBound = false; @@ -11,18 +10,14 @@ class LicenseDropdown extends Component { super(props); this.toggleDropdown = this.toggleDropdown.bind(this); - this.positionDropdown = this.positionDropdown.bind(this); this.licenseChanged = this.licenseChanged.bind(this); - this.onWindowResize = this.onWindowResize.bind(this); this.handleBodyClick = this.handleBodyClick.bind(this); this.trimLicenseId = this.trimLicenseId.bind(this); // because this uses the same state (no matter how many times it's used) we need to bind the events only once if (componentEventsBound !== true) { - viewport.listenTo('resize'); this.theDoc = new Delegate(); this.theDoc.root(document.body); - this.theDoc.on('oViewport.resize', 'body', this.onWindowResize); this.theDoc.on('click', 'body', this.handleBodyClick); componentEventsBound = true; @@ -34,14 +29,6 @@ class LicenseDropdown extends Component { return JSON.stringify(nextProps) !== JSON.stringify(this.props); } - componentDidUpdate (prevProps, prevState) { - // if it's not in the mobile container AND if it needs to be shown AND if it was hidden - if (this.props.mobile !== true && this.props.licenseData.show === true && prevProps.licenseData.show !== this.props.licenseData.show) { - // calculate its position - this.positionDropdown(); - } - } - toggleDropdown(e) { // toggle the dropdown this.props.dispatch(toggleDropdown()); @@ -54,35 +41,6 @@ class LicenseDropdown extends Component { } } - positionDropdown() { - // if it's not in the mobile container AND if it needs to be shown - if (this.props.mobile !== true && this.props.licenseData.show === true) { - const theWrapper = this.refs.theWrapper; - - // if the wrapper is found and visible - if (theWrapper && theWrapper.offsetWidth > 0) { - const theStyle = {}; - const containerPosition = theWrapper.getBoundingClientRect(); - const viewportWidth = viewport.getSize(true).width; - // calculate the right position - theStyle.right = viewportWidth - (containerPosition.left + theWrapper.offsetWidth); - - if (theStyle.right < 0) { - theStyle.right = 0; - } - - // if the right position has changed - if (this.props.licenseData.style.right !== theStyle.right) { - this.props.dispatch(updateDropdownStyle(theStyle)); - } - } - } - } - - onWindowResize () { - this.positionDropdown(); - } - licenseChanged (e) { // trigger a change action this.props.dispatch(changeLicense(e.target.value)); @@ -121,7 +79,7 @@ class LicenseDropdown extends Component { {licenseData.selected.label}
- { licenseData.items.map((item, index) => { return ; diff --git a/src/components/license-dropdown/style.scss b/src/components/license-dropdown/style.scss index a4d77af..55843cf 100644 --- a/src/components/license-dropdown/style.scss +++ b/src/components/license-dropdown/style.scss @@ -12,6 +12,10 @@ padding: 0; position: relative; background-color: transparent; + + .kmt-forms__select { + max-width: 100%; + } } &__license { @@ -58,7 +62,7 @@ display: none; margin-top: 1px; padding: 20px; - position: fixed; + position: absolute; background-color: oColorsGetPaletteColor("warm-4"); cursor: auto; z-index: 1; diff --git a/style/main.scss b/style/main.scss index a286923..e40a816 100644 --- a/style/main.scss +++ b/style/main.scss @@ -62,3 +62,4 @@ body { @import '../src/components/header-nav/style'; @import '../src/components/feedback-form/style'; @import '../src/components/overlay/style'; +@import '../src/components/header-top/style';