modal popup disable scrollbars

[laoneo]

hi
i'm developing a component which opens a modal window by clicking on a link.... the generated a tag is here:

Code: Select all

<a class="modal" title="more then one day" rel="{handler: 'iframe', size: {x: 680, y: 620}}" href="xxxxxxx/?tmpl=component">more then one day</a>

so the problem is that the modal window has always scrollbars...how can i hide them?? i tryed

Code: Select all

<a class="modal" title="more then one day" rel="{handler: 'iframe', size: {x: 680, y: 620},scrollbars:no}" href="xxxxxxx/?tmpl=component">more then one day</a>

which gave an error

also

Code: Select all

<a class="modal" title="more then one day" rel="{handler: 'iframe', size: {x: 680, y: 620},scrollbars:0}" href="xxxxxxx/?tmpl=component">more then one day</a>

had no effect..

i would really appreciate a solution because it's ugly

greets allon

[radiant_tech]

If you set the frame size correctly, scrollbars will not be included.

[laoneo]

i thought the same till i implemented it on my site here is the link where you can see it, click on any event in the calendar you want every one is loaded with a scroll bar.

http://gcalendar.allon.ch/demo_1_5/gcal ... 2-3-4.html

do i miss something??

thanks for your help
allon

[radiant_tech]

Could it be that you are having a conflict with a function in one of the other js files that are being loaded after modal.js?

I mention this because I've never seen a modal popup box have more than one set of scrollbars.

[laoneo]

the problem with the two scrollbars is that in the iframe a second iframe is loaded. but for the second it is ok when a scrollbar is shown. just the first scrollbar is shown all the time and this is the problem..... i'm pretty sure that the other javascript libraries do not interfere the modal.js...
any more suggestions? does somebody have modal function used as well which works correct??

thanks allon

[radiant_tech]

the problem with the two scrollbars is that in the iframe a second iframe is loaded.

Ah ... and that is really the source of your problem. You must be able to ensure that the first iframe (which you create with your code as given above) is larger than the second in order to prevent the scrollbars.

[laoneo]

that's the case. the inner iframe is smaller than the outher. i tested it by just returning a string in the iframe instead of the inner iframe. the scrollbars were still there....

any more ideas

[ixiel]

have you found a solution for this problem? i'm also trying to disable the scroller.

[laoneo]

not yet!! I still have this issue open...

[jagtorre]

sorry for bumping this thread. But I really need the fix. Can someone help us?

I tried to insert overflow hidden in the head section but it only affect Firefox.
Scrollbar still showing up in CHROME AND IE

Code: Select all

.iframe {overflow: hidden; !important;}

Below is the original code of modal.js

Code: Select all

},
		'iframe': function(url) {
			return new Element('iframe', {
				'src': url,
				'frameBorder': 0,
				'width': this.options.size.x,
				'height': this.options.size.y
			});
		},
		'string': function(str) {
			return str;
		}
	},

I replace the code with this to add scrolling properties but its not working

Code: Select all

},
		'iframe': function(url) {
			return new Element('iframe', {
				'src': url,
				'frameBorder': 0,
                                'scrolling': no,
			        'width': this.options.size.x,
				'height': this.options.size.y
			});
		},
		'string': function(str) {
			return str;
		}
	},

[agap3]

I did eventually find out how to manage this.

Using your solution by adding to modal.js, instead of 'scrolling': no, use 'scrolling': "no",

I.e. quotation marks around the no. It works!

[KanAfghan]

You are closed. Try this:

Code: Select all

<a class="modal" 
href="/eclipse/com.joomla.dev.xpleo/index.php/emner?view=opinion&layout=modal&tmpl=component&topicId=1" 
rel="{handler: 'iframe', size: {x:650, y:200}, iframeOptions: {scrolling: 'no'}}">
Giv din mening
</a>