Is it possible for a dropdown to span 100% of the width

http://jsfiddle.net/gL1xynzr/

Is there a way to style a dropdown menu with the following properties:

width: 100%;
max-width: 440px;

I am planning to include 4 of these dropdowns in one CSS table row to ensure they fit horizontally on mobile phone portrait view. However, only the menu that drops down should have the specified width.

<div id="heroes-dropdown" class="ui dropdown">
    <div class="text">Heroes</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
</div>
csshtmlsemantic-ui

Answer №1

Consider utilizing view width measurements

width: 100vw;
max-width: 440px;

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

Do not allow negative values to be displayed in the text box

Plunker I need to restrict negative values from being entered into a text field. If the user tries to input a negative value, I want the text box to remain unchanged. Although I have a directive that prevents negative values from being entered, it seems ...

javascripthtmlangularjs

Troubleshooting: Issues with Adding a New Row in Datatables using JQuery

CSS : <div class="datatable-header"> <button type="button" name="add" id="add" class="float-right btn btn-info">Add</button> </div> <div class="table-responsive"> <table ...

javascriptjqueryhtmlajaxdatatables

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...

javascriptjqueryhtml

Is it possible to customize the color of the placeholder and clear-icon in the ion-search bar without affecting

I am working with two ion-search bars and I need to customize the placeholder and clear icon color for just one of them. <ion-searchbar class="search-bar" placeholder="search"></ion-searchbar> My goal is to target a specific i ...

cssangulartypescriptionic2

Generate a dynamic form that automatically populates different input fields based on JSON data

I am trying to dynamically auto populate a form with various input types such as select boxes and text areas. I have successfully implemented this for input boxes, see example below: function autofill(){ var data = [{visible_retail: "0", brand: ...

javascripthtmljqueryajax

Is there a way to make jQuery wait for an animation by checking the animation queue

Is there a way to query the animation queue and wait for an animation without using a callback function sent to the animation itself? Can a watchdog loop be implemented outside of the animation call for this purpose? Illustrative Situation Our use of jQu ...

jqueryhtmljquery-animate

Limiting text based on the space it occupies

Is it feasible to restrict the number of characters allowed in an input field based on the space they occupy? For instance, W's and M's require enough space for 34 of them. https://i.sstatic.net/xQW5p.png However, regular sentences of the same ...

htmlcssangularmaterial-design

What is the technique for incorporating FontAwesome icons onto an HTML 5 canvas?

I am encountering an issue while trying to use FontAwesome icons within my HTML 5 canvas. Here is what I have attempted: ct.fillStyle = "black"; ct.font = "20px Font Awesome"; ct.textAlign = "center"; var h = 'F1E2'; ct.fillText(String.fromCha ...

javascripthtmlhtml5-canvasfont-awesome

JS if clause fails to return true as expected

Here is my setup: <div id="user_input">...</div> And a button: <input type="button" id="panel_button">...</button> Using a selector: function $(id) { return document.querySelector(id); } With an event handler: var button_ ...

javascripthtmlcssanimation

Select a color by inputting the type as "color" while leaving a space between the border and

I'm having an issue with the color input There seems to be a gap between the black border and the actual color, but I want to get rid of it #color-picker { border: 5px solid black; border-radius: 5px; width: 207px; height: 60px; padding: ...

htmlcsspadding

Designing exquisite button navigation

Hey everyone, I'm currently working on creating a circular button navigation for my website. I want to have 4 buttons, each with a different color, and I want them to glow when the user hovers over them. So far, this is what I have in my HTML: HTML: ...

htmlcss

Can a jQuery/JavaScript script be run standalone?

I've got a bunch of HTML pages saved on my computer and I'm looking to create a JavaScript script that can extract specific text or elements from those pages. I found some jQuery code snippets on Stack Overflow that do what I need, but I'm n ...

javascriptjqueryhtml

Is there a way to verify the presence of a specific word within a classname?

My goal is to verify if the string ("Pre laminated ") matches the css class name I am checking. I only need confirmation of whether the given word is present in the classname: Output "pass" if it exists, output "fail" if it does not. ...

javacssseleniumclassname

Retrieving the value of onCheck from the Checkbox/ListItem

Imagine I have a React.Component that displays components from material-ui: {data.map(value => ( <ListItem key={data.indexOf(value)} primaryText={value} leftCheckbox={ <Checkbox onCheck={this.pr ...

javascripthtmlreactjsmaterial-ui

Guide to resolving the issue of "Links lacking a clear name" in Lighthouse

Lighthouse is recommending that I address my a href text Here is the HTML code snippet in question: <a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a> The issue is that I a ...

htmlcsslighthouse

I continuously encounter "undefined" when attempting to retrieve collections

Despite my best efforts, I am unable to retrieve the data from the server using the snapshot docs. I have verified that the collection is named "creaciones" in lowercase. There is one document in the collection with existing data. I have double-checked fo ...

javascripthtmlfirebase

How can I use jQuery to identify the numerical range within class/td/div elements and modify their CSS styles?

1# I need assistance in changing the CSS properties of a TD, Class, and div using a selector that specifies a specific number range. Specifically, I am looking to modify the css of torrent results with a seed count between 250-25000. Any torrents with a se ...

javascriptjquerycssselector

Rotating 3D cube with CSS, adjusting height during transition

I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the ...

javascriptjquerycss

Employing CSS selectors to target the subsequent element that is accessible

Here is the structure of my HTML: <input type = "checkbox" style = "display:none" id = "select"> <label for = "select" id = 'click'> click </label> <div class = 'next'> </div> I am trying to style t ...

htmlcsscss-selectors

Dragging and dropping elements onto the screen is causing them to overlap when trying

I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...

cssangulartypescriptangular-materialangular9