0

I've deployed application page to the site collection and it is used in one modal dialog. Everything works fine, except CSS seems little bit silly.

I'm quite sure CSS file is loaded and it even changes site to some extend. However, for the most part I can't do anything.

Part of application page

In the above image, there are two CSS rules which should be applied

  • background color black on body
  • removed border from buttons

CSS itself looks like

body
{
    background-color:black;
}

input[type=button] {
    border:none;
}

while .aspx page

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <link id="css01" href="GenerateReport.css" runat="server" type="text/css" rel="stylesheet"/>
</asp:Content>



       <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
(...)
        <asp:Button ID="ButtonSendEmail" runat="server" Text="Send Email" />
        <asp:Button ID="ButtonClose" runat="server" Text="Close" /><br />
</asp:Content>

Above is just an example - it literally doesn't work with anything outside body selector. I tried to include the CSS in the .aspx itself but with no help.

EDIT:

The application page is used to present information which is fetched from several lists and it is (page) presented to end-user in Modal Dialog.

I have event receiver which updates targeted list with the following XML definitions (via C# class)

 customButton.Location = "CommandUI.Ribbon.ListView";
                customButton.Title = "Test Custom Button";
                customButton.Sequence = 5;
                customButton.Rights = SPBasePermissions.EditListItems;
                customButton.CommandUIExtension = @"<CommandUIExtension>
                        <CommandUIDefinitions>
                        <CommandUIDefinition Location=""Ribbon.ListItem.Actions.Controls._children"">
                        <Button
                        Id=""Ribbon.ListItem.Actions.Controls.ShowHelloWorldButton""
                        Alt=""Programmatically Added Button""
                        Sequence=""5""
                        Command=""GenerateCandiateReportFunction""
                        Image32by32=""https://mysite/SiteAssets/Report32.png""
                        Image16by16=""https:/mysite/SiteAssets/Report32.png""
                        LabelText=""Generate Report""
                        TemplateAlias=""o1"" />
                        </CommandUIDefinition>
                        </CommandUIDefinitions>
                        <CommandUIHandlers>
                        <CommandUIHandler
                        Command=""GenerateReportFunction""
                        CommandAction=""javascript:
                        var ctx = SP.ClientContext.get_current();
                        var item = SP.ListOperation.Selection.getSelectedItems(ctx);
                        var options = SP.UI.$create_DialogOptions();
                        options.width = 800;options.height = 900;
                        options.resizable = 1;options.scroll = 1;
                        options.url = '{SiteUrl}/_layouts/GenerateReport.aspx?itemId=' + item[0].id;
                        SP.UI.ModalDialog.showModalDialog(options);""
                        EnabledScript=""javascript:SP.ListOperation.Selection.getSelectedItems().length == 1;""
                        />
                        </CommandUIHandlers> 
                        </CommandUIExtension>";
                customButton.Update();

The entry point of the application page looks like this (well, in reality Page_Loads calls 3 methods, but for simplicity sake, I just slapped code from methods back to the caller method and GetItems just gets the item back and fills Labels with values from item)

public partial class GenerateReport : LayoutsPageBase
{
    SPContext spContext = null;
    protected void Page_Load(object sender, EventArgs e)
    {
        LblNotifictions.Text = string.Empty;
        ButtonClose.Click += new EventHandler(this.CloseModelDialog);
        ButtonSendEmail.Click += new EventHandler(this.SendMail);
        if (Request.QueryString["itemId"] != null)
        {
            string itemId = Request.QueryString["itemId"];
            this.Title = "Generate Report #" + itemId;
            spContext = SPContext.Current;
            if (spContext != null)
            {
                GetItem(itemId);
            }
        }

    }
}

Full HTML part of .aspx

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=(removed)" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=(removed)" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=(removed)" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=(removed)" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GenerateReport.aspx.cs" Inherits="(removed)" DynamicMasterPageFile="~masterurl/default.master" %>



<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <link id="css01" href="GenerateReport.css" runat="server" type="text/css" rel="stylesheet"/>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <asp:CheckBox ID="ChckBox1" runat="server" Checked="true" /><label ID="Lbl1" runat="server"></label><br />
    <asp:CheckBox ID="ChckBox2" runat="server" Checked="true" /><label ID="Lbl2" runat="server"></label><br />
    <asp:CheckBox ID="ChckBox3" runat="server" Checked="true" /><label ID="Lbl3" runat="server"></label><br />
    <asp:CheckBox ID="ChckBox4" runat="server" Checked="true" /><label ID="Lbl4" runat="server"></label><br />
    <asp:CheckBox ID="ChckBox5" runat="server" Checked="true" /><label ID="Lbl5" runat="server"></label><br />

    <asp:Button ID="ButtonSendEmail" runat="server" Text="Send Email" />
    <asp:Button ID="ButtonClose" runat="server" Text="Close" /><br />
    <asp:Label ID="LblNotifictions" runat="server"></asp:Label>
</asp:Content>

<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Generate Report
</asp:Content>
  • Using Browser Tool make sure the CSS file is loaded. – Amal Hashim Jan 28 '15 at 13:05
  • @AmalHashim it's loaded. Also as you can see, it does something to "body". Well, at least below buttons. – StupidOne Jan 28 '15 at 13:06
0

Adding following CSS to the aspx page. The page which will get displayed inside the dialog.

<style>
#s4-workspace {
    background-color:black;
}
input[type=button] {
    border:none;
}
</style>
  • No effect. I'm not sure did we understand. I'm not trying to display page inside dialog, just apply any kind of CSS rules to it. My guess is that for some reason none rules are applied inside PlaceHolderMain page's section – StupidOne Jan 28 '15 at 13:14
  • Your question states "deployed an application page, which is used in a dialog". Can you paste a bit more code of the application page? – Amal Hashim Jan 28 '15 at 13:16
  • Yes, I deployed application page and it is presented to end-user inside Modal Dialog when he clicks button on the list. That part works great. Let me edit my question – StupidOne Jan 28 '15 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.