I am using a stack component to make a split pane. I wanted to make it such that left side has 50% screen space and right side has the remaining 50%. However the problem is that the 2 panes are not equal width from beginning, and as text is added to the left component it starts to grow in width.
How do i fix this so that they always share width equally (50%/50%) ?
Here is a CSB illustrating the issue:
https://codesandbox.io/s/jolly-faraday-lek5h?file=/src/App.tsx
Related
I have a layout that keeps occurring in my codebase, that I'm not able to style properly with react-native flex only.
I want to have a top and bottom container which initially should both take half the screen space. The bottom container should grow with it's children and the top container should shrink if need be.
I've created a snack with the code here, where the layout behaves as it should, but it's using a workaround via onLayout: https://snack.expo.io/#domir/center-problem
The same problem is easily solved in web via flex: 1 on both containers. In react-native if I have flexGrow: 1 on both of them, they only divide leftover whitespace.
E.g. Currently for a display height 1000 a top container will get 400 while bottom container will get 400 + 200 when a 200 child is placed there when using flexGrow: 1. What I want is both to get 500 until the bottom container has 3 children with 200 each. Then I want the top container to get 400 and the bottom to have 600.
Not sure if there's a way to solve this JUST with flex (probably not) - and I'm not sure what your requirements are, but here's a way to solve that without using onLayout but instead just use maxHeight percentages:
https://snack.expo.io/#sudoplz/center_problem_maybe_solved
All I actually did was I used the existing counter value you had in that snack, to modify the input of maxHeight
The top parent is now styled like that:
maxHeight: `${Math.min(50, ITEM_HEIGHT - counter * ITEM_HEIGHT_PERCENTAGE)}%`
which means that until the bottom parent is full, it's max value will be 50%, as soon as it's full, the maxHeight becomes less and less gradually (depending on he number of children on the bottom view)
In my snack I also got rid of some unnecessary views you had, not sure why they were there.
Here's how that looks like now:
Would that work for you?
As you can see below, the maxHeight solution does not work quite well on a real device. Some of the lower boxes are cropped off or overflow the screen.
Although the solution does not have to be with flex only, I do have a flexible container at the bottom. It contains text and a varying amount of error messages. The yellow space would contain whitespace and the green container would contain some text input. On large screens, this is not a problem, but for small devices, the error messages can take up quite a bit of space and I'm not able to calculate the size of the lower parts in advance.
We have a typical bootstrap SPA that we turned into a React site.
In one of the sections there's an image that appears in the right side of the layout, and it spans the section vertically (takes up about 50% horizontally).
When the window is reduced in size, at some intermediary positions, the image no longer spans the section vertically, making it float above what looks like a margin or a frame, but in fact, it's just the background color of the section whose aspect ratio is not enough to hold the image completely.
Is there a way to prevent this? It seems like the only solution would be to pick images that are have aspect ratios that are more amenable to the half the grid position they are being given.
Please look at the official navbar example:
https://getbootstrap.com/examples/navbar/
If you try to resize your browser you see this:
Today I found the same problem on my website.
How to easily fix this behavior?
This menu has not enough space in one row. The right side part just does not fit in the same line. You can:
reduce the number of menu items
(for example, hide one of them by adding the hidden-sm class)
make names of items shorter
hide a word from the name:
<li>Something else<span class="hidden-sm"> here</span></li>
reduce the distance between menu items
reduce the width of the logo for this screen width
expand the container or use container-fluid instead
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
So,
I have a fairly simple parent div containing two child divs, one is text (floated left), the other contains an image (floated left against the first child)...the float of the second is kind of irrelevant (I just don't want it to drop down below). But what I want to achieve is for the image to sit in the bottom right of the parent and STAY there. At the same time I want it to be part of a fluid grid and for the distance from the bottom/right to also be responsive.
I tried absolute positioning (with an extra parent added around it to position:relative), which just didn't work at all...it could only be left/top positioned which then wouldn't work in %'s.
I then tried adding padding (top, left) instead of using positioning, thinking I could maybe push it into place...which worked great for keeping it to the right (pushing left), but obviously didn't work for the bottom (pushing from the top), as this value needed to increase as the screen decreased rather than the other way around (doh!).
Just wondering if anyone has any ideas or creative solutions?
I know I'm trying to do a number of tricky things all at the same time!!