Guide on including an arrow to the right of a drop-down list button using CSS

I'm currently working on developing a drop down list using polymer. I am facing an issue with the CSS styling.

Below is an example for reference:

Access jsfiddle example here

<div style="width:200px" class="button initial gray">
<div style="padding-left:12px;padding-right:12px;">
<div class="button-value truncated" style="width:inherit;">
Select value very long label with dots at the end
</div>
<div class="arrow">&#x25BC;</div>
</div>
</div>

I am trying to achieve a drop down list as shown in the example above, but I am facing difficulty with getting the arrow to appear correctly on the right side of the button.

My question is, how can I accomplish this?

View gif example here

Any help or guidance on this matter would be greatly appreciated! Thank you in advance!

htmlcsspolymer

Answer №1

To achieve this effect, make sure to incorporate the following CSS properties:

text-overflow: ellipsis;
overflow: hidden;

This will display three dots after your list item. Additionally, you must specify a width for the span element as well.

width: 100px

For illustration purposes, here's a code snippet:

<div style="width:200px" class="button default grey">
  <div style="padding-left:12px;padding-right:12px;">
    <div class="button-value truncated" style="width:158px; display: inline-block">
      Choose the value with a lengthy label that ends with dots 
    </div>
    <div style="display: inline-block;margin-top: 12px;vertical-align: top;"class="arrow">&#x25BC;</div>
  </div>
</div>

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

Answer №2

     div.button.orange {
        border: 1px solid #FF6200;
        background: inherit;
        background-color: #FF6200;
        border-radius: 5px;
        box-shadow: none;
        font-family: 'ING Me';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: white;
        cursor: pointer;
        height: 36px;
        box-sizing: border-box;
        box-shadow: 1px 1px 5px lightgray;
      }

      div.button.gray {
        border: 1px solid #767676;
        background: inherit;
        background-color: white;
        border-radius: 5px;
        box-shadow: none;
        font-family: 'ING Me';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #FF6200;
        cursor: pointer;
        height: 36px;
        box-sizing: border-box;
        box-shadow: 1px 1px 5px lightgray;
        position:relative;
        
      }

      div.button.gray.initial {
        color: #767676;
      }

      div.button.active {
        border-radius: 4px 4px 0px 0px;
        border: 1px solid #FF6200;
      }

      div.button-value {
        text-align: center;
        line-height: 36px;
        width: inherit;
      }

      ul.options>li {
        padding-left: 12px;
        padding-right: 12px;
        line-height: 36px;
      }

      .truncated {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      ul.options {
        color: black;
        list-style-image: none;
        list-style: none;
        list-style-type: none;
        border-radius: 0px 0px 4px 4px;
        box-sizing: border-box;
        position: absolute;
        width: auto;
        margin: -1px;
        padding: 0;
        list-style: none;
        border: 1px solid #FF6200;
        border-top: none;
        background-color: white;
        box-shadow: 1px 1px 5px lightgray;
      }

      ul.options>ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
      }

      ul.options>li:hover {
        color: white;
        background-color: #FF6200;
        text-decoration: underline;
      }
      
      .arrow{
        position:absolute;
        right:4px;
        top:0;
        line-height:36px;
        }
      
<div style="width:200px" class="button initial gray">
  <div style="padding-left:12px;padding-right:18px;">
    <div class="button-value truncated" style="width:inherit;">
      Select value very long label with dots at the end&#x25BC;
    </div>
    <div class="arrow">&#x25BC;</div>
  </div>
</div>

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

Has anyone figured out the issue with Uplodify? It suddenly ceased to function

For some time now, I've been using uplodify without any issues. Unfortunately, as of yesterday, it suddenly stopped working. I'm at a loss as to what might have caused this sudden change. Could someone please offer me some assistance? I've ...

javascriptphpjqueryhtml

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...

javascripthtmlcssangularjs

The body can only stretch up to a certain percentage of its width, not a full 100%

Recently, I've been encountering an issue with my webpage where the body does not stretch 100% the width of the screen. I've tried numerous CSS rules to fix it, but nothing seems to be working. When you view the page in a browser, it appears to c ...

htmlcssstretch

Creating an HTML Canvas effect where images are placed onto another image

Looking to create a similar effect as seen on this website () On this site, users can upload their images (4000 * 400) and have the option to add Mickey Mouse ears over their image before saving it. The Mickey Mouse ear is resizable from all four sides f ...

