CODEWITHSUNDEEP
htmlcssreactjs
Maicmi
Maicmi

Reputation: 1104

React - How can I align the glyphicon to the most right?

My React App has the autocomplete, in the autocomplete I provide the list and the glyphicon then if I click glyphicon the content will be inserted to the MongoDB.

Anyway, I try to align the glyphicon to the most right but I cannot do that. If I move it outside li, the syntax is error.

The following is the capture image. enter image description here

The glyphicon is closed to the text but it should be at the right most.

My code is as following:

<li key={_id}>{itemname}
  <i className="glyphicon glyphicon-edit" onClick={() => 
  this.addToReceiving(
    itemid, 
    barcode, 
    itemname, 
    category, 
    stocktype, 
    itemtype, 
    wholesaleprice, 
    retailprice, 
    quantitystock, 
    receivingquantity, 
    description, 
    comment)}>
  </i>
</li>

Upvotes: 0

Views: 88

Answers (2)

Johnson Samuel
Johnson Samuel

Reputation: 2076

enter image description hereYou can add span or label to the itemname...

Something like this {itemname} or

{itemname}

and add a class item-label ..

.item-label{ padding-right:10px }

Hope this helps.

Upvotes: 1

MontyGoldy
MontyGoldy

Reputation: 749

you can use flexbox to align the items.

add a span to the text

<li key={_id}>
  <span>{itemname}</span>
  <i className="glyphicon glyphicon-edit" onClick={() => 
  this.addToReceiving(
    itemid, 
    barcode, 
    itemname, 
    category, 
    stocktype, 
    itemtype, 
    wholesaleprice, 
    retailprice, 
    quantitystock, 
    receivingquantity, 
    description, 
    comment)}>
  </i>
</li>

try this : -

li {
  display: flex;
  //This will push both child elements to far corner
  //You can also try justify-content: space-around; if you want some space in the corner
  justify-content: space-between;
}

Upvotes: 1

Related Questions