4 ms·

There is a bug in the modal code. It scrolls to top of page when you click the launch modal button. Annoying for the user to have to scroll down. Also visually

There is a bug in the modal code. It scrolls to top of page when you click the launch modal button. Annoying for the user to have to scroll down. Also visually annoying, personally I got very distracted when it scrolled to the top like that. Not sure if Elemental UI is a competitor to bootstrap. But if you are happy with bootstrap, then the react bootstrap library is fine. And the modal is very concise and fluid. https://react-bootstrap.github.io/components.html https://react-bootstrap.github.io/components.html

andy_ppp 11y ago
I am using react-bootstrap but I wish I hadn't - it's quite large (113kb minified, without including anything from bootstrap itself) and doesn't do very much above and beyond using standard bootstrap classes and standard HTML tags. It also means you'll probably end up having to include jquery for things which adds another very large amount of code... I'm pretty happy with bootstrap as a quick good looking (with a theme) win, but I think one day I'd like to get rid of it and write some simpler problem specific CSS and use React proper for any Javascript interactions.
- funkiee 11y ago
  I haven't had to pull in jQuery for other things with usage of react-bootstrap, as react-bootstrap handles all of the interactions that bootstrap provides. Also, if file size is getting you down, and you don't need all of react-bootstrap, you can simply require the individual components you need. e.g: require('react-bootstrap/lib/Modal')
jed_watson 11y ago
Elemental UI is a competitor, sort of, I guess. But it's not a zero-sum game, and we've learned (and borrowed) a lot from Bootstrap. More specifically, we're not porting Bootstrap to React but building React-specific components from scratch to fill the same gaps. Something in particular we're focusing on is building a modular IU toolkit - so you could use all of Elemental, or just our select component / buttons / date picker / etc; all of which would be available as standalone packages on npm, but can leverage a consistent thumbing system and play nicely together. (And yes - we'll fix that modal issue soon with a pure css approach; a community member wanted to implement it with JavaScript but it hasn't worked out well)
- Exuma 11y ago
  (And yes - we'll fix that modal issue soon with a pure css approach; a community member wanted to implement it with JavaScript but it hasn't worked out well) Can I ask what you mean by this? I'm just getting into react and that sentence is a pretty big red flag..... you mean you cant just do return false and it breaks react?
  - jed_watson 11y ago
    I phrased it badly - I meant the modal scroll handling that was implemented hasn't worked out well, no red flags for React here. position: fixed is a more robust way of positioning modals, the current version watches the scroll event and updates the modal's position which is pretty janky; and it does some not-great things manipulating overflow on the body too, which causes the bug mentioned. We'll be fixing that in the next release.
    - Exuma 11y ago
      gotcha, thanks!
- pacnw 11y ago
  So if Elemental is a competitor to Bootstrap, would you be able to point out some reasons to use this rather than React Bootstrap? It appears the elements are almost identical to Bootstrap, but with far less number of them so far. Semantic UI is a competitor as well, but that library has a number of styling options and UI features that Bootstrap does not have. Semantic doesn't seem to have a complete port to React yet, particularly with some of the more advanced controls (sidebar, sticky elements, certain modals, etc.)
- mst 11y ago
  Not intended as a loaded question: How come you're building a full form system yourself rather than leaning on formsy or similar?

andy_ppp 11y ago

I am using react-bootstrap but I wish I hadn't - it's quite large (113kb minified, without including anything from bootstrap itself) and doesn't do very much above and beyond using standard bootstrap classes and standard HTML tags. It also means you'll probably end up having to include jquery for things which adds another very large amount of code... I'm pretty happy with bootstrap as a quick good looking (with a theme) win, but I think one day I'd like to get rid of it and write some simpler problem specific CSS and use React proper for any Javascript interactions.

funkiee 11y ago
I haven't had to pull in jQuery for other things with usage of react-bootstrap, as react-bootstrap handles all of the interactions that bootstrap provides. Also, if file size is getting you down, and you don't need all of react-bootstrap, you can simply require the individual components you need. e.g: require('react-bootstrap/lib/Modal')

jed_watson 11y ago

Elemental UI is a competitor, sort of, I guess. But it's not a zero-sum game, and we've learned (and borrowed) a lot from Bootstrap. More specifically, we're not porting Bootstrap to React but building React-specific components from scratch to fill the same gaps. Something in particular we're focusing on is building a modular IU toolkit - so you could use all of Elemental, or just our select component / buttons / date picker / etc; all of which would be available as standalone packages on npm, but can leverage a consistent thumbing system and play nicely together. (And yes - we'll fix that modal issue soon with a pure css approach; a community member wanted to implement it with JavaScript but it hasn't worked out well)

Exuma 11y ago
(And yes - we'll fix that modal issue soon with a pure css approach; a community member wanted to implement it with JavaScript but it hasn't worked out well) Can I ask what you mean by this? I'm just getting into react and that sentence is a pretty big red flag..... you mean you cant just do return false and it breaks react?
- jed_watson 11y ago
  I phrased it badly - I meant the modal scroll handling that was implemented hasn't worked out well, no red flags for React here. position: fixed is a more robust way of positioning modals, the current version watches the scroll event and updates the modal's position which is pretty janky; and it does some not-great things manipulating overflow on the body too, which causes the bug mentioned. We'll be fixing that in the next release.
  - Exuma 11y ago
    gotcha, thanks!
pacnw 11y ago
So if Elemental is a competitor to Bootstrap, would you be able to point out some reasons to use this rather than React Bootstrap? It appears the elements are almost identical to Bootstrap, but with far less number of them so far. Semantic UI is a competitor as well, but that library has a number of styling options and UI features that Bootstrap does not have. Semantic doesn't seem to have a complete port to React yet, particularly with some of the more advanced controls (sidebar, sticky elements, certain modals, etc.)
mst 11y ago
Not intended as a loaded question: How come you're building a full form system yourself rather than leaning on formsy or similar?