Concealing additional information within a personalized drop-down menu

When creating a custom dropdown, I've noticed that long text in the list overlaps with my dropdown icon. Here is how it looks with short text:

https://i.sstatic.net/upieZ.png

And here is how it appears with long text:

https://i.sstatic.net/Og7IM.png

Is there a way to hide extra text when it gets too close to the icon? You can find the full code in this sandbox: https://codesandbox.io/s/recursing-cloud-c6oxc

const DropdownDisplayUI = styled.div`
  color: #3d4671;
  position: relative;
  background: #dbeaf4;
  width: 140px;
  height: 35px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 2px;
  font: 15px/19px Source Sans Pro;
  margin-top: 5px;
  padding: 8px 7px 8px 10px;
`;
htmlcssreactjsstyled-components

Answer №1

Replicate this CSS style

const StyledDropdown = styled.div`
  color: #3d4671;
  position: relative;
  background: #dbeaf4;
  width: 125px;
  height: 35px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 2px;
  font: 15px/19px Source Sans Pro;
  margin-top: 5px;
  padding: 8px 7px 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

`;

Answer №2

Here are some key properties to include:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

To further enhance your design, consider setting a fixed width for the text within DropdownDisplayUI. Additionally, add padding-right equal to the icon's width or utilize position: relative with 

display: flex; justify-content: space-between; align-items: center;

Answer №3

Upon reviewing the website, I discovered a potential workaround for this issue:

const StyledDropdownDisplayUI = styled.div`
      color: #3d4671;
      position: relative;
      background: #dbeaf4;
      width: 140px;
      height: 35px;
      box-sizing: border-box;
      cursor: pointer;
      border-radius: 2px;
      font: 15px/19px Source Sans Pro;
      margin-top: 5px;
      padding: 8px 25px 10px 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      line-height: 25px; 
';

Answer №4

Give this a shot - try using the word-break and text-overflow properties. They should do the trick

const DropdownDisplayUI = styled.div`
      color: #3d4671;
      position: relative;
      background: #dbeaf4;
      width: 140px;
      height: 35px;
      box-sizing: border-box;
      cursor: pointer;
      border-radius: 2px;
      font: 15px/19px Source Sans Pro;
      margin-top: 5px;
      padding: 8px 25px 10px 10px;
      overflow: hidden;
      white-space: nowrap;
/*try adding these two properties below to see it in action*/
      text-overflow: ellipsis;
      word-break:break-all;
