Position of the button within a scrolling panel

Can someone assist me with a button positioning issue within a scrollable panel? Please check out the code snippet on jsfiddle`` http://jsfiddle.net/0qy7L0zz/3/ 

<div id="New" class="modalPopup">
<p>dfssfddfdfdfsdfdf</p>
<p>ddfssssssssssss</p>
<p>dsfffffffffff</p>
<p>sdffffffffffff</p>
<p>dsffffffffff</p>
<p>dsfffffffffff</p>
<p>sdfffffffffffff</p>
<p>dsfffffffffff</p>
<p>dfsssssssssss</p>
<button id="New" class="btnClose">ClickME</button>

I'm facing an issue where the button is not positioned correctly at the bottom right of the panel. The desired placement is in the bottom-right corner regardless of the height of the panel.

jquerycssasp.netbuttonpanel

Answer №1

Here is a suggestion:

.btnClose {
   position: absolute;
   right: 0;
}

Check out this JSFiddle for reference!

Just to clarify, you want it inside the scrolling .modalPopup, correct?

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

Is MVC suitable for a one-page application?

Although I have been diligently studying MVC materials for the past few days, I still feel unsure about using it in my upcoming web project. My goal is to create a single-page website that will interact with an existing database by displaying and editing d ...

c#asp.netasp.net-mvcrazor

Extensions for ASP.Net web application

Currently, I am working on a web application that is being developed in C# using the ASP.NET MVC framework. An important goal of mine is to provide clients with the ability to create their own plugins for this web application, with each client having its ...

c#asp.netasp.net-mvcwebplugins

Tips for attaching my navigation bar to the top of the webpage

Can anyone assist me in fixing the top portion of my webpage so that it stays in place? I attempted to use the position:fixed attribute, but this caused issues as my content started overlapping with the fixed divs. You can find my website here: www.croo ...

csslayoutcss-position

Sending a 2-dimensional array from JavaScript to the server using AJAX

My JavaScript code involves working with a 2D array. var erg = new Array(); for (var i in val) { erg[i] = new Array(); for (var j in val[i]()) { erg[i][j] = val[i]()[j](); } } However, I encountered an issue where only the 1D array ...

javascriptajaxjqueryasp.net-ajax

Exploring an illustration of Bootstrap

As a newcomer to html and css, I am currently working on building a website using the following example template: http://getbootstrap.com/docs/4.1/examples/dashboard/. My issue is that when I zoom in by pressing cmd + '+' or Ctrl + '+', ...

cssbootstrap-4

'account name' is not recognized in its current environment

The identifier is located within the ItemTemplate but it seems to be missing from the code file. <form id="form1" runat="server"> <asp:SqlDataSource ID="searchresults" runat="server" ConnectionString='<%$ Connec ...

c#asp.net

What is the method for retrieving the value of a checkbox when clicked?

Managing a dynamically created HTML table with checkbox values can be tricky, especially when the value needs to reflect changes in real-time. If you are struggling to update the status of the checkboxes based on database values and pass that information t ...

phpjqueryhtml

Exploring the process of setting a background image within a div tag

My goal was to design a clickable box that would redirect users to "#". I initially thought about using area maps within div or p tags, but unfortunately that wouldn't work. Does anyone have any suggestions for alternative solutions? ...

htmlcssarea

What is the snapping feature of the jQuery Mobile slider?

I've been diving into various sources for the past couple of hours, attempting to implement code snippets claiming to enable snapping functionality on a slider component. I'm facing doubts about the feasibility of achieving this with the jQuery M ...

javascriptjqueryjquery-mobilejquery-slider

Having trouble retrieving data submitted in an ASP.NET MVC Form

Here are the snippets of my code: ManageClass.cshtml: @{ ViewData["Title"] = "Class' Management"; } <br /> <h2>Add Class</h2> <form method="post" asp-controller="AddClassDB" asp-actio ...

c#asp.net.netasp.net-mvcmodel-view-controller

What is the best way to center my error message in Simple_form for Ruby on Rails?

Currently, my form is displaying an error message (Name is a required field) in this format: However, I want to position the 'can't be blank' error next to the 'Name', like so: To achieve this layout, I made modifications to the ...

cssruby-on-railstwitter-bootstrapsimple-form

Pause until the existence of document.body is confirmed

Recently, I developed a Chrome extension that runs before the page fully loads by setting the attribute "run_at": "document_start". One issue I encountered is that I need to insert a div tag into the body of the webpage as soon as it is created. However, a ...

javascripthtmlcssevent-handlingdom-events

What is the technique for linking to a different WordPress PHP file using a href?

I have a question regarding working with WordPress. I am using Stacks, a blank theme to convert an HTML template to WordPress. I need to create a hyperlink or button on a landing page that redirects to another PHP file within my website directory (e.g., lo ...

phphtmlcsswordpresswordpress-theming

The CSS :not selector does not work as intended

My goal is to assign the class no-color to a specific tag. When JavaScript is enabled, I want this class to be removed and the text to be colorized. However, my current CSS solution is not working as expected. Below is a sample code snippet demonstrating t ...

htmlcsssass

There are currently no printers set up in the server system

The printer in the server system is not functioning properly and is displaying an error message. System.Drawing.Printing.InvalidPrinterException: No printers are installed on the server system. public void print() { SC.Open(); SqlCommand cmd ...

c#asp.net

Two flex boxes displayed next to each other on the screen

Within the .maroon section, there are two .whitewrap sections. I am puzzled as to why they are not wrapping onto another line and instead displaying side by side. The form should be positioned below the text and graphic with some maroon showing in between. ...

htmlcssflexboxword-wrap

The CheckBoxList.Selected property keeps reverting back to a False value

I'm dealing with an issue on my page involving a CheckBoxList that seems to be misbehaving. The goal is for the database table to be cleared of all rows associated with a specific user upon clicking the submit button, and then new rows should be inse ...

asp.netvb.netcheckboxlist

Discovering digits within a given text using a specific pattern and modifying them using JavaScript

I have a series of text inputs containing numbers with a specific pattern throughout the text. I would like to identify all numbers with this pattern, recalculate them, and replace them in the text. .... val="2xf" ......... vc="2.6xf" ...... value= ...

javascriptjqueryregexpattern-matchingpreg-match

Traverse an array in JavaScript using jQuery, PHP, and AJAX

Trying to iterate through a JavaScript object using AJAX has led me to explore options like json_decode, but it turns out this is an array and not an object. var array = [{type: 'a', value: 1}, {type: 'b', value: 1}] $.ajax{ url: "p ...

javascriptphpjqueryajax

Error occurred while setting up the alias for a column in the SQL query

I am encountering an error with my SQL query and I'm not sure what it means. Could it be that I am defining the alias for a column in the wrong way? Please help me troubleshoot this issue. The error message I am receiving is related to the SELECT clau ...

asp.net