Iam trying to build ecommerce app using ReactJs. The products cards appears on home page with columns: 3 set in css. It works in chrome and edge without any issue but in Firefox, the third column becomes invisble. If I minimize and maximize the browser then it sometimes appears, sometimes dosent.
I have tried using css auto prefixer but it didn't solve the problem.
Related
I am using react-native-reanimated-carousel for react native expo app for (IOS,Android, Web).
It is working fine in mobile view, but my requirement is that i should show all the elements in Web Browser, not the animation ( 1 element at a time).
`
<Carousel
loop
width={width}
height={width / 2}
autoPlay={true}
data={[...new Array(6).keys()]}
scrollAnimationDuration={1000}/>
I have only 4 images , so in web when app is opened in browser desktop,I want to show all the 4 elements at a time. Is there any way i can disable it in desktop browser?
Also How can I make wdith property to be responsive according to its image content?
I tried to add , remove properties, read documents
I am having issues in Edge whereby when I refresh a page which has some values selected from a <select> it still maintains them on refresh.
I have a create-react-app. Currently using 16.8.0 version of ReactJS.
Other browsers are fine just Edge not behaving as expected. Might be down to caching but sure how we can overcome that in the react app
I'm developing a MEAN application that needs to look good on mobile browsers. At first I was trying and failing to use Bootstrap to make this responsive, as I didn't realize Angular was clashing on the Bootstrap and JQuery JS libraries that Bootstrap depended on.
So I found Angular-UI project on GitHub...sorry for no link but I don't have enough reputation.
I'm trying to get the Collapse Navbar to be responsive on a mobile device. (responsive meaning it adjusts to the "hamburger menu" and the names of the links no longer appear in the menu)
I'm failing to get this to work within the bounds of my Node application.
To isolate the issue, I took the HTML and JS from the plunker referenced by the Angular-UI Bootstrap example (which, by the way also appears responsive to small displays when viewed from a iPhone or Samsung Edge) and made a stripped down Node app, which basically returns what is in the Plnkr example, but that still doesn't appear responsive when viewed from a mobile phone browser (I tested mobile Chrome, Safari, and Firefox)
See screenshot of sample app on OpenShift cloud:
http://angbootstrapnotresponsive-215api.rhcloud.com/assets/
This sample is not responsive
Note: If I view my sample in "responsive" mode in the dev tools, or simply resize my desktop browser window, the menu links fold up into that hamburger menu as desired. Only when I try to use the mobile browser from either iPhone 6 or Samsung Edge this responsive Navbar isn't responsive.
thanks in advance for any ideas!
Today, I was testing my angular app in Firefox.
My angular app has a couple of md-button and md-tabs. One of the md-tab contains table as it's content. Whenever I switch from this md-tab to some other md-tab in firefox, the table flashes for few seconds in new md-tab.
After spending some time in debugging, I found the property "animation", disabling which the flickering got disabled. To make it work, I changed the property "animation" to none for md-tab-content.
Whenever I start this application in firefox, it shows a popup box containing information for angular-animate.
I have run my application in chrome and safari, and it is working great in those browsers.
Regards
Ajay
I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);