I've been struggling for hours now trying to align an icon and text inside a button to the left. Currently the button is stretched and looks like this:
I want the chevron arrow and text to be left aligned inside the button. How to achieve this? (I'm using microsofts ui-fabric, don't think the css here interfere, i don't get any text aligning even if i remove them or change DefaultButton to a regular Button)
Render method:
public render(): JSX.Element {
const { isCollapsed } = this.state;
const { buttonText, collapsibleSectionText } = this.props;
return (
<div>
<DefaultButton
onClick={this._toggleCollapse} className="CollapsibleSection"
>
{isCollapsed ? <i className="ms-Icon ms-Icon--ChevronUp" aria-hidden="true" /> : <i className="ms-Icon ms-Icon--ChevronDown " aria-hidden="true" />}
<p>{buttonText}</p>
</DefaultButton>
{isCollapsed && collapsibleSectionText}
</div>
);
}
css:
.CollapsibleSection {
margin-top: 2%;
width: 100%;
}
DefaultButton component has property text-align: center;. You can check in their official docs. What I suggest you should do is try text-align: left; If that does not override fabric's css rule, then try to see if your rule is applied, since maybe fabric's rule have greater specificity then your css rule. If this does not work, then you need to override fabric's display property and say the following:
.CollapsibleSection {
margin-top: 2%;
width: 100%;
display: flex; //overriding fabric's display inline-block;
justify-content: flex-start:
}
Hi I just had to add text-align: left to make it work
.CollapsibleSection {
margin-top: 2%;
text-align: left;
width: 100%;
}
Quick answer:
justify-content: flex-start
If you'd like to learn more about it you can play this wonderful game which will give you a good knowledge about flexbox and positioning within it.
https://flexboxfroggy.com/
Related
I have a style like this
//inside page.jsx
export function Page() {
return (
<div css={container}>
<div css={header}>
<div css={horizontal}>
<Menu
mode="horizontal"
>
<Menu.Item>
<Link href="#>
<a>Menu A</a>
</Link>
</Menu.Item>
</Menu >
</div>
</div>
</div>
)
}
//inside styles.js
export const horizontal = css`
display: none;
#media (min-width: 720px) {
display:block;
}
`
export const header= css`
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: white;
position: sticky;
top: 0;
z-index: 1;
`
When testing the browser with a size less than 720px its works as intended the content is invisible because of display none, but when the browser size is back to more than 720px it's not working at all (not going back to visible).
if I replace the Menu component with another component the style is working properly (when less than 720px = invisible and when more than 720px = visible). Also, it can work with the Menu component if removing display flex in the header style.
I'm a bit confused about what going on here.
I have a react Modal component that I have made. I can pass a prop that makes it full screen or define a width. It all works fine, but i'm having an issue reusing it when the first modal is open. The 2nd component takes the same class as the 1st, so it makes the max-width 100%.
For example, I want to have a full screen modal, and show a 2nd modal at 50% size on top when i click a link.
I am using styled components which i think is where the issue may be happening. Im just not sure how to approach it.
Modal component:
<ModalContainer visible={visible} fullScreen={fullScreen}>
<ModalDialog role="dialog" width={width}>
<ModalBody>{children}</ModalBody>
</ModalDialog>
</ModalContainer>
Styles
export const ModalDialog = styled.div`
width: 100%;
max-width: ${({ width }) => width};
`;
export const ModalContainer = styled.div`
visibility: hidden;
opacity: 0;
display: none;
${({ visible }) =>
visible &&
css`
visibility: visible;
opacity: 1;
display: flex;
`}
${({ fullScreen }) =>
fullScreen &&
css`
width: 100vw;
height: 100vh;
overflow: none;
${ModalDialog} {
box-shadow: none;
max-width: 100%;
}
`}
`}
The class of the first modal for dialog is what is also being used for the 2nd even though that does not have the full screen prop.
tried to change the antd carousel dots styles, it can be able to implement with CSS but not with styled-components(CSS is not allowed in my project). as im new to front-end dont know the proper solution for this.
here is the code example https://stackblitz.com/edit/react-opnojd-rfagtz?file=index.js
thanks in advance :)
When using styled-component, the style would be applied with className sc-....
In your case, its style would be applied in div containing .slick-slider.
But, .ant-carousel is className for parent of that.
So, if it was included in the selector, style will be not applied.
Try this.
const CarouselWrapper = styled(Carousel)`
> .slick-dots li button {
width: 6px;
height: 6px;
border-radius: 100%;
}
> .slick-dots li.slick-active button {
width: 7px;
height: 7px;
border-radius: 100%;
background: red;
}
`;
I'm trying to implement or add multiple class in out container when I click a button. But it seems that the styling is not being applied. Below are my code
Layout.module.css
.Content {
padding-left: 240px;
min-height: calc(100vh);
top: 0;
display: block;
position: relative;
padding-top: 80px;
background: #eee;
padding-bottom: 60px;
transition: padding-left 0.2s linear;
}
.Content.collapse {
padding-left: 100px;
display: block;
transition: padding-left 0.2s linear ;
}
Now I added the collapse class in my nav component like so
const layout = (props) => (
<Aux>
<Sidebar collapse={props.collapse} />
<div className={`${classes.Content} ${props.collapse ? 'collapse' : ''}`}>
<TopNavigation toggle={props.toggle}/>
{props.children}
<Footer />
</div>
</Aux>
);
So basically I'm just checking the props if it's collapse or not. If it is then I'll add a text collapse in the class.
Now when I click on a button it sets the state.collapse = true/false. It was able to do it's job. Now it seems that it's not reading my css style. Below is the generated class in my DOM
Notice the class .Content styling was detected. But as you can see here
Layout_Content__2WLOk collapse the div container has a class of collapse. So I was thinking it should read the .Content.collapse selector. Am I missing something here?
When using CSS modules, it creates a unique classname for each class for each instance of the component.
So you need to use the imported classes to have access to the generated classnames, just like you do for the .Content
So
<div className={`${classes.Content} ${props.collapse ? classes.collapse : ''}`}>
You are using a string not the generated hash
this part will not work
${props.collapse ? 'collapse' : ''}
Quick fix
Try not chaining it.
.collapse {
padding-left: 100px;
display: block;
transition: padding-left 0.2s linear ;
}
and add
classes.collapse instead of collapse
${props.collapse ? classes.collapse : ''}
In React you need to use the keyword 'className' instead of 'class'
https://reactjs.org/docs/dom-elements.html#classname
Also if you want to use CSS Modules you need to import your Layout.module.css file like this
import styles from './Layout.module.css';
And you can add CSS selector like this
<div className={styles.Content}></div>
you can study this here https://www.w3schools.com/react/react_css.asp
I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.