Adjust CommandBarButton of Fluent UI - css

I would like to adjust a little bit CommandBarButton of Fluent UI. I want to move the icon a little down by adding a padding on top of it. I try to add padding: 1px 0px 0px 0px inside .icon-112 in DevTools. It is perfect.
So I add the following in CSS:
.move .ms-Button-Icon {
padding: 10px 0px 0px 0px; /* 10px to make it obvious */
}
And use move in
<CommandBarButton
className="move"
iconProps={{ iconName: "Comment" }}
text="Comment"
/>
But it does not work; we don't see the extra padding anywhere. Does anyone know why?
https://codesandbox.io/s/dreamy-glade-qu8g29?file=/src/App.js:200-314

.move .ms-Button-icon {
padding: 10px 0px 0px 0px; /* 10px to make it obvious */
}
It's .ms-Button-icon not .ms-Button-Icon lol

Just as an alternative, this is the CSS-in-JS way preferred by Fluent UI, without using the classnames directly:
<CommandBarButton
iconProps={{ iconName: "Comment" }}
text="Comment"
styles={{ icon: { paddingTop: 10 } }}
/>
Adjusted sandbox here: https://codesandbox.io/s/modern-sunset-6ijgqf?file=/src/App.js

Related

Border-radius on image not working on mobiles - safari

I have seen that similar posts already exist... the solutions posted there did not work for me tho. Sorry for asking again.
In my gatsby project I want a solid border and border-radius on an image. On Chrome it looks as expected but on mobile devices and Safari the image just does not get the rounded corners and overflows the border. How can I fix this?
.imgContainer {
border: solid 1px #0784b5;
border-radius: 10px;
overflow: hidden;
}
.img {
position: relative;
border-radius: 10px;
top: 0;
left: 0;
}
<div className={styles.imgContainer}>
<GatsbyImage className={styles.img}
image={data.file.childImageSharp.gatsbyImageData}
alt="portrait"
/>
</div>
Thanks in advance!!
The gatsby-image package is now deprecated
You can use: https://www.gatsbyjs.com/plugins/gatsby-plugin-image/
Ex:
import { StaticImage } from 'gatsby-plugin-image';
const IndexPage = () => (
<StaticImage
src="../images/test_image.jpg"
alt=""
imgStyle={{ borderRadius: '20%' }}
/>
);

scss - setting parent doesn't seem to work

