Free Support Forum -

FullScreen Mode Toggle

Is there a way to display a button that will allow a user to toggle in and out of full screen when viewing a document?


Thank you for the question. Sorry but currently we don’t have such feature. But we will investigate it and if it will be possible we add it to our road map for the new product (sorry but we can’t provide a release date for it).

Thank you.

Thank you for the reply. I look forward to having this as a built in option. For now I just inserted the button after initialization of GroupDocs and attached the event myself that maximizes and restores it to its starting size.

Hello again,

Thank you for coming back. Sure we will keep you up to date.

Thank you.
-- deprecated code ----------- see below code
I think i should be get paid for this code snippet by Microsoft. :):):)

Get back to work,
Just create absolute button anywhere on your screen and attach click event shown below.
this button for invoking full screen - i haven't consider performance & correct way of implementing it -> it just a POC - so its not propery done yet

start of Javascript code
var fnExpandNCollapseClick = function () {
var flip = 0;//this doesen't mean anything
$("#ListContainerReg").toggle(flip, "slow", function () {
//After animation complete
//check if left side panel is visible
var isAva = $("#ListContainerReg").is(":visible");
if (isAva == true) {
//This is Normal Screen
//restore container div postions for GropDocs
var vLeftLstWdth = $("#ListContainerReg").width() + 9; //its just adjustment for pages of grop docs (inner white section)
$("#MainContainerReg").attr("style", "float: left;background-color:#fff;position: relative;width: calc(100% - " + vLeftLstWdth + "px);");

//apply classess for full-screen-button
$("#aLftRightArrow").find("i").attr("class", "fa fa-arrows-alt");
$("#aLftRightArrow").attr("title", "Full screen");
else {
//This is Full Screen
//apply container div position classes for GropDocs
var vLeftLstWdth = 9;//its just adjustment for pages of grop docs (inner white section)
$("#MainContainerReg").attr("style", "float: left;background-color:#fff; width: calc(100% - " + vLeftLstWdth + "px);position: absolute;top: -174px;left: 0;height: calc(100% + 182px);border:1px solid #c4c4c4;");

//apply classess for restore-screen-button
$("#aLftRightArrow").find("i").attr("class", "fa fa-arrows-inwards-alt");
$("#aLftRightArrow").attr("title", "Exit full screen");
#MainContainerReg: this is div containing GropDocs control/tool whatever
#ListContainerReg: this is left side portion of my site. (its just does trick to give me correct way or time when to show or hide full screen.. you may think better than this... like using some dummy div to toggle)
(Note: this code works for my POC & its not tested yet, i mean for screen resolution and all that, but it works, you please check this out.)


Thank you for your code example. We will check it. Also could you please share with us version of the GroupDocs.Viewer that you use.

Best regards.