Make the form to use the entire page

Scriptcase 8 Discussion
#1

Hey guys:

I’m trying to make a control form to use the entire sice of the screen. any idea on how to do so?.

Regards

#2

Go to Settings.
Table Width: 100
Table Width Unit: Percent

If you are using a menu, than the max. width to be used is determined by the width of the iframe.

jsb

#3

hey jsbinca:

Thank you for yoru answer but my problem is not “width” wise but hight.

i need the form to use the entire space available in the browser the problem im having is that if i use js code then lets say the calendar beside fields stops working.

Regards.

#4

ok i resolved it.

i had add the height as 100vh (vh is a unit supported by most browsers and 1 vh represents 1% of the available display size).

C u guys around

#5

@kafecadm
Where did you add the vh value?
Most of the time SC settings have only width configurabile so I wonder where to input that value.

#6

oh well:

in the onLoad event of the form i added code like this:


echo "
<style>
	html{ width:100%; height:100vh; }
	body{ width:100%; height:100%; }
	//form[name=F1]{ top 60px; width:100%; height:100%; }
	#div_hidden_bloco_0 { height:23px }
	#main_table_form{
		width:100%;
		height:100%;
	}
	.scFormPage{
		width:100%;
		height:100%;
	}
	#hidden_field_data_rack { height:100vh; }
	

</style>";

I analyzed the html that scriptcase generated and created a CSS according to my needs.

Hope this helps

Regards

#7

This is quite possibly the single most valuable piece of information in these forums (at least for me).

Dave

#8

;D I could of help

Regards

#9

@Sempai kafecadm I told you you are expert man, you didn’t believe me :smiley:

#10

thank you MikeDESAMACHANSEMPAI

#11

I can’t pronounce the surname but wonder what the equivalent for grids is.

#12

scriptcaser, here you go :slight_smile:

#13

[QUOTE=kafecadm;32611]oh well:

in the onLoad event of the form i added code like this:


echo "
<style>
	html{ width:100%; height:100vh; }
	body{ width:100%; height:100%; }
	//form[name=F1]{ top 60px; width:100%; height:100%; }
	#div_hidden_bloco_0 { height:23px }
	#main_table_form{
		width:100%;
		height:100%;
	}
	.scFormPage{
		width:100%;
		height:100%;
	}
	#hidden_field_data_rack { height:100vh; }
	

</style>";

I analyzed the html that scriptcase generated and created a CSS according to my needs.

Hope this helps

Regards[/QUOTE]

Just for quick understanding: each page generated by SC is coming with CSS already. Is it that any CSS you place in onLoad event overrides any CSS elements that clash with the defaults of SC (where you use same selectors?)

#14

Not quite…

Remember that you have many ways to call CSS. scriptcase uses an “include” method with makes reference to a .css file somewhere in the deploy, but if after that you type CSS code the browser will use the clases set in the html code instead of the ones in the file.

Regards

#15

Well I don’t think it’ll always use the classes set in the html, quite some time ago (when I actually had CSS lessons, they were fun) I think I learned something like the more detailed/specific the selector the higher the priority is to use that CSS.
But anyways in this case if it isn’t using the CSS you echo’d just put !important in there.

#16

yeah, important thing is for the sake of the stupidity of internet explorer
i am trying some different approach, may take a while but may change the whole way of those SC weird messages
will share it when confirmed working ok
cheers

#17

[QUOTE=MikeDE;34562]yeah, important thing is for the sake of the stupidity of internet explorer
i am trying some different approach, may take a while but may change the whole way of those SC weird messages
will share it when confirmed working ok
cheers[/QUOTE]

What do you refer to by “messages” in the context of CSS and overriding same?

#18

hi yes, hoihoi661 said about “!important” which is mainly for IE to align things up - older versions obviously

hoihoi661 knows it because idea was started earlier to make the “messages” that looks like the style of the “php session timeout message” and have it look nicer and more elegant than current once SC providing

sometimes css drives ppl crazy, and sc uses -as sempai kafecadm said- include method, add to that, if you add custom css to events it mostly works, but many other css elements come from 3rd party plugins libraries like sc_inettuts, style-min.css, default.min.css etc. are somewhere else, and they gets updated when you update your sc version

i’m still trying things, not sure yet all will work as supposed to, goal is to overcome and control CSS well along with non-theme-based libraries and yet maintain it even if sc gets updated

#19

[QUOTE=MikeDE;34566]hi yes, hoihoi661 said about “!important” which is mainly for IE to align things up - older versions obviously

hoihoi661 knows it because idea was started earlier to make the “messages” that looks like the style of the “php session timeout message” and have it look nicer and more elegant than current once SC providing

sometimes css drives ppl crazy, and sc uses -as sempai kafecadm said- include method, add to that, if you add custom css to events it mostly works, but many other css elements come from 3rd party plugins libraries like sc_inettuts, style-min.css, default.min.css etc. are somewhere else, and they gets updated when you update your sc version

i’m still trying things, not sure yet all will work as supposed to, goal is to overcome and control CSS well along with non-theme-based libraries and yet maintain it even if sc gets updated[/QUOTE]

I’m very interested in your experiments. Would love to try a lot but still coming up the learning curve of CSS. My dream is to have SC apps looking sharp and modern like something made with Ionic or KendoUI. Would that be crazy wishful thinking???

#20

Preapare yourself for a few tons of hours playing around SC =P.

jk