Comments (3)
While this component is relatively simple, the problem lies with HTML5, bootstrap, and their being different way to render what is essentially the same thing.
I am all for using HTML5 components, but for better backwards compatibility at no real cost; I would use the div
elements over progress
. Even for modern browsers (as in, do not wrap the div
within a progress
element).
Animation doesn't seem to work on most modern browsers anyways (also, this comment from the linked issue may suggest that bootstrap will itself go back to just the div
)
What do you think?
from reactstrap.
Nice find! I tried creating a div version without the progress element wrapping it and it didn't seem to show a progress bar at all. If it does work without progress, that sounds like a better option. Otherwise, I think sticking to the progress element is not so bad since it's broken in bootstrap and can be fixed on their end. If the markup does change the component can be updated without people having to worry too much about what's changed between bootstrap releases.
from reactstrap.
I forgot I had add some custom styles to get the div
to work in all browsers. This is because bootstrap only targets the div
in IE9 which is blah.
For now, we can just go with progress
, using the div
fallback within the progress so it should work with IE9. We can have the animated props which will add the class, but animations will not work until bootstrap fixes them. It probably the best route.
Edit
Well, with the tag
prop, we can let the user choose, defaulting to progress
. We can do some special logic for when the tag
is progress
or not; since they have different markup.
from reactstrap.
Related Issues (20)
- Dropdown component throws error if used with inNavbar property HOT 4
- DropdownItem looses menuitem role when disabled HOT 1
- Enhancement Request - ModalTitle component
- Tooltip arrows are not visible with Bootstrap 5.3.0 HOT 1
- [deps] Checking for breaking changes in Dependabot's PRs
- Problem to centralize CarouselCaption
- Shift+Tab Model with ShadowRoot
- Carousel: switching interval to false does not deactivate autoplay directly
- Padding issue when closing a modal and opening another at the same time
- FormGroup combined with InputGroup doesn't render properly due to mis-placed class name 'mb-3' HOT 1
- Preventing scroll is not working for nested Offcanvas
- Due to the type definition, UncontrolledAccordion cannot be used without toggle HOT 1
- ReactStrap Navbar is not printed to default pdf printer pf browsers
- Dropdown not working witn Reactstrap v8 and Bootstrap v4 HOT 1
- Use useId() hook in Popover
- It won't accept floating numbers when I add the minimum and maximum number limits. HOT 1
- How do buttons get form data outside the form and go to validation? HOT 1
- Can't use `Button` without event handlers in Server Components HOT 1
- Unable to customise scrollbar of reactstrap table HOT 1
- OffcanvasHeader.d.ts is not aligned with propTypes
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactstrap.