diff --git a/examples/falling_balls_with_web/build.gradle.kts b/examples/falling_balls_with_web/build.gradle.kts
index 7636428ab3..b8b9e1eae1 100644
--- a/examples/falling_balls_with_web/build.gradle.kts
+++ b/examples/falling_balls_with_web/build.gradle.kts
@@ -1,4 +1,4 @@
-import org.jetbrains.compose.compose
+import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
plugins {
diff --git a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
index 316f1bb9cf..9adc34d457 100644
--- a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
+++ b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
@@ -20,10 +20,12 @@ import org.jetbrains.compose.common.ui.background
import org.jetbrains.compose.common.foundation.border
import org.jetbrains.compose.common.ui.size
import org.jetbrains.compose.common.core.graphics.Color
+import org.jetbrains.compose.common.foundation.layout.fillMaxHeight
+import org.jetbrains.compose.common.foundation.layout.fillMaxWidth
@Composable
fun fallingBalls(game: Game) {
- Column() {
+ Column(Modifier.fillMaxWidth().fillMaxHeight(1f)) {
Box() {
Text(
"Catch balls!${if (game.finished) " Game over!" else ""}",
@@ -76,9 +78,8 @@ fun fallingBalls(game: Game) {
if (game.started) {
Box(
Modifier
-// .fillMaxWidth()
-// .fillMaxHeight(0.5f)
- .background(Color(248, 248, 255))
+ .fillMaxWidth()
+ .fillMaxHeight(1f)
.size(game.width.dp, game.height.dp)
.onSizeChanged {
game.size = it
diff --git a/examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt b/examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
index 02822a1735..66cfa8860b 100644
--- a/examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
+++ b/examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
@@ -26,8 +26,8 @@ fun main() {
fallingBalls(
remember {
JsGame()?.apply {
- width = 600
- height = 400
+ width = root.offsetWidth
+ height = root.offsetHeight
}
}
)
diff --git a/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt b/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
index 6edb5abf16..388226f901 100644
--- a/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
+++ b/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
@@ -14,7 +14,7 @@ import androidx.compose.web.css.Position
@Composable
actual fun Modifier.position(width: Dp, height: Dp): Modifier = castOrCreate().apply {
add {
- position(Position.Relative)
+ position(Position.Absolute)
top(height.value.px)
left(width.value.px)
}
diff --git a/examples/falling_balls_with_web/src/jsMain/resources/index.html b/examples/falling_balls_with_web/src/jsMain/resources/index.html
index e6a92fd90a..5c5e954a1e 100644
--- a/examples/falling_balls_with_web/src/jsMain/resources/index.html
+++ b/examples/falling_balls_with_web/src/jsMain/resources/index.html
@@ -19,6 +19,7 @@
compose-browser-with-web-demo
+
diff --git a/examples/falling_balls_with_web/src/jsMain/resources/styles.css b/examples/falling_balls_with_web/src/jsMain/resources/styles.css
index 34f25b7f43..e5b3293a7a 100644
--- a/examples/falling_balls_with_web/src/jsMain/resources/styles.css
+++ b/examples/falling_balls_with_web/src/jsMain/resources/styles.css
@@ -1,49 +1,8 @@
-/*
- * Copyright 2021 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#container {
- display: flex;
-}
-
-#rootParent {
- background: lemonchiffon;
- flex: 1 1 0px;
-}
-
-#raw {
- background: powderblue;
- flex: 1 1 0px;
-}
-
-.row {
- width: 150px;
- height: 150px;
- background: yellow;
- display: flex;
- align-items: end;
-}
-
-.box-a {
- background: red;
- width: 50px;
- height: 50px;
+#root {
+ width: 100%;
+ height: 100vh;
}
-.box-b {
- background: blue;
- width: 30px;
- height: 30px;
+#root > .compose-web-column > div {
+ position: relative;
}
\ No newline at end of file