javascriptjqueryhtmlcanvas

Tips for Incorporating HTML Code into an ASP Button's Text Attribute

How can I add a symbol to a button's text without it showing as blank? The symbol in question is an arrow, which you can find here. <asp:button id="btnAdd" runat="server" class="next"/> CSS: .next { content = &#10095; width:50px; } ...

htmlcss

The HTML textarea is not updating properly when using jQuery's keypress event

I am facing an issue with my forms on a webpage, each containing an html textarea: <textarea name="Comment" class="inputTextArea">Hello World!</textarea> There is a javascript event handler that automatically submits the fo ...

javascripthtmlformstextarea

What is the process for activating the Placeholder feature in a Floating Input Field in a React application

Having trouble changing the placeholder value in a Bootstrap-based floating input. I want to display default text as a placeholder and allow users to edit it. Any suggestions? Check out this example on CodeSandbox <div class="form-floating mb-3&qu ...

htmlreactjsreact-bootstrapbootstrap-5

Responsive background styling with CSS

I'm currently learning how to create responsive websites, and I've encountered an issue. When I resize the website horizontally to a point just before the edge of the screen touches one of the elements, the background also shrinks, leaving white ...

htmlcssreactjs

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

htmlcss

Is it possible for a mobile web application to continue running even when the screen is

Thinking about creating a mobile web application with the use of jQuery Mobile for tracking truck deliveries. I'm interested in sending GPS coordinates back to the server periodically. Is this possible even when the screen is turned off? If not, any ...

javascripthtmljquery-mobilemobile-website

"Exploring the world of JavaFX: Unveiling the mysteries

Here are some CSS queries: How can I create a semi-transparent color using a color variable in CSS? * { -my-color: #123456; } .label { -fx-text-fill: ??? } What should be inserted in "???" to achieve a 50% opacity version of -my-color? Is it be ...

cssjavafx

Creating dynamic div containers on the fly

I'm dealing with an issue in my application where multiple overlapping div boxes are being dynamically generated and they all end up having the same content. When I add content to a box, it gets applied to all existing boxes instead of just the last o ...

jquerydomhtml

Why does the pound symbol in z-index always show up in Angular?

Having an issue with my code where I set a z-index in the CSS like this: .mat-mini-fab { position: absolute; right: 5px; top: 4px; z-index: 999; box-shadow: none !important; } However, whenever I visit my site, the z-index is not being appl ...

javascriptcssangulartypescript

Is it possible to generate multiple HTML tables dynamically using a for loop in jQuery?

My goal is to dynamically create html tables based on the response received in an array. A new table should be generated after every 6 elements, with the header of the table being the array elements themselves. The expected output format is as follows: -- ...

jqueryhtmlbootstrap-4

struggling to adjust image dimensions using bootstrap styling

Currently, I am in the process of creating a Carousel image slider using bootstrap. However, I am facing an issue with changing the height of the images within the carousel. Whenever I try to adjust the height, it ends up affecting both the width and heigh ...

htmlcssbootstrap-4

Turn off Chrome 69's autofill functionality

I've recently encountered an issue with Chrome's password autofill feature that has been troubling me for a few days now. This problem began when I was using Chrome version 69. After much trial and error, I found a solution by removing the id an ...

javascripthtmlgoogle-chromeautocompleteautofill

Tips for making a circle and a bar overlap using CSS

Trying to create a circular image and a horizontal bar of equal height next to it in a user profile. It needs to be responsive and look like the image below, with text in the black bar. Looking for help with CSS to achieve this: I currently have the cod ...

htmlcsscss-shapes

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

After the modal finishes fading out, I want my form to be submitted and sent to the email file "refreshform.php". However, currently after the modal fades out, the form does not submit or post anything to the PHP file for sending the email. It simply fades ...

javascriptphpjqueryhtmlcss

My a:hover isn't functioning properly and my <a> tag is not redirecting to the link when clicked. Can anyone help me troubleshoot these issues?

I've created a website with multiple stacked sections. Each section is contained within a div with the class class="concertDiv". In one of these sections, I want to display an album cover on the left side and three clickable text rows on the right sid ...

htmlcss

Effective Ways to Redirect During or After Executing the onClick Function of Button

I am currently working on implementing a feature for my Next.js website. The functionality involves allowing users to create a new group by clicking a button, and then being redirected to an "Invite members" page with the auto-generated group_id included i ...

javascripthtmlreactjshttp-redirectnext.js