If I use naive ui, how make a responsive container?
I've been using ant design vue so far.
In PC, I created a responsive container like this using Ant Design Vue.
<a-row type="flex" justify="center">
<a-col :xs="24" :sm="24" :md="22" :lg="20" :xl="16" :xxl="14">
...
</a-col>
</a-row>
How to create a responsive container when using a naive UI?
(Naive UI : https://www.naiveui.com/)
I guess you should use Naive UI's
Responsive columns and Responsive grid item.
Related
Container is responsive but header,footer and background image is not responsive. How to make that responsive?
If you'd rather not use a framework like Shahnad mentioned above, you can use the css property flex-box. This website perfectly explains how flex-box works.
Use Front end frameworks like Material-UI or bootstrap, design, etc...then use grid
Bootstrap- grid
Material-UI grid
Ant Design Grid
I'm about to start my first Angular project, and I'm thinking about using Angular Material.
It has a lot of components which is what i'm looking for but it seems to me that it does not have a grid system nor any utility classes.
Should I use for example Bootstrap or any other css framework along with Angular Material or simply add my own css? What's the common practice?
Having to add classes for padding, margin and so on is a waste of time so I'd be inclined to also use Bootstrap which already has all these kind of classes.
My only fear is that having both Angular Material and Bootstrap would increase the bundle significantly.
I am using the following for my project
For grid, checkout this https://www.ag-grid.com/angular-grid/.
For
angular wrapper of bootstrap you can check
https://valor-software.com/ngx-bootstrap/#/documentation#getting-started
You may also want to check
https://primefaces.org/primeng/showcase/#/setup this has UI
components as well as their own spacing and grid setup
https://primefaces.org/primeng/showcase/#/primeflex/spacing
I am currently working on a reactjs web app. I was wondering how do I make it responsive? Whenever I change the size of my browser, all my components get messed up and flow onto each other. How do I stop that from happening in an easy way?
"Responsive Design" is huge part/topic in development. In my opinion its a long term process to learn. The more you build projects, the more you can learn.
But there are lots of UI libraries/frameworks are available to make it easier. And fortunately every of them have a React Version. Here are some of them -
ReactStrap
Semantic UI React
Material UI
Chakra
Tailwind CSS
BaseWeb
If you have time to learn more about responsive design, you can check out the official guidelines from Responsive web design basics.
Some common techniques you can follow -
Try to set width and height of your layout with percentage(%) value or vw & vh.
Use flexbox or grid.
Use css media query and follow the standard breakpoints.
If possible give your component max-width / max-height when necessary.
You can build a BaseLayout component which has max-width: 1920 and wrap other widgets with it. So, in a very big screen your app contains always width of 1920px.
Hope this will helpful.
Responsive is a design technique - No libary or tool will do it for you, because you need to choose which elements get hidden or resized etc. Having said that, a framework such as Bootstrap will make responsive design easier.
But you'll have to look around and learn the ropes - its a different methodology of web design.
I'm using the great Material-ui components for building my react app and have used the component on several pages. My issue is that the component doesn't seem to support scrollable content.
Is there any easy way to make a workaround and make the content of the component scrollable if it exceeds the total height?
I'm getting started on a Kendo UI Mobile project and have absolutely no idea how to create the layout I'm looking for. Heck, I have basically no idea how to do anything in Kendo UI.
I'd like to have 3 images in a view. An example of the layout is below.
I'm quite confused as to how to create this layout and have the images adapt to whatever mobile device or orientation is being used. A series of nested splitviews seems to be the way to accomplish this layout, but the kendo-ui site seems to indicate that the splitview is for tablets only.
Should I just grab a responsive grid framework and use that in conjunction with kendo-ui? I'd prefer to stick within the kendo-ui framework if this layout is possible.
You need to recognize that KendoUI isn't the solution for everything. For this problem/requirement, you should be looking for a simple HTML/CSS solution and not a widget such as the splitter.
You can use the bootstrap responsive (integrated in kendo ui) for html 5 mobile app.
I remember, you can use the grid system (css classes) and the img-responsive class
see the grid here : http://getbootstrap.com/css/#grid
see the responsive image here : http://getbootstrap.com/css/#images-responsive
in kendo it overrided but that's the same logic