Tips for adjusting the boundaries of Semantic UI dropdown menus

Currently, I am utilizing the Semantic UI dropdown and am attempting to adjust the border-width.

The issue at hand is as follows:

https://i.sstatic.net/r8CzC.png The borders of the dropdown and menu do not align properly. How can this be resolved?

To replicate the problem you can visit this page:

Simply add a border-width: 2px to the div with classes 

ui dropdown selection active visible
, then apply the same property to the child div with classes menu transition visible.

Since the menu has a different size than the dropdown, I attempted to use width: calc(100% + 2px); but this solution did not work effectively.

csssemantic-ui

Answer №1

If you want to enhance the appearance of the dropdown, there are some CSS properties that require adjustment:

.ui.selection.dropdown .menu {
  margin: 0 -2px; // Adjust according to border width
  min-width: calc(100% + 4px); // Calculate left and right border width
  width: calc(100% + 4px); // Calculate left and right border width
}

By making these changes, you will notice an improvement in the dropdown's appearance.

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

Using Unique CSS Styles for Various Browsers Other Than Internet Explorer

I am currently working on a unique website design that incorporates all content on one page instead of navigating to multiple HTML pages. While the site functions well in Google Chrome and the latest version of Internet Explorer, I am experiencing some for ...

htmlcssfirefoxbrowsersafari

Eliminate the bold frame surrounding the input textbox

Objective: I want to remove the bold frame around the input textboxes, while maintaining a simple and single frame appearance. Issue: The boldness of the input textbox frame becomes prominent when using CSS code related to background-image, background ...

javascripthtmljquerycssjquery-ui

Unable to click on overlay in Internet Explorer version 8

When I click my overlay in different browsers like Firefox, Chrome, and IE9, the onClick function is triggered as expected. However, in IE8, it seems like the box is not clickable at all and the content behind it is receiving the click events instead. Here ...

cssinternet-explorer-8

What could be causing the text in the sidenav to vanish when the screen width reaches a specific size?

Disclaimer: This website is my first attempt at development, so I tend to make minor errors that can be hard to catch. The sidebar and submit button remain intact, but the checkboxes and their labels disappear when the screen size is reduced below a certai ...

htmlcssbootstrap-4

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Within my design, I have several rows with 3 columns each. Every column contains a main content section labeled SavedSearchBox-content (with various permutations that affect its height) and a footer labeled SavedSearchBox-footer. To structure this layout, ...

htmlcssflexbox

Interactive tables created using Google Visualization

I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...

javascriptjqueryhtmlcssgoogle-visualization

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

javascriptcss

When CSS 3 checkbox value is toggled to "off", it returns as null

I am currently using a checkbox element with the following HTML: <div class="onoffswitch"> <input type="checkbox" name="showOnNavigation" class="onoffswitch-checkbox" id="showOnNavigation" checked> <label class="onoffswitch-label" f ...

htmlcss

Applying a color gradient to nodes in d3 v5 based on their degree

If we were working with d3 v5, how might we go about coloring nodes based on their degrees? It's important that the visualization clearly shows nodes with higher degrees in darker shades and nodes with lower degrees in lighter shades. I attempted to ...

htmlcssjsond3.js

Layering one div over another using z-index

I am attempting to stack div2 on top of div1 http://jsfiddle.net/user1212/QsLVB/ <div id="div1"></div> <div id="div2"></div> #div1{ width: 200px; height: 200px; background-color: olive; float: right; position: ...

htmlcss

add text above and below a button in a Button style

Just delving into HTML and CSS, I've created a button with the following styling: .Btns { width:200px; height:75px; background-color:lightblue; color:black; font-weight:bold; ...

jquerycss

Utilizing PHP's $_POST function in conjunction with a table

Imagine a table arranged in a 4x4 grid, with all of the cells initially colored black. When you hover over a cell, it changes to grey. Now, I am looking for a way to make it so that when you click on a cell, it remains grey and its coordinates are passed ...

phphtmlcsspost

Concealing Bootstrap 3 elements on a split-screen layout

I encountered a peculiar issue with Bootstrap 3. When I resize my browser width to half the screen, there is a slight 1px threshold where both "hidden-xs" and "hidden-sm" elements become visible simultaneously. Is there a way to fix this so that only one o ...

csstwitter-bootstraptwitter-bootstrap-3

Avoid Refreshing the Page When Pressing the Like Button

I've been working on code for liking a post and saving the value to a database using server-side code. However, I'm running into some issues when the page refreshes after clicking the like button. I tried using event.preventDefault() in my JavaSc ...

javascriptphphtmlcssajax

Could it be that grid-area does not function properly with the attr function, or is this intentional?

The following examples showcase the functionality: It's impressive how I'm utilizing content: attr(class) to streamline the labeling process. Impressive! section { outline: 1px solid red; display: grid; grid-gap: 10px; grid-template-a ...

csscss-grid

How come the Hover effect is activated even without hovering the mouse over the text?

I have designed a dropdown menu, but I am facing an issue with the portfolio section. When I hover over the portfolio, the dropdown menu appears correctly. However, when I hover over the text of the first dropdown menu, all sub-dropdown menus from other dr ...

htmlcssmenuhoverdropdown

Optimizing Mobile Content Alignment in Columns Using Bootstrap

I've been tackling the challenge of creating a mobile-optimized website with the latest Bootstrap grid system. My goal is to have two columns side-by-side in medium and large screens, but stacked on top of each other in extra-small and small screens. ...

htmlcsstwitter-bootstrap

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

Yahoo! made headlines earlier this month by unveiling their new Mojito framework, set to be open sourced in 2012. I've been eager to learn more about this promising framework but haven't had any success so far. Does anyone know where I can find ...

javascripthtmlnode.jscssyahoo

Maintaining the integrity of my flexible design as the screen resolution exceeds 960px

Hey there! Currently I am utilizing the fluid layout grid system for responsive web design. I really appreciate being able to adjust the size of elements based on screen resolution using media queries, but I have a specific request. My goal is to ensure ...

cssresponsive-designmedia-queries

Maintain consistent grid proportions even when content overflows

I came across this issue: https://jsfiddle.net/w19hpqzx/ However, I'm aiming for a layout that resembles this: https://jsfiddle.net/4smwop2u/ Specifically, I'd like the yellow aside portion to stay visible on the screen and for the code block . ...

htmlcsscss-grid