`;

Answer №5

If you want to adjust the spacing, try adding padding within the select box like this:

.first select{
  padding: 5px 0px 5px 65px!important;
}
.second select {
    padding: 9px 0px 5px 0px;
}
.third select {
    padding: 5px 40px 5px 5px;
}
label{
  color:red;
  margin-bottom:20px;
}
label:after,label:before{
  text-align:center;
  content="***";
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<p >for a better view, use full screen mode</p>
  <div class="row mt-5">
  
    <div class="col-4">
      <div class="first">
        <label>starting with more space</label>
        <select class="form-control" id="sel1" name="sellist1">
        <option>aaaaaaadddddddddffffffxxxxxxxxxxffffxxxxxxxxxxx</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </div>
    <div class="col-4">
       <label>starting with equal space</label>
      <div class="second">
        <select class="form-control" id="sel1" name="sellist1">
        <option>aaaaaaadddddddddffffffxxxxxxxxxxffffxxxxxxxxxxx</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </div>
    <div class="col-4">
      <label>starting with equal space</label>
      <div class="third">
        <select class="form-control" id="sel1" name="sellist1">
        <option>aaaaaaadddddddddffffffxxxxxxxxxxffffxxxxxxxxxxx</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

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

What is the best way to center a blog title on the screen?

Being a beginner in the world of blogging, I am looking to make some changes to my blog layout. Currently, my blog title is situated at the top-left corner but I would like it to be positioned in the middle of the screen with the description below the imag ...

htmlcssblogsbloggertitle

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays

I'm currently using Materialize 0.97.7 along with Leaflet 1.0.1 (the latest version). <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com ...

javascriptcssleafletmaterialize

Move a div element to the foreground while maintaining its fixed position

I had a situation where I used the fixed position for a div on a webpage to keep it stuck at the top like a header. However, when scrolling, it ended up getting hidden behind other elements such as divs, videos, and text! Here's how the div should al ...

javascriptjqueryhtmlcss

What is the proper way to incorporate React hooks in my component library?

I'm currently working on a component library that is integrated into a Nextjs project via NPM link, and I am facing challenges in ensuring it loads consistently without any errors. The most recent issue I encountered is: Invalid hook call. Hooks ca ...

reactjswebpackreact-hooksnext.js

Does HTML5 officially provide the speechsynthesis API for users?

Can someone clarify if speech synthesis is officially supported by HTML5 for converting text-to-speech? ...

htmltext-to-speechmozillaw3cspeech-synthesis

Achieving consistent height for adjacent divs with AngularJS - how to do it?

Check out my code snippet here: JSFiddle I have set up my panels to be hidden initially, and I want them to expand with equal height when a button is clicked. Thank you in advance for any assistance! var app = angular.module("myApp", []).controller("myCt ...

htmlcssangularjstwitter-bootstrap-3

What is the best way to transmit progress streams with Node and Express?

Currently, I am working on a Video Resizer website where I need to keep the user updated on the progress of video conversion. Most tutorials about this use SSE with get requests and EventSource for listening. In my case, it involves a post request that in ...

node.jsreactjsexpressserver-sent-events

Is there a way to automatically mount tabs without manually clicking on them?

Looking to optimize data fetches within a large tab container in React using material-ui. My goal is to have each Tab component handle its own data fetching, especially for Tabs with a greedyLoad prop that will be mounted upon the initial mounting of the T ...

javascriptreactjsmaterial-ui

What could be the reason for Bootstrap failing to display properly on my website?

I just started my journey in web development and decided to create my first website using Flask. However, when I tried running the website for the first time, Bootstrap wasn't working properly. Upon inspecting the site, I noticed some errors popping u ...

pythonhtmlflaskbootstrap-4

What is the best approach for incorporating style tags into a webpage - dynamically inject them into the head or include them directly in the

My website includes html content that is fetched from another server and embedded into a page during the server-side compilation process. The issue arises when this embedded content contains its own css, leading to unstyled flashes on mobile devices desp ...

javascriptjquerycsshtml

I'm having trouble viewing the items listed under a specific office. Every time I look at the dropdown menu, it appears to be empty with no

When a specific office is selected, the corresponding items should be displayed: If the office chosen is Building Management Office, the items Spalding Basketball and Mikasa Volleyball should be shown. If the office chosen is Information Technology Resour ...

reactjsreact-hooksmaterial-uijsxreact-hook-form

Passing PHP values to JQuery is a common practice in web

I have a PHP file named userAuthentication.php containing a function that returns either "true" for successful authentication or "false" for a failure. In addition, I have a login view called login.html which includes fields for inputting username and pas ...

phpjqueryhtml

Understanding the fundamental principles of Redux

I find myself uncertain about connecting react-redux and a database. Would it be advisable to link my redux store to a database like MongoDB? For instance, if I have a todo app and want to use redux but also update the database, does this approach mak ...

reactjsdatabasemongodbreduxreact-redux

Unlock the navigation tab content and smoothly glide through it in Bootstrap 4

Hey there, I have managed to create two functions that work as intended. While I have some understanding of programming, I lack a background in JavaScript or jQuery. The first function opens a specific tab in the navigation: <script> function homeTa ...

javascripthtmljquerybootstrap-4

Odd Behavior when altering button attribute using Jquery

After disabling a button with a click handler, I have noticed an interesting behavior where the button does not submit afterwards. The issue seems to vary between different browsers, with Firefox still allowing form submission after the button is disabled, ...

javascriptjqueryhtmlformsbutton

What is the best way to display a responsive website design exclusively for certain devices?

My website currently lacks responsiveness. Typically, we can check if a website is responsive by resizing the browser to see if it adjusts using CSS3 media queries. However, I am looking to create a better user experience by ensuring that visitors using a ...

htmlcssresponsive-designweb-deployment

What is the best way to position my image in the center within a blank canvas?

What is the best way to center an image in a white space? I am working with HTML, PHP, and CSS, but I am unsure of how to achieve this. So far, I have tried aligning the image within text on w3schools.com, but my other attempts like: #image { margin- ...

phpcssimagehtml

Simple Method To Dynamically Align jQuery LightGallery Thumbnails On a Responsive CSS Website

Can anyone assist me quickly? I've implemented everything but am facing a slight issue with the centering of my ul code. I've tried various solutions without success. Here is my code, any advice would be greatly appreciated (I may sound stressed ...

jquerycssgallerythumbnailscenter

Unable to transmit JSON data through FETCH protocol

I have set up an API Service using node js on port 3001 and a web UI with REACT running on port 3000. My goal is to POST details in JSON format from the web page to the API. While I can successfully hit the API, the JSON data is not being received properly ...

node.jsreactjsjsonexpressfetch

To combine both jquery-1.min.js and jquery.min.js is essential for achieving optimal functionality

When using these two files, only one of them can work on a page. <script src="jquery.min.js"></script> <script src="jquery-1.min.js"></script>//Only the second one works Alternatively, if the order is changed: <script src="jq ...

javascriptjqueryhtml