I have the following code:
<div class="input-group want-outline">
<input class="form-control no-outline #(IsValid ? "" : "is-invalid")"
type="text"......
and this is my scss:
.no-outline:focus {
box-shadow: none;
&.want-outline {
border-radius: 2.5rem;
border-color: #80bdff;
border-width: 0.2rem;
}
}
when the input receives focus, it correctly sets box-shadow to none, but doesn't apply the border details to the parent. ive also tried:
& { border-radius.....
and
> & { border-radius.....
to reference the parent, these dont work either.
You can set the border on the focus-within style property which will apply styles to the parent element when the focus is within it (ie - when the input within it has focus.. The following uses straight css but can easily be converted to scss.
Note that IE does not support this style property at all (https://caniuse.com/?search=focus-within) but really who cares about ie? :)
Also - your border problem might be because you are not setting the border type (eg " solid / dashed / dotted) - i tend to set all the border styles in the shorthand version most of the time.
.no-outline:focus {
box-shadow: none;
}
.want-outline {
padding: 16px;
border-radius: 2.5rem;
display: inline-block;
border: solid 0.2rem transparent;
}
.want-outline:focus-within {
border-color: #80bdff;
}
<div class="input-group want-outline">
<input class="form-control no-outline" type="text" placeholde="enter txt"/>
<div>

firefox button remove padding in firefox 77

I tried using the solutions found on stackoverflow to do this but it does not seem to work in newer versions of firefox. I want the red background to take up the entire button but this only works in the chrome, not firefox. I added the button::-moz-focus-inner css rules that should resolve this. Does anyone know how to do this in newer versions of firefox?
<style>
button {
padding: 0px;
}
label {
display: block;
padding: 1px 6px;
background-color: red;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
</style>
<button>
<label for="myId">My Button</label>
</button>
<br />
<button>My Button</button>
<input id="myId" type="checkbox" />
You've put a label into a button, and are applying the red background to the label, not the button. You'd be better off not using a label tag, but if you need to, put the button in the label tag.
<style>
button {
/* Padding is pretty important for buttons */
padding: 3px 5px;
border: 0;
background-color: red;
cursor: pointer;
margin: 0px;
}
</style>
<button>My Button</button>
<!-- It is good practice to put labels right before what they are labeling -->
<label for="myId"><button>My Button</button></label>
<input id="myId" type="checkbox" />
I may be wrong, and by all means im not trying to be rude. But it looks like you're pretty new to web dev. Look up any css property or tag you're having trouble with on W3Schools. It's a great website.
Cheers, Isaac.

Ionic/Angular how to remove borders from inputs

I get the below black borders in my input fields. How do I remove the ugly 1px border around the controls?
I can't find it in the CSS or don't know how to look for it as I'm new to it.
Code:
<ion-col col-8>
<input formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>
Result ugly 1px borders around inputs:
Clean Inputs & textarea:
textarea, input
{
background:none;
outline: none;
-webkit-appearance: none;
box-shadow: none !important;
border: none;
}
Simple Way
input{
border: none; // for black border
outline: none; // for focus outline remove
}
You can add a style attribute to your input and set the border to none
<ion-col col-8>
<input style="border:none;" formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>
If you have more than one input tag in your html-file I would prefer to use an external CSS-file and write the following lines to disable the borders for all inputs!
input {
border: none;
}
To remove borders from <input>, just set border property to none.
input {
border: none;
}
<input type="text" placeholder="Card number">
For more info, refer MDN documentation on border property.
If you want to keep the bottom border, and add some padding and margin, see below example.
input {
height: 2rem;
margin: 0rem 1rem;
padding: 0rem 1rem;
border-width: 0px;
border-bottom: 1px solid #e4e9f0;
}
input:focus {
outline: none;
}
<input type="text" placeholder="Card number">

change/override style for antdesign Input component

I want to change the styling for antdesign Input component and I am not sure how to make it work.
Now, I have been able to change the style on validation success and the border color changes to green on hover.
but still, when I click in the field to type, it still shows blue border.
Now, why is that happening?
How do I override the antdesign styles?
<FormItem hasFeedback validateStatus={this.state.passwordErr} help={passwordHelp} label="Password" >
<Input className={validClass} type="password" name="password" value={this.state.password} onChange={this.handlePassword} />
</FormItem>
this is a small relevant portion.
this css works for the hover
.success:hover{
border:1px solid green;
box-shadow: 0 0 2px green;
}
but this doesnt work when I do it without hover
.success:hover{
border:1px solid green;
box-shadow: 0 0 2px green;
}
I have noticed that this is the portion that is blocking my css
.ant-input:focus {
border-color: #5070f2;
outline: 0;
-webkit-box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2);
box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2);
}
So, how do I override this css and force it to use mine?
here's the image of the effect
i want to change the blue to green.
and here's the code in inspect
You overwrite only the styles on :hover, you say that you found that .ant-input:focus { is overwriting your styles.
Why don't you write styles for the :focus event then ?
.success:focus {
border:2px solid red;
}
<input type="text" class="success">
If this doesn't work, write a more specific path like input.success:focus or form input.success:focus
But i guess ( since it's about focus on input elements ) that the problem is with the outline which appears on focus
You can either change the outline color/width etc. or hide it with outline:none and use your border style
input.success:focus { /*or a more specific selector*/
outline-color: red;
}
<input type="text" class="success">
input.success:focus { /*or a more specific selector*/
outline:none;
border:3px solid red;
}
<input type="text" class="success">
I came to the same problem and my solution works well for Antd version4.
<Input suffix={<Component />}/>
css:
.ant-input-affix-wrapper {
border: ....;
}
.ant-input-affix-wrapper-focused {
border: ...;
box-shadow: ...;
}
I use "antd": "^4.24.2", and here is what worked for me.
Add the following👇🏽 to your global css, and import the global css into your root folder.
.ant-input-affix-wrapper.ant-input-password {
border: none;
}
.ant-input-affix-wrapper-focused {
box-shadow: none !important;
}

Resources