Style attributes doesn't work on Input with suffix or prefix
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
setting Style attributes is working with that.
<Input
style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
placeholder="this works"
onMouseEnter={() => this.setState({ focused: true })}
onMouseLeave={() => this.setState({ focused: false })}
/>
However, when I use the suffix or prefix attribute of Input component, It doesn't work.
<Input
style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
placeholder="not this"
/*only difference is this suffix line*/
suffix={<Icon type="save" />}
onMouseEnter={() => this.setState({ focused: true })}
onMouseLeave={() => this.setState({ focused: false })}
/>
When I check the source codes on browser, It gives me the reason.
1.case :
<input placeholder="this works" type="text" class="ant-input" style="border-width: 1px;">
2.case :
<span class="ant-input-affix-wrapper" style="border-width: 1px;"><input placeholder="not this" type="text" class="ant-input"><span class="ant-input-suffix"><i class="anticon anticon-save"></i></span></span>
the reason for 2. case span block absorbs the style.
running demo
So How can I set my style on a input that has a suffix/prefix attribute.
javascript reactjs input antd
edited Nov 16 '18 at 14:19
rdonuk
3,2971330
asked Nov 16 '18 at 12:19
ziLkziLk
2,3691032
add a comment |
setting Style attributes is working with that.
<Input
style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
placeholder="this works"
onMouseEnter={() => this.setState({ focused: true })}
onMouseLeave={() => this.setState({ focused: false })}
/>
However, when I use the suffix or prefix attribute of Input component, It doesn't work.
<Input
style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
placeholder="not this"
/*only difference is this suffix line*/
suffix={<Icon type="save" />}
onMouseEnter={() => this.setState({ focused: true })}
onMouseLeave={() => this.setState({ focused: false })}
/>
When I check the source codes on browser, It gives me the reason.
1.case :
<input placeholder="this works" type="text" class="ant-input" style="border-width: 1px;">
2.case :
<span class="ant-input-affix-wrapper" style="border-width: 1px;"><input placeholder="not this" type="text" class="ant-input"><span class="ant-input-suffix"><i class="anticon anticon-save"></i></span></span>
the reason for 2. case span block absorbs the style.
running demo
So How can I set my style on a input that has a suffix/prefix attribute.
javascript reactjs input antd
edited Nov 16 '18 at 14:19
rdonuk
3,2971330
asked Nov 16 '18 at 12:19
ziLkziLk
2,3691032
add a comment |
setting Style attributes is working with that.
<Input
style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
placeholder="this works"
onMouseEnter={() => this.setState({ focused: true })}
onMouseLeave={() => this.setState({ focused: false })}
/>
However, when I use the suffix or prefix attribute of Input component, It doesn't work.
<Input
style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
placeholder="not this"
/*only difference is this suffix line*/
suffix={<Icon type="save" />}
onMouseEnter={() => this.setState({ focused: true })}
onMouseLeave={() => this.setState({ focused: false })}
/>
When I check the source codes on browser, It gives me the reason.
1.case :
<input placeholder="this works" type="text" class="ant-input" style="border-width: 1px;">
2.case :
<span class="ant-input-affix-wrapper" style="border-width: 1px;"><input placeholder="not this" type="text" class="ant-input"><span class="ant-input-suffix"><i class="anticon anticon-save"></i></span></span>
the reason for 2. case span block absorbs the style.
running demo
So How can I set my style on a input that has a suffix/prefix attribute.
javascript reactjs input antd
edited Nov 16 '18 at 14:19
rdonuk
3,2971330
asked Nov 16 '18 at 12:19
ziLkziLk
2,3691032
setting Style attributes is working with that.
<Input
style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
placeholder="this works"
onMouseEnter={() => this.setState({ focused: true })}
onMouseLeave={() => this.setState({ focused: false })}
/>
However, when I use the suffix or prefix attribute of Input component, It doesn't work.
<Input
style={{ borderWidth: this.state.focused ? "4px" : "1px" }}
placeholder="not this"
/*only difference is this suffix line*/
suffix={<Icon type="save" />}
onMouseEnter={() => this.setState({ focused: true })}
onMouseLeave={() => this.setState({ focused: false })}
/>
When I check the source codes on browser, It gives me the reason.
1.case :
<input placeholder="this works" type="text" class="ant-input" style="border-width: 1px;">
2.case :
<span class="ant-input-affix-wrapper" style="border-width: 1px;"><input placeholder="not this" type="text" class="ant-input"><span class="ant-input-suffix"><i class="anticon anticon-save"></i></span></span>
the reason for 2. case span block absorbs the style.
running demo
So How can I set my style on a input that has a suffix/prefix attribute.
javascript reactjs input antd
javascript reactjs input antd
edited Nov 16 '18 at 14:19
rdonuk
3,2971330
asked Nov 16 '18 at 12:19
ziLkziLk
2,3691032
edited Nov 16 '18 at 14:19
rdonuk
3,2971330
asked Nov 16 '18 at 12:19
ziLkziLk
2,3691032
edited Nov 16 '18 at 14:19
rdonuk
3,2971330
edited Nov 16 '18 at 14:19
rdonuk
3,2971330
edited Nov 16 '18 at 14:19
rdonuk
3,2971330
3,2971330
asked Nov 16 '18 at 12:19
ziLkziLk
2,3691032
asked Nov 16 '18 at 12:19
ziLkziLk
2,3691032
asked Nov 16 '18 at 12:19
ziLkziLk
2,3691032
2,3691032
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
style property on input with suffix or prefix property isn't supported in the implementation of Input component.
See https://github.com/ant-design/ant-design/blob/3.10.7/components/input/Input.tsx#L170
{prefix}
{React.cloneElement(children, { style: null, className: this.getInputClassName() })}
{suffix}
You can work around this by passing className property for the Input component.
Say you have these CSS definitions in a stylesheet,
.border-sm input, input.border-sm {
border-width: 1px;
}
.border-lg input, input.border-lg {
border-width: 4px;
}
Your implementation for the Inputs can look like so:
//...
import "./style.css"
class ErrorExample extends React.Component {
//...
render() {
return (
<div>
<h1>Enter mouse into one of textboxes</h1>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
//...
/>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
suffix={<Icon type="save" />}
//...
/>
</div>
);
}
}
answered Nov 17 '18 at 10:38
Oluwafemi SuleOluwafemi Sule
12.6k1735
Thanks for the answer. The problem is the style is created dynamically, so I can not write the attributes on CSS file. Therefore, It doesn't solve my problem :/
– ziLk
Nov 17 '18 at 21:57
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',
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%2f53337791%2fstyle-attributes-doesnt-work-on-input-with-suffix-or-prefix%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
style property on input with suffix or prefix property isn't supported in the implementation of Input component.
See https://github.com/ant-design/ant-design/blob/3.10.7/components/input/Input.tsx#L170
{prefix}
{React.cloneElement(children, { style: null, className: this.getInputClassName() })}
{suffix}
You can work around this by passing className property for the Input component.
Say you have these CSS definitions in a stylesheet,
.border-sm input, input.border-sm {
border-width: 1px;
}
.border-lg input, input.border-lg {
border-width: 4px;
}
Your implementation for the Inputs can look like so:
//...
import "./style.css"
class ErrorExample extends React.Component {
//...
render() {
return (
<div>
<h1>Enter mouse into one of textboxes</h1>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
//...
/>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
suffix={<Icon type="save" />}
//...
/>
</div>
);
}
}
answered Nov 17 '18 at 10:38
Oluwafemi SuleOluwafemi Sule
12.6k1735
Thanks for the answer. The problem is the style is created dynamically, so I can not write the attributes on CSS file. Therefore, It doesn't solve my problem :/
– ziLk
Nov 17 '18 at 21:57
add a comment |
style property on input with suffix or prefix property isn't supported in the implementation of Input component.
See https://github.com/ant-design/ant-design/blob/3.10.7/components/input/Input.tsx#L170
{prefix}
{React.cloneElement(children, { style: null, className: this.getInputClassName() })}
{suffix}
You can work around this by passing className property for the Input component.
Say you have these CSS definitions in a stylesheet,
.border-sm input, input.border-sm {
border-width: 1px;
}
.border-lg input, input.border-lg {
border-width: 4px;
}
Your implementation for the Inputs can look like so:
//...
import "./style.css"
class ErrorExample extends React.Component {
//...
render() {
return (
<div>
<h1>Enter mouse into one of textboxes</h1>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
//...
/>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
suffix={<Icon type="save" />}
//...
/>
</div>
);
}
}
answered Nov 17 '18 at 10:38
Oluwafemi SuleOluwafemi Sule
12.6k1735
Thanks for the answer. The problem is the style is created dynamically, so I can not write the attributes on CSS file. Therefore, It doesn't solve my problem :/
– ziLk
Nov 17 '18 at 21:57
add a comment |
style property on input with suffix or prefix property isn't supported in the implementation of Input component.
See https://github.com/ant-design/ant-design/blob/3.10.7/components/input/Input.tsx#L170
{prefix}
{React.cloneElement(children, { style: null, className: this.getInputClassName() })}
{suffix}
You can work around this by passing className property for the Input component.
Say you have these CSS definitions in a stylesheet,
.border-sm input, input.border-sm {
border-width: 1px;
}
.border-lg input, input.border-lg {
border-width: 4px;
}
Your implementation for the Inputs can look like so:
//...
import "./style.css"
class ErrorExample extends React.Component {
//...
render() {
return (
<div>
<h1>Enter mouse into one of textboxes</h1>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
//...
/>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
suffix={<Icon type="save" />}
//...
/>
</div>
);
}
}
answered Nov 17 '18 at 10:38
Oluwafemi SuleOluwafemi Sule
12.6k1735
style property on input with suffix or prefix property isn't supported in the implementation of Input component.
See https://github.com/ant-design/ant-design/blob/3.10.7/components/input/Input.tsx#L170
{prefix}
{React.cloneElement(children, { style: null, className: this.getInputClassName() })}
{suffix}
You can work around this by passing className property for the Input component.
Say you have these CSS definitions in a stylesheet,
.border-sm input, input.border-sm {
border-width: 1px;
}
.border-lg input, input.border-lg {
border-width: 4px;
}
Your implementation for the Inputs can look like so:
//...
import "./style.css"
class ErrorExample extends React.Component {
//...
render() {
return (
<div>
<h1>Enter mouse into one of textboxes</h1>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
//...
/>
<Input
className={this.state.focused ? "border-lg" : "border-sm"}
suffix={<Icon type="save" />}
//...
/>
</div>
);
}
}
answered Nov 17 '18 at 10:38
Oluwafemi SuleOluwafemi Sule
12.6k1735
answered Nov 17 '18 at 10:38
Oluwafemi SuleOluwafemi Sule
12.6k1735
answered Nov 17 '18 at 10:38
Oluwafemi SuleOluwafemi Sule
12.6k1735
answered Nov 17 '18 at 10:38
Oluwafemi SuleOluwafemi Sule
12.6k1735
12.6k1735
Thanks for the answer. The problem is the style is created dynamically, so I can not write the attributes on CSS file. Therefore, It doesn't solve my problem :/
– ziLk
Nov 17 '18 at 21:57
add a comment |
Thanks for the answer. The problem is the style is created dynamically, so I can not write the attributes on CSS file. Therefore, It doesn't solve my problem :/
– ziLk
Nov 17 '18 at 21:57
Thanks for the answer. The problem is the style is created dynamically, so I can not write the attributes on CSS file. Therefore, It doesn't solve my problem :/
– ziLk
Nov 17 '18 at 21:57
Thanks for the answer. The problem is the style is created dynamically, so I can not write the attributes on CSS file. Therefore, It doesn't solve my problem :/
– ziLk
Nov 17 '18 at 21:57
add a comment |
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%2f53337791%2fstyle-attributes-doesnt-work-on-input-with-suffix-or-prefix%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
