I have a CSS Selector which matches all the like buttons on Instagram.
Say there are five posts on the screen, the CSS Selector will return five matches, but I'm not aware of the syntax required to cycle through the items one by one.
span.fr66n>button -> Returns 5 matches
Image of Selection
Could anyone please let me know how we can cycle through the matches?
Although not entirely a scripting language - you CAN cycle through items and assign an index and display that - CSS counters.
This is a display only feature - you cannot select an item - except manually via nth-of-type() or nth-child() etc, so if you want to target the selectors you will need js... but if you want to visually render an index associated with a list of items - totes possible
body {
counter-reset: button;
}
button {
position: relative;
display: block;
margin: 8px;
}
button::before {
counter-increment: button;
content: "Button " counter(button) ": ";
}
<p>Using CSS Counters</p>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
Related
I want to use RTL for some of my components in Nextjs. I also use material-ui. Unfortunately when I change direction in _documents.js with <HTML dir="rtl">, the direction of all of my components will change. material-ui's direction in createMuiTheme() doesn't affect direction at all.
Some of the components (like arrows) must not change based on direction. What should I do in order to keep them safe from changing direction.
Material Ui createMuiTheme get direction as an option itself
I also remember that it respect the direction of body tag
So for changing the direction of some part of your component, you have 3 ways as I know.
Change direction option in material createMuiTheme
It could be handle via your theme provider component for example
Use other instance of material Theme provider around your rtl components
Theme nesting
Put dir="rtl" on native DOM tags these will affect all lower subtree styles if you want e.g. flex-box direction and ...
for example
const ARABIC_PATTERN = /[\u0600-\u06FF]/
const getDirection = text => (ARABIC_PATTERN.test(text) ? 'rtl' : 'ltr')
<div dir={getDirection('what you want to test')}>
<Components />
</div>
Hacky suggestion. It's probably not the best answer, but it might be handy/decent if you need to just "reset" the position of 1-2 elements.
First invert everything like your are doing, then put a CSS class on the elements that shall not be "inverted":
.not-rtl-inteverted {
transform: scaleX(-1);
}
This way, you are basically inverting everything, and then inverting once again the elements with the class above.
section {
display: flex;
justify-content: space-around;
}
div {
background: green;
padding: 20px;
margin: 0 10px;
flex-basis: 33%;
}
.rtl {
transform: scaleX(-1);
}
<section>
<div>
<p>No RTL</p>
</div>
<div>
<p>Yes RTL</p>
</div>
<div>
<p>Yes RTL - but reset it on the 2nd line (by applying the same CSS class again)</p>
</div>
</section>
<section>
<div>
<p>text 1</p>
<p>text 2</p>
</div>
<div class="rtl">
<p>text 1</p>
<p>text 2</p>
</div>
<div class="rtl">
<p>text 1</p>
<p class="rtl">text 2</p>
</div>
</section>
In the example, by using twice the same class (once in the parent and once again the children that doesn't need to be rtl'd, we have this reset effect).
Again, might be handy for very simple use cases. I won't suggest this as a general solution to your problem.
I am using material-table "https://material-table.com/"
This is my component that renders a table of data. Here, I am using a custom button inside title for adding new data. It is inside title so that the button goes on the top-left side. I am not using the default add option given by material-table because I want to display a separate form page for adding data instead of inline-adding given by material-table. It works perfectly.
The problem is that the default styling of title has overflow:hidden which can be seen by inspecting it.
<div class='MTableToolbar-title-35'> .... </div>
I want this overflow:hidden to be overflow:auto. How can I override the styling of this title?
export const EmployeeView = ({columns,data}) => {
return (
<div>
<MaterialTable
columns={columns}
data={data}
title={
<div>
<IconButton size='small' color='primary' onClick={() => console.log("Add employee")}>
<AddCircleIcon />
</IconButton>
</div>
}
onRowClick={(event,rowData) => console.log(rowData)}
/>
</div>
)
}
Please use this in the css file
.MuiTypography-h6{
font-size: 1rem;
color: red;
overflow:auto
}
I mentioned the color and font size for testing.
I need to create button with image on react.
i define the code
<button id='a' value='value1' >
<img="image.png" align="right|middle"/>
"myButton"
</button>
but the problem is
i see the image in different align from the text
i mean that the text and the image are not in the same hight and i can't make tham look good
i not sure this is best prectice to do it - ( i must store the button id and also the button value on some way )
You can use flexbox to make alignment easier (align-items is useful - here I set it to center). Children of a flex-container can change the order they appear using the order property.
Below is a toy example of a component that takes a single prop align, which determines whether the image goes before or after the text.
const Button = ({ align }) => (
<button className="my-button">
<img className={align} src="http://via.placeholder.com/50x50" />
click me
</button>
)
ReactDOM.render(<div>
<Button />
<Button align="right" />
</div>, document.getElementById("root"))
.my-button {
display: flex;
align-items: center;
}
.right {
order: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Would it be possible for someone to tell me how to put as many folders (icons) and text as possible below each folder in a row.
At the moment the one folders and text are displayed are displayed on each row. I would like to be able to display 5 folders all on the same row.
Thanks.
render() {
return (<div>
{this.state.Folder.map((item, index) => {
return (<div >
<FontAwesome name={"fas fa-folder fa-3x"} />
<h2> {item.FolderName}</h2>
</div>
);
})}
</div>)
In the wrapper div you could add style/class to display grid, then set the column number to be 5.
Here's an example for the class:
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
More details at MDN here.
I have been looking to implement Material-UI in my React ES6 project. As I have been trying things in a sandbox, I noticed a pretty significant styling quirk on the RaisedButton component. When hovering at times there is either a line at the top or bottom of the button where the hover effect doesn't completely overlap the button. The behavior changes when I override the margins. For instance when I have 8px margins the plain button has no line. When I add 6px margins the button has a line at the top. When I have a 4px margin it has a line at the bottom. This behavior changes also when there's different components next to each other in the HTML.
I am using Source Sans instead of Roboto, but switching back to Roboto has the same behavior. Likewise, keeping text-transform as uppercase instead of none has the same behavior.
I have tried wrapping the button in a div and applying margin or padding to that with the same result.
I am on the latest Chrome on Mac OSX 10.11.3.
Thanks in advance for your help.
I am wrapping the button in a custom class to allow consistent style overrides. Here's my wrappers:
Button Wrapper
...
let customTheme = ThemeManager.getMuiTheme(CustomTheme)
customTheme.button.textTransform = 'none'
const styles = {
button: {
margin: 8
}
}
#ThemeDecorator(customTheme)
class Button extends React.Component {
render() {
return (
<div className="c-button" style={{ display: 'inline-block' }}>
<RaisedButton
style={ styles.button }
label={ this.props.label }
onClick={ this.props.onClick }
primary={ this.props.primary }/>
</div>
)
}
}
...
Modal Wrapper
...
render() {
const actions = [
<Button
label="Cancel"
onClick={ this.props.handleClose } />,
<Button
label="Submit"
primary={ true }
onClick={ this.props.handleClose } />
]
return (
<Dialog
title="Dialog With Actions"
actions={ actions }
open={ this.props.open } >
Only actions can close this dialog.
</Dialog>
)
}
...
Plain RaisedButton by itself
...
<ul>
<li>
<h4>Plain Button</h4>
<Button label="Button" onClick={this.handleClick}/>
</li>
</ul>
...
Plain RaisedButton for Modal
...
<li>
<h4>Plain Modal</h4>
<Button label="Modal Dialog" onClick={ this.handleOpen } />
<Modal
open={ this.state.open }
handleClose={ this.handleClose }
handleOpen={ this.handleOpen } />
</li>
...
I'm hovering my mouse over the buttons in these screenshots. The only difference is the override of the margin in the first one to be 8px.