CODEWITHSUNDEEP
cssreactjsexpressmaterial-uiweb-development-server
prasoonraj
prasoonraj

Reputation: 90

How to align material-ui icons to right?

I have a dynamically generated list which is generated by the following code

           <list className = "todos-list">
                        {allTodos.map((todo, index)=> {
                            return (
                            <li className = "todo-element"> {todo} <DeleteButton id= {index} 
                            callBackFunction = {deleteItem}/> </li>)
                        }
                        )}
           </list>

now as you can see {todo} and are placed next to each other so in the output also they are just placed next to each other as shown in the image attached (please do see it)

the code to is shown below

<span className = "DeleteButton"><DeleteIcon onClick = {deleteMain}/></span>

Delete icon is taken from material-ui/icons now I am having a problem in positioning the delete button to the right so that in all list items it is at a uniform distance from the boundary,(please see the image attached you will get the problem )
Please do let me know what can I do here??enter image description here

Upvotes: 0

Views: 3937

Answers (2)

Pasan Sumanaratne
Pasan Sumanaratne

Reputation: 905

Try applying these styles:

todo-element class :

{
 width: 100%
}

Delete button :

{
 float: right
}

If you're using inline styles for button:

<DeleteButton style={{ float: 'right' }} id={index} callBackFunction = {deleteItem}/>

Upvotes: 2

Ozan Başkan
Ozan Başkan

Reputation: 76

#parent-element {
position:absolute;
}
.DeleteButton{
position:relative;
right:5;
}

This could work.

Upvotes: 0

Related Questions