Centering absolute position dropdown in Preact

up vote
0
down vote

favorite

I am making a PWA with Preact (a React-Native alternative)
I am having issues with centering a dropdown.

Don't mind the this.animate, that's for preact-motion to trigger an animation on the dropdown.

Is there something I am missing here?

My goal is for the dropdown to appear centered just below the plus button when the button is pressed.

HTML:

 <div class={style.home}>

      <div class={style.addSound}>

                <button class={style.addItem} onClick={this.animate}>

                    <Icon class={styles.selectIcon} src={Plus} />

                </button>

            </div>

            {/*Passes current value of this.state.height as height value*/}

            <Motion style={{ height: spring(this.state.height) }}>

                {

                    ({ height }) => (<div style={Object.assign({}, style.menu, { height } )}>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> test</div>

                    </div>)

                }

            </Motion>

            <div class={style.itemsGrid}>

                {this.renderItems()}

            </div>



        </div>

CSS:

.selection {

    padding: 10px;

    border-bottom: 1px solid #ededed;

    background-color: #FFFFFF;

    align-content: center;

    color: black;

    width: 100%;

    left: 50%;

}

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    position: absolute;

    left: 50% !important;

    right: auto !important;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

css react-native preact

share|improve this question

asked yesterday

ecorp

4310

add a comment | 

up vote
0
down vote

favorite

I am making a PWA with Preact (a React-Native alternative)
I am having issues with centering a dropdown.

Don't mind the this.animate, that's for preact-motion to trigger an animation on the dropdown.

Is there something I am missing here?

My goal is for the dropdown to appear centered just below the plus button when the button is pressed.

HTML:

 <div class={style.home}>

      <div class={style.addSound}>

                <button class={style.addItem} onClick={this.animate}>

                    <Icon class={styles.selectIcon} src={Plus} />

                </button>

            </div>

            {/*Passes current value of this.state.height as height value*/}

            <Motion style={{ height: spring(this.state.height) }}>

                {

                    ({ height }) => (<div style={Object.assign({}, style.menu, { height } )}>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> test</div>

                    </div>)

                }

            </Motion>

            <div class={style.itemsGrid}>

                {this.renderItems()}

            </div>



        </div>

CSS:

.selection {

    padding: 10px;

    border-bottom: 1px solid #ededed;

    background-color: #FFFFFF;

    align-content: center;

    color: black;

    width: 100%;

    left: 50%;

}

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    position: absolute;

    left: 50% !important;

    right: auto !important;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

css react-native preact

share|improve this question

asked yesterday

ecorp

4310

add a comment | 

up vote
0
down vote

favorite

up vote
0
down vote

favorite

I am making a PWA with Preact (a React-Native alternative)
I am having issues with centering a dropdown.

Don't mind the this.animate, that's for preact-motion to trigger an animation on the dropdown.

Is there something I am missing here?

My goal is for the dropdown to appear centered just below the plus button when the button is pressed.

HTML:

 <div class={style.home}>

      <div class={style.addSound}>

                <button class={style.addItem} onClick={this.animate}>

                    <Icon class={styles.selectIcon} src={Plus} />

                </button>

            </div>

            {/*Passes current value of this.state.height as height value*/}

            <Motion style={{ height: spring(this.state.height) }}>

                {

                    ({ height }) => (<div style={Object.assign({}, style.menu, { height } )}>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> test</div>

                    </div>)

                }

            </Motion>

            <div class={style.itemsGrid}>

                {this.renderItems()}

            </div>



        </div>

CSS:

.selection {

    padding: 10px;

    border-bottom: 1px solid #ededed;

    background-color: #FFFFFF;

    align-content: center;

    color: black;

    width: 100%;

    left: 50%;

}

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    position: absolute;

    left: 50% !important;

    right: auto !important;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

css react-native preact

share|improve this question

asked yesterday

ecorp

4310

I am making a PWA with Preact (a React-Native alternative)
I am having issues with centering a dropdown.

Don't mind the this.animate, that's for preact-motion to trigger an animation on the dropdown.

Is there something I am missing here?

My goal is for the dropdown to appear centered just below the plus button when the button is pressed.

HTML:

 <div class={style.home}>

      <div class={style.addSound}>

                <button class={style.addItem} onClick={this.animate}>

                    <Icon class={styles.selectIcon} src={Plus} />

                </button>

            </div>

            {/*Passes current value of this.state.height as height value*/}

            <Motion style={{ height: spring(this.state.height) }}>

                {

                    ({ height }) => (<div style={Object.assign({}, style.menu, { height } )}>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> Test</div>

                        <div class={style.selection}> test</div>

                    </div>)

                }

            </Motion>

            <div class={style.itemsGrid}>

                {this.renderItems()}

            </div>



        </div>

CSS:

.selection {

    padding: 10px;

    border-bottom: 1px solid #ededed;

    background-color: #FFFFFF;

    align-content: center;

    color: black;

    width: 100%;

    left: 50%;

}

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    position: absolute;

    left: 50% !important;

    right: auto !important;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

css react-native preact

css react-native preact

share|improve this question

asked yesterday

ecorp

4310

share|improve this question

asked yesterday

ecorp

4310

share|improve this question

share|improve this question

asked yesterday

ecorp

4310

asked yesterday

ecorp

4310

asked yesterday

ecorp

4310

4310

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

up vote
0
down vote

Can you try this?

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    margin:left: 50%;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

share|improve this answer

answered 16 hours ago

Benjamin45

437

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53367441%2fcentering-absolute-position-dropdown-in-preact%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
0
down vote

Can you try this?

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    margin:left: 50%;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

share|improve this answer

answered 16 hours ago

Benjamin45

437

add a comment | 

up vote
0
down vote

Can you try this?

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    margin:left: 50%;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

share|improve this answer

answered 16 hours ago

Benjamin45

437

add a comment | 

up vote
0
down vote

up vote
0
down vote

Can you try this?

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    margin:left: 50%;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

share|improve this answer

answered 16 hours ago

Benjamin45

437

Can you try this?

.menu {

    overflow: hidden;

    border: 2px solid #ddd;

    margin:left: 50%;

    transform: translate(-50%, 0) !important;

    text-align: center;

}

share|improve this answer

answered 16 hours ago

Benjamin45

437

share|improve this answer

share|improve this answer

answered 16 hours ago

Benjamin45

437

answered 16 hours ago

Benjamin45

437

answered 16 hours ago

Benjamin45

437

437

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53367441%2fcentering-absolute-position-dropdown-in-preact%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here