Dialog CSS

[Wilson]

Hi Alex,
Is it possible apply custom JS or CSS based on whether or not a form is opened in Dialog mode?

Thanks,
Bob

[Alexander Bautz]

I’m not sure you can use css directly, but js is no problem. Add this to your Custom JS to run code only in a dialog:

if(GetUrlKeyValue("IsDlg") === "1"){
	alert("Is in a dialog");
}

What is it you want to style differently?

Alexander

[Wilson]

Hi Alex,
Sorry for the delay, was pulled in a different direction for bit.. 🙂

The reason is this…and maybe you have a better approach….

When a “NewForm.aspx” is used in a full window scenario (ie New button on list view) I style the form with CSS to be center position and no left hand navigation. When the form is called in a popup scenario, it is then shifted right and you need to use the scroll bar, not ideal.

If I remove CSS to hide left navigation, then it looks great in popup scenarios, but then not centered when in full screen scenario.

Any thoughts?
Thanks,
Bob

Attachments:

1. 

   cssdialog1.png
   

2. 

   cssdialog2.png
   

[Wilson]

Alex,
I was able to leverage this from the forums and it seems to meet my requirements! 🙂 If you think there is better approach, please let me know, otherwise Great job again!

if(GetUrlKeyValue(“IsDlg”) !== “1”){
cssBuffer.push(“#sideNavBox {DISPLAY: none}”)
cssBuffer.push(“#sideNavBox {WIDTH: 0px!important;}”)
cssBuffer.push(“#contentBox {MARGIN-LEFT: auto!important;}”)
cssBuffer.push(“#contentBox {MARGIN-RIGHT: auto!important;}”)
cssBuffer.push(“#contentBox {WIDTH: 500px!important;}”)
$(“body”).append(“<style type=’text/css’>”+cssBuffer.join(“”)+”</style>”);
}

Thanks again
-Bob

[Alexander Bautz]

This looks good – I’m glad you figured it out.

Alexander

[Author]

Posts