Mixing
antd dropdown : selected value displaying outside the select
I my code I am using ant Design (antd). In my drop down list I am using <span> tag to dispaly my listings as two columns.
<Select value={'AccountID'} style={{'width':'212px','height':'32px'}} placeholder="Select An Accounts">
<Option disabled value='0'>Select An Account</Option>
{this.props.accountList.length && this.props.accountList.map((value,index)=>(
<Option value={value.AccountID} key={index}>
{value.Name} <span style={{float:'right'}}> {value.TypeName} </span>
</Option>
))}
</Select>
The problem is when I select a long option like Freight and Shipping Costs
, after selecting CostOfGoodsSold is displayed outside the conttrol as shown below.
As an alternate solution,
If I increase the with of the select tag:-
there is no space showing between the two values after selection. I need space between values.
How to overcome this issue?
PS: any other CSS not applied.
Demo: sandbox
reactjs antd
asked Jan 1 at 6:38
Jane FredJane Fred
8113
add a comment |
I my code I am using ant Design (antd). In my drop down list I am using <span> tag to dispaly my listings as two columns.
<Select value={'AccountID'} style={{'width':'212px','height':'32px'}} placeholder="Select An Accounts">
<Option disabled value='0'>Select An Account</Option>
{this.props.accountList.length && this.props.accountList.map((value,index)=>(
<Option value={value.AccountID} key={index}>
{value.Name} <span style={{float:'right'}}> {value.TypeName} </span>
</Option>
))}
</Select>
The problem is when I select a long option like Freight and Shipping Costs
, after selecting CostOfGoodsSold is displayed outside the conttrol as shown below.
As an alternate solution,
If I increase the with of the select tag:-
there is no space showing between the two values after selection. I need space between values.
How to overcome this issue?
PS: any other CSS not applied.
Demo: sandbox
reactjs antd
asked Jan 1 at 6:38
Jane FredJane Fred
8113
Can you create demo to reproduce this issue?
– Just code
Jan 1 at 6:58
codesandbox.io/s/m268vxq3x This is when the width of the select increased @Just code When width is changed to200 pxthe first problem arises
– Jane Fred
Jan 1 at 7:47
What is your expected behaviour?
– Just code
Jan 1 at 8:05
* If I use a200pxselect, I dont want to display the 2nd value below the select control * If I use400pxselect, after selecting a value from the drop down list I need tho show space between them as same as in the drop down list
– Jane Fred
Jan 1 at 8:09
add a comment |
I my code I am using ant Design (antd). In my drop down list I am using <span> tag to dispaly my listings as two columns.
<Select value={'AccountID'} style={{'width':'212px','height':'32px'}} placeholder="Select An Accounts">
<Option disabled value='0'>Select An Account</Option>
{this.props.accountList.length && this.props.accountList.map((value,index)=>(
<Option value={value.AccountID} key={index}>
{value.Name} <span style={{float:'right'}}> {value.TypeName} </span>
</Option>
))}
</Select>
The problem is when I select a long option like Freight and Shipping Costs
, after selecting CostOfGoodsSold is displayed outside the conttrol as shown below.
As an alternate solution,
If I increase the with of the select tag:-
there is no space showing between the two values after selection. I need space between values.
How to overcome this issue?
PS: any other CSS not applied.
Demo: sandbox
reactjs antd
asked Jan 1 at 6:38
Jane FredJane Fred
8113
I my code I am using ant Design (antd). In my drop down list I am using <span> tag to dispaly my listings as two columns.
<Select value={'AccountID'} style={{'width':'212px','height':'32px'}} placeholder="Select An Accounts">
<Option disabled value='0'>Select An Account</Option>
{this.props.accountList.length && this.props.accountList.map((value,index)=>(
<Option value={value.AccountID} key={index}>
{value.Name} <span style={{float:'right'}}> {value.TypeName} </span>
</Option>
))}
</Select>
The problem is when I select a long option like Freight and Shipping Costs
, after selecting CostOfGoodsSold is displayed outside the conttrol as shown below.
As an alternate solution,
If I increase the with of the select tag:-
there is no space showing between the two values after selection. I need space between values.
How to overcome this issue?
PS: any other CSS not applied.
Demo: sandbox
reactjs antd
reactjs antd
asked Jan 1 at 6:38
Jane FredJane Fred
8113
asked Jan 1 at 6:38
Jane FredJane Fred
8113
edited Jan 1 at 7:56
Jane Fred
asked Jan 1 at 6:38
Jane FredJane Fred
8113
asked Jan 1 at 6:38
Jane FredJane Fred
8113
asked Jan 1 at 6:38
Jane FredJane Fred
8113
8113
Can you create demo to reproduce this issue?
– Just code
Jan 1 at 6:58
codesandbox.io/s/m268vxq3x This is when the width of the select increased @Just code When width is changed to200 pxthe first problem arises
– Jane Fred
Jan 1 at 7:47
What is your expected behaviour?
– Just code
Jan 1 at 8:05
* If I use a200pxselect, I dont want to display the 2nd value below the select control * If I use400pxselect, after selecting a value from the drop down list I need tho show space between them as same as in the drop down list
– Jane Fred
Jan 1 at 8:09
add a comment |
Can you create demo to reproduce this issue?
– Just code
Jan 1 at 6:58
codesandbox.io/s/m268vxq3x This is when the width of the select increased @Just code When width is changed to200 pxthe first problem arises
– Jane Fred
Jan 1 at 7:47
What is your expected behaviour?
– Just code
Jan 1 at 8:05
* If I use a200pxselect, I dont want to display the 2nd value below the select control * If I use400pxselect, after selecting a value from the drop down list I need tho show space between them as same as in the drop down list
– Jane Fred
Jan 1 at 8:09
Can you create demo to reproduce this issue?
– Just code
Jan 1 at 6:58
Can you create demo to reproduce this issue?
– Just code
Jan 1 at 6:58
codesandbox.io/s/m268vxq3x This is when the width of the select increased @Just code When width is changed to
200 px the first problem arises– Jane Fred
Jan 1 at 7:47
codesandbox.io/s/m268vxq3x This is when the width of the select increased @Just code When width is changed to
200 px the first problem arises– Jane Fred
Jan 1 at 7:47
What is your expected behaviour?
– Just code
Jan 1 at 8:05
What is your expected behaviour?
– Just code
Jan 1 at 8:05
* If I use a
200px select, I dont want to display the 2nd value below the select control * If I use 400px select, after selecting a value from the drop down list I need tho show space between them as same as in the drop down list– Jane Fred
Jan 1 at 8:09
* If I use a
200px select, I dont want to display the 2nd value below the select control * If I use 400px select, after selecting a value from the drop down list I need tho show space between them as same as in the drop down list– Jane Fred
Jan 1 at 8:09
add a comment |
1 Answer
1
active
oldest
votes
As per your requirement I would like to use percentage to resolve your issue,
there is one property called dropdownStyle in antd which you can use to design the options of the dropdown.
so, by applying
dropdownStyle={{ minWidth: "50%", height: "32px" }}
You should be able to get the options added.
Here is what your select looks like
<Select
placeholder="Select An Account"
dropdownStyle={{ minWidth: "50%", height: "32px" }}
style={{ minWidth: "50%", height: "32px" }}
>
<Option value="1">
Freight and Shipping Cost
<span style={{ float: "right" }}> Cost of Goods Sold</span>
</Option>
<Option value="2">
Sales
<span style={{ float: "right" }}> Income</span>
</Option>
</Select>
after selecting the dropdown there is no property I can find to overwrite so you need to apply css to that. for selected item.
.ant-select-selection-selected-value {
width: 100%;
}
Demo of sandbox
answered Jan 1 at 8:17
Just codeJust code
10.4k53067
Is there any way to show spaces in between?
– Jane Fred
Jan 1 at 8:28
@JaneFred it is already showing spaces in between check my demo
– Just code
Jan 1 at 8:32
1
I have added css for that.ant-select-selection-selected-value { width: 100%; }its working as expected
– Just code
Jan 1 at 8:38
okay I checked right now. Now I understood
– Jane Fred
Jan 1 at 8:39
When I applied this the structure of the dropdown list chenged. If you both of our sandbox codes you can find it
– Jane Fred
Jan 1 at 8:41
|
show 4 more comments
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',
autoActivateHeartbeat: false,
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993505%2fantd-dropdown-selected-value-displaying-outside-the-select%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As per your requirement I would like to use percentage to resolve your issue,
there is one property called dropdownStyle in antd which you can use to design the options of the dropdown.
so, by applying
dropdownStyle={{ minWidth: "50%", height: "32px" }}
You should be able to get the options added.
Here is what your select looks like
<Select
placeholder="Select An Account"
dropdownStyle={{ minWidth: "50%", height: "32px" }}
style={{ minWidth: "50%", height: "32px" }}
>
<Option value="1">
Freight and Shipping Cost
<span style={{ float: "right" }}> Cost of Goods Sold</span>
</Option>
<Option value="2">
Sales
<span style={{ float: "right" }}> Income</span>
</Option>
</Select>
after selecting the dropdown there is no property I can find to overwrite so you need to apply css to that. for selected item.
.ant-select-selection-selected-value {
width: 100%;
}
Demo of sandbox
answered Jan 1 at 8:17
Just codeJust code
10.4k53067
Is there any way to show spaces in between?
– Jane Fred
Jan 1 at 8:28
@JaneFred it is already showing spaces in between check my demo
– Just code
Jan 1 at 8:32
1
I have added css for that.ant-select-selection-selected-value { width: 100%; }its working as expected
– Just code
Jan 1 at 8:38
okay I checked right now. Now I understood
– Jane Fred
Jan 1 at 8:39
When I applied this the structure of the dropdown list chenged. If you both of our sandbox codes you can find it
– Jane Fred
Jan 1 at 8:41
|
show 4 more comments
As per your requirement I would like to use percentage to resolve your issue,
there is one property called dropdownStyle in antd which you can use to design the options of the dropdown.
so, by applying
dropdownStyle={{ minWidth: "50%", height: "32px" }}
You should be able to get the options added.
Here is what your select looks like
<Select
placeholder="Select An Account"
dropdownStyle={{ minWidth: "50%", height: "32px" }}
style={{ minWidth: "50%", height: "32px" }}
>
<Option value="1">
Freight and Shipping Cost
<span style={{ float: "right" }}> Cost of Goods Sold</span>
</Option>
<Option value="2">
Sales
<span style={{ float: "right" }}> Income</span>
</Option>
</Select>
after selecting the dropdown there is no property I can find to overwrite so you need to apply css to that. for selected item.
.ant-select-selection-selected-value {
width: 100%;
}
Demo of sandbox
answered Jan 1 at 8:17
Just codeJust code
10.4k53067
Is there any way to show spaces in between?
– Jane Fred
Jan 1 at 8:28
@JaneFred it is already showing spaces in between check my demo
– Just code
Jan 1 at 8:32
1
I have added css for that.ant-select-selection-selected-value { width: 100%; }its working as expected
– Just code
Jan 1 at 8:38
okay I checked right now. Now I understood
– Jane Fred
Jan 1 at 8:39
When I applied this the structure of the dropdown list chenged. If you both of our sandbox codes you can find it
– Jane Fred
Jan 1 at 8:41
|
show 4 more comments
As per your requirement I would like to use percentage to resolve your issue,
there is one property called dropdownStyle in antd which you can use to design the options of the dropdown.
so, by applying
dropdownStyle={{ minWidth: "50%", height: "32px" }}
You should be able to get the options added.
Here is what your select looks like
<Select
placeholder="Select An Account"
dropdownStyle={{ minWidth: "50%", height: "32px" }}
style={{ minWidth: "50%", height: "32px" }}
>
<Option value="1">
Freight and Shipping Cost
<span style={{ float: "right" }}> Cost of Goods Sold</span>
</Option>
<Option value="2">
Sales
<span style={{ float: "right" }}> Income</span>
</Option>
</Select>
after selecting the dropdown there is no property I can find to overwrite so you need to apply css to that. for selected item.
.ant-select-selection-selected-value {
width: 100%;
}
Demo of sandbox
answered Jan 1 at 8:17
Just codeJust code
10.4k53067
As per your requirement I would like to use percentage to resolve your issue,
there is one property called dropdownStyle in antd which you can use to design the options of the dropdown.
so, by applying
dropdownStyle={{ minWidth: "50%", height: "32px" }}
You should be able to get the options added.
Here is what your select looks like
<Select
placeholder="Select An Account"
dropdownStyle={{ minWidth: "50%", height: "32px" }}
style={{ minWidth: "50%", height: "32px" }}
>
<Option value="1">
Freight and Shipping Cost
<span style={{ float: "right" }}> Cost of Goods Sold</span>
</Option>
<Option value="2">
Sales
<span style={{ float: "right" }}> Income</span>
</Option>
</Select>
after selecting the dropdown there is no property I can find to overwrite so you need to apply css to that. for selected item.
.ant-select-selection-selected-value {
width: 100%;
}
Demo of sandbox
answered Jan 1 at 8:17
Just codeJust code
10.4k53067
answered Jan 1 at 8:17
Just codeJust code
10.4k53067
answered Jan 1 at 8:17
Just codeJust code
10.4k53067
answered Jan 1 at 8:17
Just codeJust code
10.4k53067
10.4k53067
Is there any way to show spaces in between?
– Jane Fred
Jan 1 at 8:28
@JaneFred it is already showing spaces in between check my demo
– Just code
Jan 1 at 8:32
1
I have added css for that.ant-select-selection-selected-value { width: 100%; }its working as expected
– Just code
Jan 1 at 8:38
okay I checked right now. Now I understood
– Jane Fred
Jan 1 at 8:39
When I applied this the structure of the dropdown list chenged. If you both of our sandbox codes you can find it
– Jane Fred
Jan 1 at 8:41
|
show 4 more comments
Is there any way to show spaces in between?
– Jane Fred
Jan 1 at 8:28
@JaneFred it is already showing spaces in between check my demo
– Just code
Jan 1 at 8:32
1
I have added css for that.ant-select-selection-selected-value { width: 100%; }its working as expected
– Just code
Jan 1 at 8:38
okay I checked right now. Now I understood
– Jane Fred
Jan 1 at 8:39
When I applied this the structure of the dropdown list chenged. If you both of our sandbox codes you can find it
– Jane Fred
Jan 1 at 8:41
Is there any way to show spaces in between?
– Jane Fred
Jan 1 at 8:28
Is there any way to show spaces in between?
– Jane Fred
Jan 1 at 8:28
@JaneFred it is already showing spaces in between check my demo
– Just code
Jan 1 at 8:32
@JaneFred it is already showing spaces in between check my demo
– Just code
Jan 1 at 8:32
1
1
I have added css for that
.ant-select-selection-selected-value { width: 100%; } its working as expected– Just code
Jan 1 at 8:38
I have added css for that
.ant-select-selection-selected-value { width: 100%; } its working as expected– Just code
Jan 1 at 8:38
okay I checked right now. Now I understood
– Jane Fred
Jan 1 at 8:39
okay I checked right now. Now I understood
– Jane Fred
Jan 1 at 8:39
When I applied this the structure of the dropdown list chenged. If you both of our sandbox codes you can find it
– Jane Fred
Jan 1 at 8:41
When I applied this the structure of the dropdown list chenged. If you both of our sandbox codes you can find it
– Jane Fred
Jan 1 at 8:41
|
show 4 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993505%2fantd-dropdown-selected-value-displaying-outside-the-select%23new-answer', 'question_page');
}
);
Post as a guest
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
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
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
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you create demo to reproduce this issue?
– Just code
Jan 1 at 6:58
codesandbox.io/s/m268vxq3x This is when the width of the select increased @Just code When width is changed to
200 pxthe first problem arises– Jane Fred
Jan 1 at 7:47
What is your expected behaviour?
– Just code
Jan 1 at 8:05
* If I use a
200pxselect, I dont want to display the 2nd value below the select control * If I use400pxselect, after selecting a value from the drop down list I need tho show space between them as same as in the drop down list– Jane Fred
Jan 1 at 8:09