René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"iOS layout issue on orientation change with Frame inside RadSideDrawer","articleBody":"### Issue Description\n\nWe want to show a main menu (fullscreen) and the user should be able to navigate inside that menu\n-\u003e RadSideDrawer with a Frame defaultPage=\"menu-page\" as drawerContent\n\nWhile everything works as expected on Android, we see a weird layout issue on iOS when the menu is opened and the device orientation changed. It is hard to explain and to understand, but fortunately I am able to make it reproducable in a sample app.\n\nSo the app structure is:\napp-root:\n```\n\u003cFrame id=\"frameRoot\" defaultPage=\"main-page\"/\u003e\n```\n\nhome-page:\n```\n\u003cPage xmlns:nsDrawer=\"nativescript-ui-sidedrawer\"\u003e\n    \u003cnsDrawer:RadSideDrawer layoutChanged=\"onLayoutChanged\"\u003e\n\n        \u003cnsDrawer:RadSideDrawer.drawerContent\u003e\n            \u003cGridLayout rows=\"*\" columns=\"*\"\u003e\n                \u003cFrame id=\"frameRadSideDrawer\" defaultPage=\"menu-page\"/\u003e\n            \u003c/GridLayout\u003e\n        \u003c/nsDrawer:RadSideDrawer.drawerContent\u003e\n\n        \u003cnsDrawer:RadSideDrawer.mainContent\u003e\n            ...\n        \u003c/nsDrawer:RadSideDrawer.mainContent\u003e\n    \u003c/nsDrawer:RadSideDrawer\u003e\n\u003c/Page\u003e\n```\n\n\nmenu-page:\n```\n\u003cPage\u003e\n    \u003cGridLayout rows=\"auto,*\"\u003e\n        ...\n        \u003cScrollView row=\"1\"\u003e\n            \u003cStackLayout padding=\"15\"\u003e\n                \u003cLabel text=\"Test 1\" marginTop=\"10\"/\u003e\n                \u003cLabel text=\"Test 2\" marginTop=\"10\"/\u003e\n                ...\n\n                \u003cStackLayout id=\"innerStackLayout\" marginTop=\"10\" backgroundColor=\"green\"\u003e\n                    \u003cLabel text=\"Test 5\"/\u003e\n                \u003c/StackLayout\u003e\n\n                \u003cLabel text=\"Test 6\" marginTop=\"10\"/\u003e\n            \u003c/StackLayout\u003e\n        \u003c/ScrollView\u003e\n    \u003c/GridLayout\u003e\n\u003c/Page\u003e\n```\n\nTo give the RadSideDrawer drawerContent the correct size after orientation changes, updating the drawerContentSize property is enough on Android, but on iOS I also have to do this in the layoutChanged event:\n```\nexport function onLayoutChanged(args) {\n  const height = args.object.getActualSize().height;\n  menuDrawer.drawerContentSize = height;\n\n  if(isIOS) {\n    const menuDrawerDefaultIOS = menuDrawer.ios.defaultSideDrawer;\n\n    menuDrawerDefaultIOS.frame = CGRectMake(\n      menuDrawer.ios.frame.origin.x,\n      menuDrawer.ios.frame.origin.y,\n      menuDrawer.ios.frame.size.width,\n      height\n    );\n  }\n}\n```\n\non iOS orientation change looks like that:\nhttps://github.com/user-attachments/assets/fa51ea11-0fa3-4de7-ae1e-ce70ba53ee03\n\nSo fore some reason, the position of the inner StackLayout (green) is positioned wrong and it is getting the wrong size (see logs below), so it is overlapping the rest of the content.\nBut only on orientation change while the drawer is open.\nWhen opening the drawer while already in landscape mode, the layout is correct. Changing to portrait mode is still correct, changing back to landscape is messing up the layout again.\n\nSome further observations:\nThe issue does NOT occur, when temporary:\n- removing the ScrollView from menu-page content\n- removing that inner StackLayout around Label 5 -\u003e all Labels are displayed correctly without overlapping\n- remove the Frame in drawer content and put the menu-page content directly (but we need Frame for navigation inside the menu in our real app)\n- use the menu page outside RadSideDrawer\n\nSo the scenario \n`RadSideDrawer drawerContent -\u003e Frame -\u003e Page -\u003e ScrollView -\u003e some inner Layout container`\nseems to break layouting somehow on orientation change\n\n\nMaybe the issue belongs more to the nativescript-ui-feedback repo but as it seems to be dead somehow, I decided to post it here.\n\nThank you for any advice!\n\n### Reproduction\n\n[ns-drawer-frame-ios.zip](https://github.com/user-attachments/files/28884930/ns-drawer-frame-ios.zip)\n\n### Relevant log output (if applicable)\n\n```shell\n------------------------------------------\n  page navigated portrait\n  inner measured 1116 61\n  inner actual size {\n    \"width\": 372,\n    \"height\": 20.333333333333332\n  }\n  inner location on screen {\n    \"x\": 15,\n    \"y\": 292.66666666666663\n  }\n  NativeScript debugger has opened inspector socket on port 18183 for org.nativescript.nsdrawerframeios.\nSuccessfully synced application org.nativescript.nsdrawerframeios on device EA9C7EBC-E7D2-4D5C-8F3A-0459BEF1A059.\n  ------------------------------------------\n  drawer opened\n  ------------------------------------------\n  orientation change landscape\n  inner measured 2160 61\n  inner actual size {\n    \"width\": 720,\n    \"height\": 203\n  }\n  inner location on screen {\n    \"x\": 77,\n    \"y\": 48\n  }\n  ------------------------------------------\n  orientation change portrait\n  inner measured 2160 61\n  inner actual size {\n    \"width\": 720,\n    \"height\": 203\n  }\n  inner location on screen {\n    \"x\": 77,\n    \"y\": 48\n  }\n  ------------------------------------------\n  drawer closed\n  ------------------------------------------\n  orientation change landscape\n  inner measured 2160 61\n  inner actual size {\n    \"width\": 720,\n    \"height\": 20.333333333333332\n  }\n  inner location on screen {\n    \"x\": 77,\n    \"y\": 230.66666666666666\n  }\n  ------------------------------------------\n  drawer opened\n  ------------------------------------------\n  orientation change portrait\n  inner measured 2160 61\n  inner actual size {\n    \"width\": 720,\n    \"height\": 20.333333333333332\n  }\n  inner location on screen {\n    \"x\": 77,\n    \"y\": 230.66666666666666\n  }\n  ------------------------------------------\n  orientation change landscape\n  inner measured 2160 61\n  inner actual size {\n    \"width\": 720,\n    \"height\": 203\n  }\n  inner location on screen {\n    \"x\": 77,\n    \"y\": 48\n  }\n  ------------------------------------------\n  drawer closed\n```\n\n### Environment\n\n\u003c!-- COPY START --\u003e\n```yaml\nOS: macOS 26.5.1\nCPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz\nShell: /bin/zsh\nnode: 24.15.0\nnpm: 11.16.0\nnativescript: 9.0.6\n\n# android\njava: 17.0.11\nndk: Not Found\napis: 35, 36, 36, 37\nbuild_tools: 34.0.0, 35.0.0, 35.0.1, 36.0.0, 36.1.0, 37.0.0\nsystem_images: \n  - android-36.1 | Google Play Intel x86_64 Atom\n  - android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom\n  - android-37.0 | 16 KB Page Size Google Play Intel x86_64 Atom\n\n# ios\nxcode: 26.5/17F42\ncocoapods: 1.16.2\npython: 2.7.18\npython3: 3.13.0\nruby: 2.6.10\nplatforms: \n  - DriverKit 25.5\n  - iOS 26.5\n  - macOS 26.5\n  - tvOS 26.5\n  - visionOS 26.5\n  - watchOS 26.5\n```\n\n### Dependencies\n\n```json\n\"dependencies\": {\n  \"@nativescript/core\": \"^9.0.20\",\n  \"nativescript-ui-sidedrawer\": \"^15.2.4\"\n},\n\"devDependencies\": {\n  \"@nativescript/android\": \"^9.0.4\",\n  \"@nativescript/ios\": \"^9.0.3\",\n  \"@nativescript/types\": \"~9.0.0\",\n  \"@nativescript/webpack\": \"^5.0.35\",\n  \"typescript\": \"~5.4.0\"\n}\n```\n\u003c!-- COPY END --\u003e\n\n### Please accept these terms\n\n- [x] I have searched the [existing issues](https://github.com/NativeScript/NativeScript/issues) as well as [StackOverflow](https://stackoverflow.com/questions/tagged/nativescript) and this has not been posted before\n- [x] This is a bug report\n- [x] I agree to follow this project's [Code of Conduct](https://github.com/NativeScript/NativeScript/blob/master/tools/notes/CONTRIBUTING.md#coc)","author":{"url":"https://github.com/felixkrautschuk","@type":"Person","name":"felixkrautschuk"},"datePublished":"2026-06-12T15:29:04.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/11265/NativeScript/issues/11265"}