Inaccurate sizing of popup dialogs on SharePoint 2010

Currently, I am in the process of revamping a SharePoint 2007 web application to SharePoint 2010.

I was surprised to find that the popup dialog boxes for new items, edit, etc. have inline styles for fixed width and height. Below is an example where div.ms-dlgContent, .ms-dlgBorder, .ms-dlgTitle, and iframe.ms-dlgFrame all have fixed widths set inline.

<div class="ms-dlgContent" role="dialog" aria-labelledby="dialogTitleSpan" tabindex="-1" style="z-index: 1505; display: block; width: 502px; height: 518px; left: 699.5px; top: 10px;">
  <div class="ms-dlgBorder" style="width: 500px; height: 516px;">
    <div class="ms-dlgTitle" style="width: 500px;">...</div>
    <div class="ms-dlgFrameContainer">
      <iframe id="GUID" class="ms-dlgFrame" src="/_layouts/listform.aspx?ListId=GUID" frameborder="0" style="width: 500px; height=484px;">...</iframe>
    </div>
  </div>
</div>

In the browser developer tools, I can manipulate the divs and iframe with jQuery:

$('.ms-dlgContent').css('width','');
$('.ms-dlgBorder').css('width','');
$('.ms-dlgTitle').css('width','');
$('.ms-dlgFrame').width('');

However, correcting the issue this way may not be the most appropriate method. I should focus on getting SharePoint 2010 to correctly size the dialog when it opens.

Since the styles are inline, trying to override them with my custom CSS file will not be effective.

I attempted putting the jQuery in my master page and updating the listform.aspx page with document.ready(...) but as expected, neither approach worked.

If anyone could assist me in either properly sizing the popup dialog using CSS (preferable) or advising where I should place my jQuery code to resize the popup dialog, I would greatly appreciate it.

Thank you in advance.

jquerycsssharepointsharepoint-2010

Answer №1

To override the default CSS style, we have the option to use CSS !important. Below is an example of how you can customize the style:

<style type="text/css">
.ms-dlgContent{
    width:800px !important;
    height:500px !important;
    top:120px !important;
}
.ms-dlgBorder{
    width:800px !important;
    height:500px !important;
}
.ms-dlgTitle{
    width:800px !important;
}
.ms-dlgFrameContainer{
    width:800px !important;
    height:500px !important;
}
.ms-dlgFrame{
    width:800px !important;
    height:497px !important;
}
</style>

If you prefer not to use the default popup dialog in a list, you can navigate to List Settings->Advanced Settings and adjust the setting for "Launch forms in a dialog?" to "No".

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

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

What is the method for showing the comment associated with a particular row that I wish to modify?

A commenting system is being implemented using jQuery, Ajax, PHP, MySQL, and HTML. There seems to be an issue where clicking the Edit button displays the comment of the first row in the MySQL table instead of the selected row. However, after editing, it do ...

phpjqueryhtmlmysqlajax

Struggling with Implementing Modals in Bootstrap 3.3.7

I've been encountering an issue with modal functionality. In order to troubleshoot my own modals, I decided to replicate the modal example code from Bootstrap's website into a new HTML file. Despite linking to the CDN, the modal does not functio ...

htmlcsstwitter-bootstrap

Tips for enabling scrolling on mobile devices

Hello there, I'm facing an issue with scrolling on my website when viewed on mobile devices. Even though I have set the div height to 100%, it appears as 'auto' on mobile screens. As a result, when the text exceeds the screen height, it bec ...

cssresponsive-design

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

javascriptjqueryhtmlcss

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>" dir="ltr"> <?php echo $this->getChildHtml('head') ?> <bod ...

jqueryhtmlcssmagento

Retrieve metadata using the jQuery $.post() method

I've been working on extracting meta tag information using the following code snippet. $(pageDetailsSecond).('head').find('meta[name="description"]').attr("content"); I also attempted this approach: $(pageDetailsSecond).('m ...

