I'm using MDL for a desktop-only web application and I do not need the content to be responsive. That is, even if the user resizes the browser window, I don't need to re-arrange the content. Neither it will ever be browsed on a mobile device. How do I prevent the content from being responsive?
https://getmdl.io/components/index.html#layout-section/grid
I have provided reference to the MDL grid at the above link.
The content should not be responsive without initiating something like the mdl-grid class and mdl-cell class which would then allow you to label pieces like a content card with specific sizing, which will resize based on the device. If you are using your own style sheets you could create a card class which would have a specific pixel width you believe would work best for the project on a desktop.
Related
I have the same content to be displayed on a pop-up and desktop view.
I already used media queries to adjust the content on desktop/mobile view. But in desktop view, the same content needs to be displayed on a pop-up with different margins.
How can I achieve this? Please help. Thank you.
Just add different margin that will overwrite default one based on parent class of the component - in your case it will be pop-up class.
If you do not want to increase CSS specificity - you may try add class modificator (eg component--big-margin) if you are using CSS methodology like BEM.
I need to have a section/component of an angular application to simulate responsive view of my form data. For example, lets say I have an angular app that has a form. After filling up that form the form data is then sent/passed to a component Simulate which then renders the form data. The Simulate component has an input which allows the user to switch between mobile, tablet, medium laptop or big screen views, in short the form data needs to be rendered in a responsive way. I know I can just get the height and width of the Simulate component but there is another angular app, say Viewer-App which only takes the form data and renders the data and that app is responsive. So if I just modify the height or/and width of the component the screen width and height is still the same as that of the current device and not of the modified height or width of the component (Simulate).
My question is, how do I go about the Simulate component such that the media queries or the css behaves as if it is being rendered in a specific screen? I have seen many examples using an iframe but none where a component is passed to that iframe and the iframe renders it. I can configure the url of the iframe to a source of the Viewer-App with the appropriate route params to the form data, but that would mean making an HTTP request which I want to avoid.
I am using Angular 9 with Bootstrap 4 (without the JS part, just the grid).
This link has a solution but it uses an iFrame.
This link has an iFrame in a component's template but it doesn't seem feasible in my situation.
App maker sample projects are working perfectly in mobiles, forms and tables are adjusted perfectly to the mobile view. But whatever we developed in app maker the designs are not adjusted to mobile layouts they are still in the desktop view. Is there any option to configure the application to work in mobile.
Our application is not working correctly in safari is that any browser compatibility issue from app maker or it is the issue from our side.
You need to use the Flow and Layout sections along with Panels to make sure your widgets group/resize/align correctly when resizing the screen. You can test this easily in chrome by pressing F12 and toggling the device toolbar (Ctrl-Shift-M or the 2 mobile devices icon at the top of the sidebar).
Read up on CSS Flexbox to understand how the Flow section works. With a combination of Fill Parent and Fit to Content in layout, using horizontal/vertical Panels, and grouping your widgets in Panels, along with using the Flexbox features, you should be able to get your screen to accommodate desktop and varying sized mobiles. It definitely takes some time to get the right combination though.
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
We’ve been looking for reporting components, and we’re having difficulty a report designer that will render reports properly on both phones and computers. We want the report to display in the same way on different screen sizes (desktop and phone), or at the very least, display on both without clipping on the phone. Our thought is the easiest way to lay out such a report is for the report designer to specify table and column sizes as a percent of the width (sort of like HTML tables) rather than hardcoded pixel sizes. So when my page is resized, my report (and content elements) also gets resized, and it continues to fit.
We tried Telerik Reporting but unfortunately they don’t support this feature. They also don’t support the feature where report is resized when window is resized. The size you lay out is the size it is. They indicated they have something that will come out in beta soon, but have given us very few details. We tried the demo for Infragistics, and it seems to have the same limitations.
Is there anything else in the development space that will allow us to produce reports with more “fluid” layout, or in the very least, zoom in on the phone instead of clipping?
is twitter bootstrap an option? tb supports responsive design which will make easier to adapt your report to any device, you just will need to adapt your media queries
kendo ui supports responsive design you may take a look, if bootstrap is an overkill you should try a separate jquery UI or JS library that helps you out with a fluid layout
hope that helps