ElementUI: Issue with the right submenu being cut off (CSS)

I am having an issue with my top right menu in the nav bar. When I hover over it, the sub-menu appears but is cut off above the window. How can I adjust it so that the right side of the submenu aligns with the window border?

new Vue({
    el: '#app'
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>

<div id="app">
    <el-menu class="el-menu" mode="horizontal">
        <el-submenu index="4" style="float: right;">
            <template slot="title"><i class="el-icon-menu"></i></template>
            <el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
            <el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
        </el-submenu>
    </el-menu>
</div>

htmlcssvue.js

Answer №1

To adjust the menu position in the CSS, reset the left value and add right: 0

new Vue({
    el: '#app'
    });
.el-menu--horizontal .el-submenu > .el-menu {
  left: initial !important;
  right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>

<div id="app">
    <el-menu class="el-menu" mode="horizontal">
        <el-submenu index="4" style="float: right;">
            <template slot="title"><i class="el-icon-menu"></i></template>
            <el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
            <el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
        </el-submenu>
    </el-menu>
</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

JS will reach its stopping point at the specified style.zIndex

I am currently in the process of setting up button elements. I have two scripts that correspond to different types of buttons - one script runs a simple collapse menu, while the other executes a more complex collapse by shifting depths and sliding one div ...

javascripthtmlcss

SyntaxError: An unidentified item was encountered at the <head> location

I have encountered an issue while loading a PHP file that utilizes ajax. Initially, the page loads without any errors. However, upon triggering the onclick event on a button, I receive the error message "Uncaught SyntaxError: Unexpected identifier" pointin ...

javascriptphphtmlajax

What is the best way to ensure that content fills the entire screen?

My goal is to position the footer at the bottom of the page. This is the initial code I tried: <html> <head> <title>Freds Cars, Trucks & Jeeps</title> <style> #container{ height: auto; ...

htmlcss

What is the process for choosing every child (regardless of level) of a parent using jQuery?

Is there a way to unbind all elements from a parent node using jQuery? How can I effectively select all children, regardless of their nesting level, from a parent node? I attempted the following: $('#google_translate_element *').unbind('c ...

javascriptjqueryhtmldom

Choosing specific elements with Selenium using OR/AND operations in Python

I am encountering an issue while working with Selenium using Python. Here is a preliminary example of my code snippet. <body> <button info="content1" aria-label="1">"Click 1"</button> <button info ...

pythonhtmlselenium

Extract content from a label with jQuery

Snippet var $eContainer = $('<div/>', { id: "eContainer", class: 'eList' }).appendTo($injectTo); for (var i in navProps) { var np = navProps[i]; var npName = np.name; var npId = containerId + "_" + npN ...

jqueryhtml

Converting PHP arrays into visually appealing HTML tables

Having trouble writing a code to generate a table using the provided PHP array named $associative_array1 array( 'Objective' => array(0 => 'Conversions', 1 => 'Lead Generation', ), 'Gender' => array(0 =&g ...

phphtmlarraysassociative-array

Web application for iPad that integrates Google Maps for enhanced navigation

I am currently developing a prototype web app for iPad and I would like to include a Google map. I followed Google's tutorial and used the following iframe code to embed the map: <iframe width="720" height="340" frameborder="0" scrolling="no" mar ...

ioshtmliphone-web-app

Instructions on updating the form action depending on different radio button sets

Allow users to select one radio button from each of the three groups. Based on the values chosen, dynamically change the destination page for the submit button. Below is the code snippet: input[type=radio] { position: relative; visibility: hidden; ...

javascripthtml

Creating the perfect layout with CSS: A step-by-step guide

As I work on refining my layout to achieve the desired look, let me share my initial idea before delving into the issue at hand. Currently, I am attempting to create something similar to this: https://i.stack.imgur.com/rtXwm.png This is how it appears a ...

htmlcss

Sending data in chunks using Vue.js

I'm interested in sending the data in chunks. Currently, what I send to the server looks like this: for loop - 1, 2, 3. However, the server receives it asynchronously as 3, 1, 2 and I need it to be received synchronously in the order of my for loop: 1 ...

javascriptvue.jsasynchronousasync-await

Is it possible to eliminate a style that was applied using the .css() method?

Currently, I am using jQuery to modify the CSS and would like to know how to remove the styling that is being applied based on the input value provided: If the color is not '000000', then change the background-color of the body element to the sp ...

javascriptjquerycss

Navigating discreetly with invisible scroll bar

I am attempting to design a webpage where the scroll bar is hidden, but users can still scroll or click on links to navigate down the page. I have managed to hide the scroll bar, but I am facing an issue where the page jumps to 100% when scrolling. How can ...

javascriptjqueryhtmlcss

Unable to reference a file in a local directory using href in HTML

I'm attempting to create a hyperlink to a local pdf file. I have discovered that using an absolute path will open the pdf in a new tab on my site. However, when I try to use a relative path, the console shows a warning "No match found for location wit ...

htmlvue.jshref

Creative CSS Techniques: Styling Initial Capital Letters (Drop Caps) in a CSS3 Multicolumn Layout

For the past year, the multicolumn css3 property has grown in popularity among different browsers. It's a good reason to consider implementing it on your website for improved design and readability. I decided to take it a step further and incorporate ...

csslayoutmultiple-columns

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

htmlcss

Guide to dynamically add tr element using CSS to a table

While using the $.each function in jQuery, I am retrieving data and adding it to a table in the following manner: $.each(segment, function (index, innerSegment) { var tr; tr = $('<tr/>'); tr.append("<td>" + segment[i].Airline.Air ...

javascriptjqueryhtmlcss

Select every p element that comes after an h2 tag using CSS

Is there a way to select all paragraph elements that come after a specific heading? <h2 class = 'history'>History</h2> <p>this is paragraph 1</p> <p>this is paragraph 2</p> <p>this is paragraph 3</p&g ...

htmlcsscss-selectors

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...

javascriptjquerycss

What could be causing the issue with my if statement not functioning properly in JavaScript when interacting with a select box?

I'm having some trouble with my code where I am attempting to create a function that retrieves the value of a select box and adds 1 to it. However, I keep encountering errors in my code. Can someone please assist me? Essentially, I just want to increm ...

javascripthtml