Stack Overflow
Stack Overflow

Questions tagged [react-flexbox-grid]

27 questions
88
votes
5 answers

What's the right way to float right or left using the material-ui appbar with material-ui-next?

I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",) It seems they removed iconElementRight= from the api. Do we have to use the …
Kyle Pennell
  • 5,747
  • 4
  • 52
  • 75
36
votes
2 answers

What is the meaning of xs, md, lg in CSS Flexbox system?

I'm developing an application using React and wanted to style components, I found https://roylee0704.github.io/react-flexbox-grid/ which talks about a fluid grid system. The example looks like:
daydreamer
  • 87,243
  • 191
  • 450
  • 722
11
votes
1 answer

Align Card Buttons on bottom Material UI

I am developing an app in ReactJS and i'm using the following: MaterialUI (for react) and React Flexbox. The problem i'm having is trying to position the card buttons on bottom (the problem that seems to have spammed the internet in different…
Dante R.
  • 902
  • 3
  • 13
  • 41
6
votes
0 answers

What is the meaning of 'layout-only view removal' in react native

When i wanted to add testID and nativeID in react-native, i observed a warning in react-native docs. I couldn't understand the meaning of 'layout-only view removal'. What is it? Does it have any impact on performance ?
Harish_N
  • 2,249
  • 3
  • 23
  • 34
6
votes
5 answers

react native flex direction

Generally in the excel sheet..we have rows like below Row1 Row2 Row3 and columns like column1 | column2 | column3 But why in react native when using flexDirection: 'column' the box's/text are defined as flexcolumn1 flexcolumn2 flexcolumn3 and…
AutoMEta
  • 1,339
  • 6
  • 22
  • 35
4
votes
2 answers

Render grid items in one row - ReactJS and Material-UI

I want to create a material ui carousel that has 3 items visible in the same row. When shrinking the browser's width I want the items to be still in one row and just hide the ones who don't fit. This is when full screen: This is what i want to…
Zabzuki
  • 43
  • 1
  • 4
3
votes
2 answers

vertical ScrollView with wrapped row in React Native

I'm new to React Native, and struggling to get my ScrollView working. I'm trying to have a vertically scrollable list of TouchableOpacity components that are arranged in pairs across the page, e.g. This is how the app looks when I wrap the…
Mithy
  • 41
  • 1
  • 4
1
vote
1 answer

Flex-Flow - folding 2nd column under 1st, and 4th column under 3rd

I'm using flexbox to create a table that will display differently on 3 screen sizes. I'm struggling to work out how to achieve the Mid-size view, by collapsing the 2nd column under the 1st and the 4th under the 3rd in order to achieve the layout…
Strawberryplants
  • 13
  • 2
1
vote
1 answer

CSS Grid layout for a form

I have a div named main-filter and within the div, I have two div. Now, I want to create a form with button, labels and input and I want to put two div inside the form and it should look like the below down screenshot. I have the HTML and CSS code…
zakaria mahmud
  • 33
  • 1
  • 9
1
vote
0 answers

React-flexbox-grid: Prop `className` did not match between client and server

When configuring react-flexbox-grid along with sass inside Next.js. Facing this challenge. The project created using latest: create-next-app and I do not have any custom changes in .babelrc Error index.js:2178 Warning: Prop className did not match.…
Mithun Shreevatsa
  • 3,588
  • 9
  • 50
  • 95
1
vote
0 answers

Having an issue with flexboxgrid classes getting mangled

I am having an issue where using the below webpack with the below package.json is causing flexboxgrid classes to get mangled as shown below. Here is how some of the classes are getting generated when viewing the…
null_pointer
  • 1,779
  • 4
  • 19
  • 38
1
vote
1 answer

React-Flexbox-Grid: How to fill the whole page?

I am using react-flexbox-grid from https://github.com/roylee0704/react-flexbox-grid, while it allows me to specify the column sizes I am not able to fill my whole page. I want the Holy-Grail layout as seen here:
optional
  • 2,504
  • 4
  • 18
  • 30
0
votes
1 answer

NativeBase Button getting squished inside flex

Anyone knows how to solve this: in iOS, a button gets "squished" inside a Flex that has fixed height, but not on Android or web. Demo Link
Ashwini Kumar
  • 41
  • 2
0
votes
1 answer

How can I have flex elements shrink to their contents with react-native and align?

I have: {conversations.map((c, i) => (
Shamoon
  • 41,293
  • 91
  • 306
  • 570
0
votes
1 answer

react native grid (flex) view overlapping with list view

There are basically constructed by two parts: grid (flex view) and listview. The elements used are from native base. I have also use but the problem is still the same. View style={{flex: 1, flexDirection: 'row'}}> The snippet of codes are: …
fmchan
  • 760
  • 1
  • 11
  • 29
1
2