Hi Guys,
I’m enjoying the learning curve…
I am playing wit the sample ( javascript ) responsiveRotation
I have attached the app with some stuff added.
I cannot get Container1 to resize the height.
Can anyone see what I am doing wrong ?
Cheers
Steve WarbyresponsiveRotation.nsx (40.4 KB)
Sorry guys I found it.
I had some CSS set to height 150px.
Is it possible to calculate the height needed for Container1 to accommodate the buttons and labels on the resize ?
Cheers
Steve Warby
For a responsive layout, you shouldn’t be calculating heights. The height of the Container should be auto, and grow to include the contents.
If you turn on enableAppScroll in Project Properties, your form can be longer than the screen and will scroll to the hidden parts.
I have created an app where I toggle a button’s hidden value and expect the container to auto shrink / expand. ( Attached).
I have done this before and the hidden value works.
The app I have created does not hide the buttons. The only difference is it is using bootstrap components.
testHideButtonsAndResponsiveContainers.nsx (27.3 KB)
Cheers
Steve Warby
I have just added some jQuery buttons and these do hide.
I have added DataTable and DataTable1.hidden = true only hides the table and not the paging / search.
I recreated it with container & Jquery buttons and the container does expand.
Do you have Bootstrap and jQuery Mobile controls in the same project? jQuery Mobile does not play well with others: it will mess up the formatting of non-jQuery Mobile controls.
I did 2 separate apps The jQuery one works i.e. the hide toggle and auto resize of the container.
The bootstrap ( the route I am taking ) does not hide the buttons so can’t test.
Try the attached project above to test.
Cheers
Steve Warby
The attached project gets an error when it is run. Is that the problem you are having?
Sorry must have sent the wrong app.
NO errors showing and the hidden fails.
The app runs without error this time. I see a screen with 6 buttons.
What’s wrong? What should I be looking at?
Hi,
www.toolfolks.com/testHideButtonsAndResponsiveContainers
You can see from the project that the bootStrap buttons dont hide where the JQM do hide.
Also the dataTable hides the grid but the search / paging etc dosen’t
Start app.
Click Hide BS (btn2 + btn6) & JQM (Button2);
This should hide btn2 & btn6 & Button2
btn2 & btn6 dont hide (BS controls)
Button2 hides.
refresh app
Click Hide Button2(JQM) & DataTable1(BS)
Button2 hides. (JQM)
DataTable1 hides the grid but not the search / paging etc
Cheers
Steve Warby
This project mixes jQuery Mobile and Bootstrap in the same app. Don’t do that.
I did that to show that the other stuff works. If I just do bootstrap the hidden still doesn’t work
If you make me a project with just Bootstrap, which shows the problem, I’ll have a look at it.
Updated with no jQuery components
testHideButtonsAndResponsiveContainers.nsx (27.8 KB)
Cheers
Steve Warby
Aha!
Not all controls allow you to hide using hidden = true.
Do this instead:
btn2.style.display = 'none';
Cheers for that.
The containers also work as expected. i.e. the expand and shrink when the components are hidden…
On the dataTable it does not hide the search / info & paging sections.
Cheers
Steve Warby
You’ll need to put the DataTable in a Container and hide that.
Cheers
That works a treat