jquerypost

When I refresh the content in a DIV, the ROR code doesn't get executed

Hello, I need some assistance with Ajax. I have tried various solutions to this issue, but none of them seem to work. Whenever I attempt to update the content of a DIV using ROR code, it displays the code itself instead of the desired result. I've tr ...

jqueryruby-on-railsajaxrender

What is the best way to extract parameters from a JSON object?

Here is the complete code: $.post('test.php', { id: id },function (data) { console.log(data); var Server = data.response.server; var Photo = data.response.photo; console.log(Server); console.log(Photo); }); When I receive data I get JSON data ...

javascriptjqueryjson

Is there a way to determine in jQuery's $.ajax callback 'complete' whether a request was successful?

Within my ajax complete callback, I have large code blocks where I need to verify the success of an ajax request: $.ajax(function() { url: 'http://hostname.com', data: myData, dataType: 'json', complete: function(data) ...

jqueryajax

The results of the jQuery selector appear differently in the browser console compared to PhantomJS

What could be causing the discrepancy in results when using the same jQuery selector? Visit this website for reference: See below code involving node.js and phantomjs-node(bridge): phantom.create(function(ph){ ph.createPage(function(page){ p ...

javascriptjquerynode.jsphantomjs

Adjusting color with the .on method in Event Listener

What's wrong with this code? html <!DOCTYPE html> <html> <head> <title>Ending Project</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> &l ...

javascripthtmljqueryjquery-events

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

htmlcss

Pass a value from PHP to $.get function

Looking to enhance the user experience on my website, I am currently in the process of updating my form submission method from form action to ajax. The code is functioning correctly and the server side is able to update the database. However, I am facing a ...

phpjqueryajax

Having trouble fetching JSON on the server (NodeJs) as I keep receiving the error "Unexpected Token U in position 0"

I have gone through several posts on dealing with sending and retrieving JSON using NodeJs and Express, but I am still struggling to make it work. Someone mentioned that the issue might be due to invalid JSON. var arr = { City: 'someplace', Coun ...

jqueryjsonajaxnode.js

Alternative background for browsers that do not have support for border-image styling

I am experimenting with CSS3 border-image to create a simple button design: the left slice of the image is intended to be the left border of the text, the right slice as the right border, and the middle slice should either repeat or stretch as a background ...

fallbackcss

Troublesome Suckerfish CSS Navigation Menus failing to function properly on IE7

Feeling completely exasperated, I am encountering issues with aligning the drop downs under the parent item in IE7. Despite functioning properly in all other browsers, including IE8, the drop down menu is not lining up correctly in IE7. In IE7, the drop d ...

cssinternet-explorer-7suckerfish

The issue of an unsuccessful Ajax call arises in a WordPress plugin when utilizing wp_remote_get

Encountering difficulties with the wp_remote_get function in my Wordpress plugin. The objective is to invoke a method within my primary public class using ajax. However, every time I attempt to make the call with the wp_remote_get function, it fails. This ...

javascriptphpjqueryajaxwordpress

When exporting Datatable to Excel in PHP, zero values are displaying incorrectly

When exporting an excel sheet from a datatable using plugins, all values are coming through correctly except for zero (0) values. Here is the code snippet for the datatable: $('#example').DataTable({ //"scrollY": 300, ...

phpjqueryexceldatatable

JavaScript onclick event on an image element

I have a JavaScript function that shows images using CSS styles. <script type="text/javascript"> $(function () { $("div[style]").click(function() { $("#full-wrap-new").css("background-image", $(this).css("background-image")); }); }); ...

javascriptjquery

Issue with file upload in jQuery form plugin leads to Uncaught TypeError

When I don't select a file for upload and only fill in the other inputs before posting the form, everything works fine. However, if I choose a file for image upload and then try to post it, I receive an error message. Interestingly, when I check the f ...

jqueryfile-uploadjquery-forms-plugin