Is there any chance to change it or I must use mobile-first approach with Tailwind ?
Go to your tailwind.js config file, look for the screens section. By default you will find the list of screen sizes like this: 'sm': '576px'. Tailwind uses min-width by default, you can change those values to 'sm': {'max':'576px'} to force max-width.
Tailwind generates a corresponding max-* modifier for each breakpoint. For example:
<h1 class="text-green-500 max-md:text-red-500">Test</h1>
Here the green color will apply to all screen sizes and the red color will overwrite it only for screens that are smaller than the medium breakpoint (768px).
More info: https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range
Related
I have a flexbox with wrap enabled, and various flex basis and flex grow constaints.
By default, it looks like this:
[ A, B ]
but under a certain screen size, it wraps to this:
[ A,
B ]
Which is exactly what I want.
My question is: is it possible to set a background color on B only in the first instance, when it doesn't wrap? Basically, if it's part of a single row, I want it to have a background color with a tone complementing A, but if it wraps I want the background to be white.
Is this possible? Or do I need to resort to media queries?
No, it is not possible just with CSS, unfortunately. See the question Can flexbox detect when a flex item wraps?
If you want to do this, you'll need to set style using a media query (that styles the background based on the size breakpoint that will result in wrapping). Alternatively, you can hook into the dimensions of the element with javascript, and add/remove classes programmatically based off of that-- though that would potentially cause a delay during loading or reflow.
Is it possible to make the material ui tab react component responsive?
Documentation of MATERIAL UI TAB
Say I have multiple tab items with a search bar like below
I want to make the input component stretch the whole width of the screen for mobile view (screen less than 500px)
I tried putting width: 100% on the tab with media queries but it didnt work.
I also wanted to remove the focus effect when i click on the search component which is illustrated below
To summarise
1 ) I want the input component to stretch the whole width on smaller screens
2 ) I want to remove the focus effect when clicking the first tab(search component)
This is a working example, forked from your codesandbox: https://codesandbox.io/s/material-demo-fpfw5?file=/demo.js.
Basically I changed something for only screen sizes smaller than 600px:
First, set "max-width" and "width" for first tab to "100%".
Second, set width for input inside tab1 to "100%.
Last, add disableRipple attribute to first tab.
One thing, I use the default breakpoints of Material-UI, which defined here: https://material-ui.com/customization/breakpoints/
If you wanna change to 500px, just define your own breakpoint.
is it possible to make the v-dialog have dynamic width? Currently the v-dialog by default has dynamic height which makes it shorten and lengthen depending on the length of content.
But can this be done with width?
I have a v-dialog that contains 4 tabs. 3 of those tabs don't require much width but the last tab contains a table so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.
Vuetify v-dialog: https://vuetifyjs.com/en/components/dialogs
Setting width to "unset" seems to work, haven't discovered any negative side effects yet.
<v-dialog v-model="dialog" width="unset">
<YourDialogContent></YourDialogContent>
</v-dialog>
or CSS
.v-dialog {
width: unset;
}
For Desktop
so I'd like the dialog to widen as far as it needs to, to cater for the table, and then shorten again when clicking on either of the first 3 tabs.
For desktop, we can set dynamic width for v-dialog based on contents inside the dialog easily, by manually setting the width="auto " (with extra space).
<template>
<v-dialog width="auto ">
...
</v-dialog>
</template>
For Mobile
Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens. But need to set dialog to full-screen in mobile devices only. We can easily set dynamic full-screen using Vuetify breakpoints like:
<template>
<v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
...
</v-dialog>
</template>
Final Version
We can combine both the logics into one like:
<template>
<v-dialog width="auto " :fullscreen="$vuetify.breakpoint.xsOnly">
...
</v-dialog>
</template>
Working Demo | Code Pen
On Desktop
If we open the dialog using the click me button, we can see the dialog has a small width as the content of tab 1 & 2 is very small. But if we click on tab 3, which has a large data table, you can see the dialog width and height automatically increases. You can toggle between tabs and can see this again.
On Mobile
If you open this demo on mobile, you can see the dialog is opening in full-screen by default and the width is constant.
Write custom css rules and not set width or max-width props. e.g.:
I use a custom class in order to not apply rules to all v-dialog:
<v-dialog v-model="dialog" content-class="v-dialog--custom">
<!-- dialog content -->
</v-dialog>
And create your custom rules:
.v-dialog--custom {
width: 100%;
}
/* Desktop */
#media screen and (min-width: 768px) {
.v-dialog--custom {
width: 50%;
}
}
You can see this on codepen: https://codepen.io/hans-felix/pen/BajByxx
Are you talking about this part?:
<v-dialog
v-model="dialog"
width="500"
>
If so, why just don't remove the width="500" part and leave without one? I tested and it stretches dynamically. This option is not required and nothing is breaking if you remove it.
In case I misunderstood something, please feel free to add more details.
I think, what are you searching is the fullscreen (bool) property or depending on the needs the max-width (Number) property.
By setting one of those you control the width of the v-dialog depending on the surrounding element. The surrounding element width can be adjusted via css, e.g. flexbox.
Use what scientists are using.
Make width as a computed variable, and then return your value based on the breakpoints.
If you want to set width dynamically based on the contents in the dialog then just modify the width function to return the width based on the contents.
Copied from vuetify site: LINK
<v-dialog v-model="dialog" :width="width">
<v-img src="~~~"></v-img>
</v-dialog>
<script>
...
computed:{
width() {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return 220
case 'sm': return 400
case 'md': return 500
case 'lg': return 600
case 'xl': return 800
}
},
}
</script>
I'm using Semantic UI on a website and it looks pretty well in all the resolutions, but I'd like that, when in tablet size, the containers were a bit wider.
I've found that the variables that control that width are in the file themes/default/elements/container.variables. I read that, to avoid modifying the original files, you have to edit the file site/globals/site.variables, so I've added the following lines:
#blue : #00709e;
#green : #75912b;
#black : #464646;
#tabletWidth: (#tabletBreakpoint+201) - (#tabletMinimumGutter * 2) - #scrollbarWidth;
I've rebuilt the CSS/JS files using gulp and I can see that the blue, green and black colors have changed, but the tablet container size is the same as before.
Do I have to change something else? Thanks!
From my knowledge of theming semantic and what I can see I wouldn't change #tabletWidth but I would just change #tabletBreakpoint and #tabletMinimumGutter the values you want, this should then make #tabletWidth in the container.variables use your variables to workout the width.
I am using Bootstrap for having a better mobile design.
I am using this grid model:
.col-md-2 (navigation bar) .col-md-8 (content)- col-md-2 (right column)
with following width sizes:
16.66666667 % + 66.66666667 % + 16.66666667 %
But I would like to change .col-md-2 into 2 different sizes like
10.66666667 + 22.66666667, so I would have 2 different classes or is it possible to change the first used .col-md-2 class and then the second one in my later integreted css-file, because this classes are in different css id's.
I tried to create 2 own col-md classes, but this don't worked.
My solution in the second loaded css file (don't worked correct)
#menu.col-md-2 {width:22.66666667%;}
#rechts.col-md-2 {width:10.66666667%;}
The total witdh would be now to long, but I should be like before, because I add 6% to the first class and subtract 6% to the second class.
I want to change the sizes, The first column is to short for a 10inch tablet.
I advice you to create two different classes and apply them as you want.
E.g :
.col-md-2.specialCol1 {
// Special size
}
.col-md-2.specialCol2 {
// Special size 2
}
Do you know what I mean ?
EDIT
I suggest you to use this order :
.col-md-3 (navigation bar) .col-md-7 (content)- col-md-2 (right column)
To focus on the content.
Then, use the media queries to adapt, e.g. :
#media screen and (max-width: 640px) {
.yourCol {
// Your size
}
}
The above example will apply under 640px width. Detect what you need and apply changes.
I always suggest to not change the standard Bootstrap class widths. Create your own... By the way, why at all you need something like this? 10.6666 is really near the col-md-1, why don't use it? Pherapse you can obtain a good result without the need to create custom withs classes, but simply working with margins and paddings.