What is the method for aligning a button label to the left and an icon to the right?

I have a list of items and I want to display label text on the left and a check icon on the right. This works fine when the text is short, but when I added the textOverflow property, the icon gets hidden along with the rest of the 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"
        }}
      >
        Create a Label
      </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>
);
htmlcssreactjs

Answer №1

If you're looking to achieve this layout, consider using flexbox:

.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>

Answer №2

The reason for this issue is because the icon is included in the text that is currently being hidden.

A workaround would be to incorporate your icon as a pseudo-element, which should resolve the problem and achieve the desired outcome.


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>

For reference, you can view an example here: https://codepen.io/anon/pen/zQdOGm

Answer №3

One possible approach is to implement a solution like this:

 const allTags=(
          <Popover style={{width:"auto"}} id="popover-basic" title={<h6 style={{textAlign:"center",fontFamily:"verdana",color:"#8f9091",fontStyle:"bold",margin:"8px"}}>
          Create a tag
          </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";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There was a unexpected JSON response from the Django backend that triggered an alert in the Chrome

Trying to send back a JSON file to the Chrome extension for user display. The query is reaching the server without issues, and the fetched URL does return the JSON file when accessed directly. However, the Chrome extension displays an "undefined" message i ...

javascriptpythonhtmldjangogoogle-chrome-extension

What is the way to retrieve an array property in a typescript interface?

Imagine a scenario with three interfaces structured as follows: registration-pivot.ts export interface RegistrationPivot { THead: RegistrationPivotRow; TBody: RegistrationPivotRow[]; } registration-pivot-row.ts export interface RegistrationPivotR ...

javascripthtmlcssangulartypescript

Slideshow box with images aligned perfectly

I have designed a container with images, but my goal is to: either show the images inline or stack them on top of each other, and then be able to navigate through them using jQuery. I attempted absolute positioning on both .box and .box img, as well as u ...

htmlcss

Using the Switch function to render components in React

I am in the process of developing a page that dynamically displays components based on user selection. Below is the main page structure that will monitor and react to any changes. const data = [{ number: 0, text: 'Content Type' }, { number: 1, t ...

reactjs

What is the best way to send a parameter from jQuery to PHP?

I am trying to create a simple button that, when clicked, will pass a value from jQuery to a PHP file for execution. The idea is that when the button is clicked, it triggers an onclick event which sends the number "1" to the jQuery code. Then, jQuery shoul ...

phpjqueryhtml

javascript onload select the text in the textarea

Is there a way to have JavaScript automatically highlight the text inside a textarea when the page is loaded? ...

javascripthtml

fetching images from the database

I am currently working on a classified website project where I want to display one photo from the database on the main page, the same photo on a category page, and then all photos when viewing the full item listing page. My goal is to have a similar setup ...

phphtmllaravelimagephoto

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

There have been numerous inquiries regarding how to apply CSS filters to an image, with some solutions that don't utilize CSS filters but still achieve the desired outcome. However, for someone new to JavaScript like myself, these answers can be confu ...

javascripthtmlcsscanvascss-filters

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Suppose I generate an HTML element in the following manner, <div id="unique-div" class="concealed">Hello, TB3</div> <div id="unique-div" class="hide-me">Greetings, TB4</div> <div id="u ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for setting the height of a div within a td to be 100%

I am struggling to make the orange divs in this example stretch out to match the height of the enclosing td element without explicitly setting the parent's height. I have tried using display: flex and align-items: stretch, but I can't seem to ach ...

htmlcss

Is there a way to align this button perfectly with the textboxes?

https://i.sstatic.net/ODkgE.png Is there a way to align the left side of the button with the textboxes in my form? I'm using bootstrap 3 for this. Here is the HTML code for my form. I can provide the CSS if needed. Thanks. h1 { font-size:83px; ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

A form field leaves the container element, positioned to the far right using the `float: right;` CSS property

This is the content within the <body> tag. <div id="border"> <p><h1 style="text-align: center;">Welcome to XYZ Airline!</h1></p> <table caption="Select your preferred seat" style="margin-botto ...

htmlcssalignment

Unable to perform module augmentation in TypeScript

Following the guidelines provided, I successfully added proper typings to my react-i18next setup. The instructions can be found at: However, upon creating the react-i18next.d.ts file, I encountered errors concerning unexported members within the react-i18 ...

reactjstypescriptreact-i18next

Updating the input text state of a form in React with real-time changes using setState()

const [text, setText] = useState(''); const handleTextChange = (e) => { setText(e.target.value); } // Within a form <input onChange={handleTextChange} value={text} type="text" /> I'm attempting to achieve a straightf ...

reactjsuse-effectuse-state

What is the best way to display a component based on the route using GatsbyJS?

Currently working with GatsbyJS and attempting to dynamically render different header components based on the URL route. For instance: mydomain.com/ should display HeaderLanding mydomain.com/blog should display HeaderMain Seeking guidance on how to imp ...

javascriptreactjsreact-routerjsxgatsby

How can I align text to the right in a navbar using Bootstrap 5?

My current navbar setup is as follows: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="navbarText"> ...

htmlbootstrap-5

The mask effect is not only darkening the background image but also affecting the color of my header content

Why is the mask I applied making not only my background image darker but also my h1 and button? <!-- Header - set the background image for the header in the line below--> <header class="bg-image d-flex justify-content-center al ...

htmlbootstrap-5

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

javascriptjqueryhtmlcss

Tips on creating an inline editable cell in a Tree View

I've been working on a category tree that includes expand and collapse buttons. You can see what I have so far here: Category Tree Now, I'm looking to make each item inline editable. Can someone guide me on how to achieve this? If you want to t ...

javascriptreactjsmaterial-uidevexpress

Basic JavaScript framework centered around the Document Object Model (DOM) with a module structure similar to jQuery. Currently facing challenges with

In order to create a simple framework with jQuery style, I have written the following code: (function(window) { window.smp=function smpSelector(selector) { return new smpObj(selector); } function smpObj(selector) { this.length = 0; if (!s ...

javascriptjqueryhtmlcssframeworks