How to put button label on left and an icon on the right?

Related searches

So i have a list of items and i want to put label text on the left and the check icon on the right this work when my text is short but when i added the textOverflow property the icon become hidden with the rest of text: here is my list

const allTags = (
  <Popover
    style={{ width: "auto" }}
    id="popover-basic"
    title={
      <h6
        style={{
          textAlign: "center",
          fontFamily: "verdana",
          color: "#8f9091",
          fontStyle: "bold",
          margin: "8px"
        }}
      >
        Créer une etiquette
      </h6>
    }
  >
    <div>
      {this.state.allTagsList.map((tag, i) => {
        return (
          <div>
            <div style={{ display: "inline" }}>
              <Button
                className="btn btn-lg btn-fill"
                style={{
                  width: "210px",
                  maxWidth: "300px",
                  border: "none",
                  backgroundColor: tag.color,
                  fontStyle: "bold",
                  cursor: "pointer",
                  padding: "10px",
                  marginBottom: "3px",
                  paddingRight: "80px",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  textAlign: "left"
                }}
                onClick={e => {
                  console.log("dd");
                }}
              >
                <span>{tag.text}</span>
                <span className="fas fa-check" />
              </Button>
            </div>
            <div style={{ display: "inline" }}>
              <Button
                className="btn btn-circle-micro"
                style={{
                  borderRadius: "30px",
                  border: "none",
                  width: "25px",
                  height: "25px",
                  textAlign: "center",
                  padding: "1px 0",
                  marginRight: "2px",
                  marginTop: "8px"
                }}
              >
                <i
                  className="fas fa-pen"
                  style={{ pointerEvents: "none", transform: "scale(1,1)" }}
                />
              </Button>
            </div>
          </div>
        );
      })}
    </div>
  </Popover>
);

This is happening because your icon is part of the text that is being hidden.

You can actually add your icon as a pseudo-element and it will work just as you want.

button{
  width: 100px;
}

button span{
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}

button::after {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
<button>
    <span>Some giant text</span>
</button>

Here is an exemple: https://codepen.io/anon/pen/zQdOGm

Where to Place Icons Next to Button Labels, Placing them to the left of your button label allows users to see the icon first. If you place icons to the right of your button label, they're not� How can I align the icons on each button? Currently it looks like "<< Back" ">> Next", because icons are aligned on the left and text is aligned on the right side. I now want to align the icon for the next-button on the right side and the text on the left, to make it look like "<< Back" "Next >>". I hope someone can help me with that. Cheers

You could use flexbox for this manner:

.wrapper{
  width: 100px;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
}

.text{
  flex-basis: 80%;
  background-color: red;
  overflow: hidden;
}

.icon{
flex-basis 20%;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: yellow;
}
<div class="wrapper">
  <div class="text">
  Halloooooooooooooo
  </div>
  <div class="icon">
  </div>
</div>

When a button contains text and an icon, which should come first , Rather their eyes will scan (top to bottom, left to right in western cultures) On the other hand if you place the icons on the right users will have to for the label, it becomes a simple way that draws attention to the button and is� I use my own custom font icons and the best tip I’ve found to date is to design all icons with the same canvas size, however when exporting individually, if some are narrower than others export the icon only, the not full canvas. This ensures two things, it avoids uneccesery padding and keeps padding even left and right of the icon.

You can do something like that.

 const allTags=(
          <Popover style={{width:"auto"}} id="popover-basic" title={<h6 style={{textAlign:"center",fontFamily:"verdana",color:"#8f9091",fontStyle:"bold",margin:"8px"}}>
          Créer une etiquette
          </h6>}>
          <div>
          {this.state.allTagsList.map((tag,i)=>{
            return <div>
            <div style={{display:"inline"}}><Button id="Button1" className="btn btn-lg btn-fill"  onClick={(e)=>{console.log("dd")}}>
            <span id="Test">{tag.text}</span>
            <span className="fas fa-check"/>
            </Button>
            </div>
            <div style={{display:"inline"}}>
            <Button className="btn btn-circle-micro" style={{borderRadius: "30px",border:"none", width:"25px",height:"25px",textAlign:"center",padding: "1px 0",marginRight : '2px',marginTop:"8px"}}
            >
            <i className="fas fa-pen" style={{pointerEvents:"none",transform:"scale(1,1)"}}/></Button>
            </div>
            </div>
          })}
          </div>
          </Popover>
        );

Css:

  #Button1 {
       width:"210px",
            maxWidth:"300px";border:"none";
            backgroundColor:tag.color;fontStyle:"bold";
            cursor:"pointer";padding:"10px",marginBottom:"3px";
            paddingRight:"80px";overflow: "hidden";textAlign:"left";

    }
#Test{
  textOverflow:"ellipsis";
}

How to put button label on left and an icon on the right?, So I have a list of items, and I want to put label text on the left and the check icon on the right this work when my text is short, but when I added� Auto Arrange Icons on your Desktop will always align them top left on your Desktop To manually manage your icons as you like to have them on your Desktop, you must disable Auto-Arrange, by right clicking your Desktopn and choosing View - 'Auto arrange Icons' Right, and changing the code for that probably is too hard or impossible in Windows.

Tips for Aligning Icons to Text, The example on the left is much more consistent with the content font size and has better alignment than the right, despite both examples� Alert Buttons Outline Buttons Split Buttons Animated Buttons Fading Buttons Button on Image Social Media Buttons Read More Read Less Loading Buttons Download Buttons Pill Buttons Notification Button Icon Buttons Next/prev Buttons More Button in Nav Block Buttons Text Buttons Round Buttons Scroll To Top Button

How to align button to right side of text box in Bootstrap , As we want to align the button to the right side of the text box, we have label for = "" >Enter Your Name:</ label > Note: Although by default, elements like buttons, are left-aligned still we can use float-left class to mention it specifically. How to set div with left image and button at bottom using bootstrap? Buttons Alert Buttons Outline Buttons Split Buttons Animated Buttons Fading Buttons Button on Image Social Media Buttons Read More Read Less Loading Buttons Download Buttons Pill Buttons Notification Button Icon Buttons Next/prev Buttons More Button in Nav Block Buttons Text Buttons Round Buttons Scroll To Top Button Forms

In order for icons to serve as a visual scanning aid, users need to see them before they see the button label. Placing them to the left of your button label allows users to see the icon first. If you place icons to the right of your button label, they’re not helping users scan because users see them last.

Comments