Q : MDC TextField margin
up vote
1
down vote
favorite
as far as I understood, using Sass Mixins is the proper way to customize an MDC element. I have an issue regarding MDC TextField : I am using multiple outlined TextFields to create a form, TextFields are set that way :
<TextField label="Foo" outlined={true} dense={true}>
<Input
name="item.foo"
value={item.foo}
onChange={this.handleChange}
/>
</TextField>
<p />
<TextField label="Bar" outlined={true} dense={true}>
<Input
name="item.bar"
value={item.bar}
onChange={this.handleChange}
/>
</TextField>
The issue : floating labels on the top left are overlaping the previous field, in that case, a floating 'Bar' will overlap the outline of the previous element.
To solve this I used a scss file containing this :
.mdc-text-field {
margin-top: 7px;
}
This is working as intended and solves the overlap issue, but I don't know if I am doing it correctly as I thought only Sass Mixins are the proper way to customize MDC elements.
css reactjs sass material-components
asked 2 days ago
Freaka
62
New contributor
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
favorite
as far as I understood, using Sass Mixins is the proper way to customize an MDC element. I have an issue regarding MDC TextField : I am using multiple outlined TextFields to create a form, TextFields are set that way :
<TextField label="Foo" outlined={true} dense={true}>
<Input
name="item.foo"
value={item.foo}
onChange={this.handleChange}
/>
</TextField>
<p />
<TextField label="Bar" outlined={true} dense={true}>
<Input
name="item.bar"
value={item.bar}
onChange={this.handleChange}
/>
</TextField>
The issue : floating labels on the top left are overlaping the previous field, in that case, a floating 'Bar' will overlap the outline of the previous element.
To solve this I used a scss file containing this :
.mdc-text-field {
margin-top: 7px;
}
This is working as intended and solves the overlap issue, but I don't know if I am doing it correctly as I thought only Sass Mixins are the proper way to customize MDC elements.
css reactjs sass material-components
asked 2 days ago
Freaka
62
New contributor
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
as far as I understood, using Sass Mixins is the proper way to customize an MDC element. I have an issue regarding MDC TextField : I am using multiple outlined TextFields to create a form, TextFields are set that way :
<TextField label="Foo" outlined={true} dense={true}>
<Input
name="item.foo"
value={item.foo}
onChange={this.handleChange}
/>
</TextField>
<p />
<TextField label="Bar" outlined={true} dense={true}>
<Input
name="item.bar"
value={item.bar}
onChange={this.handleChange}
/>
</TextField>
The issue : floating labels on the top left are overlaping the previous field, in that case, a floating 'Bar' will overlap the outline of the previous element.
To solve this I used a scss file containing this :
.mdc-text-field {
margin-top: 7px;
}
This is working as intended and solves the overlap issue, but I don't know if I am doing it correctly as I thought only Sass Mixins are the proper way to customize MDC elements.
css reactjs sass material-components
asked 2 days ago
Freaka
62
New contributor
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
as far as I understood, using Sass Mixins is the proper way to customize an MDC element. I have an issue regarding MDC TextField : I am using multiple outlined TextFields to create a form, TextFields are set that way :
<TextField label="Foo" outlined={true} dense={true}>
<Input
name="item.foo"
value={item.foo}
onChange={this.handleChange}
/>
</TextField>
<p />
<TextField label="Bar" outlined={true} dense={true}>
<Input
name="item.bar"
value={item.bar}
onChange={this.handleChange}
/>
</TextField>
The issue : floating labels on the top left are overlaping the previous field, in that case, a floating 'Bar' will overlap the outline of the previous element.
To solve this I used a scss file containing this :
.mdc-text-field {
margin-top: 7px;
}
This is working as intended and solves the overlap issue, but I don't know if I am doing it correctly as I thought only Sass Mixins are the proper way to customize MDC elements.
css reactjs sass material-components
css reactjs sass material-components
asked 2 days ago
Freaka
62
New contributor
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
Freaka
62
New contributor
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
Freaka
62
New contributor
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
Freaka
62
asked 2 days ago
Freaka
62
62
New contributor
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Freaka is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Freaka is a new contributor. Be nice, and check out our Code of Conduct.
Freaka is a new contributor. Be nice, and check out our Code of Conduct.
Freaka is a new contributor. Be nice, and check out our Code of Conduct.
Freaka is a new contributor. Be nice, and check out our Code of Conduct.
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%2f53372242%2fq-mdc-textfield-margin%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
