What is the best way to align the last two items at the bottom of the screen?

Incorporating kendo controls and aiming to align the split button and button at the bottom of the div, I'm encountering difficulties achieving this. How can I eliminate the top gap?

Even with attempts like setting margin-top and padding-top as 0, the issue persists.

<div class="row" style="padding-top:10px; margin-top:0px; margin-right:0px; padding-bottom:0px">
                <div class="col-md-8" style="padding-left:0px; border:dashed">
                    <label>Graphs per row:</label>
                    @Html.TextBox("txtGraphsPerRow", "4", new { @class = "k-textbox", @style = "width:25px" })
                </div>
                <div style="float:right; border:dashed;"  >
                    <ul id="myMenu">
                        <li onclick="" class="defaultItem" data-action="1">Print Graphs</li>
                        <li class="emptyItem">
                            <span class="empty">&nbsp;</span>
                            <ul>
                                <li>Print All Students in List</li>
                                <li>Include School Logo</li>
                                <li>Include School Photo</li>
                                <li>
                                    Page Orientation
                                    <ul>
                                        <li>Portrait</li>
                                        <li>Landscape</li>
                                    </ul>
                                </li>
                                <li>
                                    Page Size
                                    <ul>
                                        <li>A4</li>
                                        <li>A3</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <button id="btnCloseGraph">Close</button>
                </div>
            </div>

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

Answer №1

Assign the CSS property vertical-align:top to the elements with the IDs of myMenu and btnCloseGraph.

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

Customizing Material UI: Grouping Tab components within a div container

How can I wrap the children of a Material UI Tabs component in divs? <Tabs value={value} indicatorColor="primary" textColor="primary" onChange={handleChange} > <div> <Tab label="x" /> ...

Make the div block fill the entire body by setting its width to 100%

I am attempting to make the center block (which has a grey background) expand to the edges of the browser. By utilizing the code below, I have been successful in achieving this: #aboutBlock { background: #f2f2f1; position:absolute; left:0; ...

Guide on using an image as a background in a <svg> element with React.js

I am facing an issue with filling an SVG path with a background image. I have tried various methods found on Google, but none seem to work as expected. Here is the code snippet I have been working with: <div className="intro"> ...

What is the best way to incorporate web components into a React Js project?

I am currently unfamiliar with web components. My main goal is to integrate Google Material Components into my React.js project. Google Material Web Component can be found here: https://github.com/material-components/material-components-web Is there a ...

How can I send a JSON array using jQuery's .post method?

After numerous attempts to work with json, I am now faced with a new challenge - How can I post this specific json array: [{"success":true,"filename":"agard.jpg"}] using jquery.post, $.post("process.php", json ,function(xml){ }); So that I can retriev ...

verifying the presence of offspring in knockout js

Utilizing knockout for displaying items on the page, I have a series of groups such as Group 1, Group 2, etc. Each group is contained within its own div. Upon clicking on a group, it expands to showcase the items within that specific group. However, some o ...

Integrating Third-Party Scripts into a Single Magento Page

Despite my efforts to research, I still feel like I'm missing a key piece of information. On my photo gallery page, I am utilizing fancybox to display larger versions of the images when clicked. To make this work, I need to include two scripts for fa ...

The page background appears to be incomplete in its coloring

As I work on creating a web application for personal use, my goal is to ensure it is mobile-friendly. However, I've encountered an issue where the background of my language page isn't displaying in full blue color as intended. Despite trying diff ...

I recently created a Python3 script utilizing selenium to automate message sending, but unfortunately, it is not functioning as expected

I've written a script (https://pastebin.com/dWLFvirn) that I'm trying to run through the terminal, but it's giving me an error. Here's a screenshot of the error (https://ibb.co/NSfLgL8). I would like to use "" as the link to make the s ...

Guide to making a dropdown menu that pulls information from a text box and displays the location within the text

I'm currently working on a unique dropdown feature that functions like a regular text field, displaying the text position. To achieve this, I've constructed a hidden dropdown menu positioned beneath the text field. My goal is to develop a jQuery ...

Unable to display modal pop-up in ASP.NET Core MVC web application

I have developed a web application using ASP.NET CORE MVC. I encountered an unusual issue while trying to display a modal popup using JQuery. The div structure I am working with is as follows: <div class="modal fade" tabindex="-1" r ...

Issue with background opacity not functioning properly in Internet Explorer 8

I am facing an issue with displaying 2 images in IE8 and IE9. Below is the code snippet causing the problem: .ui-widget-content { border: 0px solid #aaaaaa/*{borderColorContent}*/; background: rgba(0, 0, 0, 0.1) ; /*{bgColorContent}*/ url(images ...

Click event for nested attributes in Angular 6 using JQuery is unresponsive

I'm having trouble getting a click listener to work in jQuery. It seems like nested attributes created in HTML are not being recognized by jQuery when trying to add the listener. I attempted to add a listener in the ngOnInit() method, but it doesn&ap ...

The content displayed in the PrimeNG p-table is limited to only the table name with no additional information

After upgrading Angular to version 9, I switched from p-dataTable to p-table in PrimeNG. With a table named users, I intended to display them on the screen upon rendering the view using the following HTML: users = ['one','two','thr ...

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Encountering a peculiar mystery issue here... I have created a button on a webpage that triggers a form submission. The form is enclosed within a DIV, which dynamically updates to display the modified data. (this is embedded in a smarty template) form: ...

Creating a single Vuetify expansion panel: A step-by-step guide

Is there a way to modify the Vuetify expansion panel so that only one panel can be open at a time? Currently, all panels can be closed which is causing issues. I would like the last opened panel to remain open. I also want to prevent closing the currently ...

Blurring the edges of a div container

I have successfully faded the top of a div, but I am struggling to achieve the same effect for the bottom. I attempted to reverse the CSS properties used for fading the top, but it does not seem to be working as expected. HTML: <div class="container-c ...

I'm having trouble extracting text from the HTML code for an unknown reason

My code seems to be working well until I attempt to use the .text function, resulting in an error message stating "list' object has no attribute 'text". Interestingly, when I apply .text to a single element within the same list, it works without ...

hover-triggered keyframe animation

Recently, I've been experimenting with CSS keyframe animation using the code below: .pulse-animation { margin: 50px; display: block; width: 52px; height: 52px; border-radius: 50%; background: #ff8717; cursor: pointer; animation: pul ...

Implementing AJAX to dynamically update information based on user's selection from a dropdown

I need to dynamically adjust the opacity of my graph bars without requiring the user to manually refresh the page. I'm considering using AJAX for this purpose. How can I implement this functionality? const opacitySlider = document.getEle ...