I know this type of question has been asked before, I've read the answers and still cannot get this to work. I have the following breakpoint:
#media only screen and (max-width: 600px) {
/*css*/
}
is this not saying "apply these styles to screens 600px and less" ? Or am I misinterpreting the use of max-width? When I drag my browser to <600px I can see the styles take effect, but when I view the site on an iPhone the styles applied at this breakpoint are not shown. Thanks in advance.
Related
I would like develop a VueJS swip cards app but interactJS disable the y-axis native scroll on mobile. I reproduce my app on this codepen : https://codepen.io/ostaladaFab/pen/LYQBvXm/7acc1eb6e6afb3583c7f65133019f64d.
I can't scroll anymore on mobile. A solution ?
The shorter url : https://shorturl.at/dAS14
Thanks.
Remove these two lines of CSS from your code, and the scrolling issue should be gone.
-ms-touch-action: none;
touch-action: none;
For these two lines, your touches are being ignored.
I have a Vue application that has menu items across the top in a nav bar fashion. The number of menu items changes based on the type of user logged in. Sometimes it might be 3 items, some times it could be up to 6 items.
I am trying to figure out how to determine when to switch between the desktop version of this navbar where the items are layed out as a row of buttons and the mobile version where the menus are hidden under in a slide in type drawer.
I have overriden the updated() life cycle hook to select the appropriate view on startup. I am using ref on a div that contains the menu buttons. From that I can get scrollWidth (the amount of pixels needed to display all the buttons) and clientWidth (the amount of pixels the div has been given). I have overflow: hidden.
From that I can determine when I need to switch from the desktop to the mobile view. I am using a resizeObserver to catch resize. This is working great to switch from desktop to mobile.
But the problem is that once I am in mobile, the desktop navbar isn't part of the dom so i don't know how many pixels are needed to render it so I don't know when to switch back from mobile to desktop as the user resizes the window bigger.
I also don't know how wide the menu buttons will be for different languages.
Any suggestions?
Thanks
Greg
But the problem is that once I am in mobile, the desktop navbar isn't part of the dom so i don't know how many pixels are needed to render it so I don't know when to switch back from mobile to desktop as the user resizes the window bigger.
So just hide them with visibility:
<div class='wrapper' :class='[mode]'>
<div class='items' ref='items'>
<div class='item' v-for='item in items'>Item {{ item }}</div>
</div>
</div>
.wrapper {
overflow-x: hidden;
pointer-events: none;
visibility: hidden;
&.desktop {
visibility: visible;
pointer-events: all;
}
}
.items {
display: inline-flex;
}
.item {
margin: 0 10px;
white-space: nowrap;
}
JSFiddle
Edit to add more information:
This answer caused me to rethink my approach to the question. I was looking at switching between two different navbar contents. But that isn't compatible with what is being suggested as an answer. The key to the answer is that both the mobile and the desktop navbar elements are going to be present at the same time. The difference is that the desktop elements are going to be squeezed into a smaller and smaller space and then made invisible using the visibility property.
Note about the visibility property: It leaves the element in the DOM and on the screen. The screen still renders the page as if the element was visibile but has transparent pixels. This is important to understand. It is also why the pointer-events have to be handled (turned on and off), because the elements are still there and can still be interacted with. So when they are hidden, we have to disable the pointer-events. And when the element comes back into visibility, we have to enable the pointer-events.
The other thing that you might have to look out for is that the answer uses offsetWidth. For simple navbar contents, this is fine. But in my case I have layers of flexbox and in the end the div that contained the menu was being squished due to flexbox and even though the overflow contents were being hidden, the offsetWidth was being shrunk. I switched to scrollWidth to get the true width of the menu and then it worked greata again.
I have integrated Bootstrap Vue into my project and am having a hard time customizing it.
Specifically, I am talking about the Navbar component.
I have read the documentation and saw that I can apply a variant to the navbar that will define the color of the whole navbar.
Thing is, I didn't provide a variant to the navbar (and don't want to) and when it collapses, the collapsed menu icon (hamburger menu icon) is black and is not visible due to the background color of my website.
I have inspected the DOM of the website and used the following CSS rules and selectors:
.navbar-toggle
.navbar-toggler
.navbar-toggler-icon
With each of them I tried to apply the rule:
color: white !important;
but this had no result.
I have looked online and in SO, but found nothing that addresses this scenario.
Navbar open:
Navbar collapsed:
Obviously, I can change the background color of my website, but I prefer not to do that as I do not want to change the look and feel of the website just because of a minor issue (and I want to be able to know how to overcome this).
Link to code
Looking at your code - .navbar-toggle and .navbar-toggler are just plain div's, so color prop would affect only text color.
If you are trying to change icon color - it is an inline background svg. you can only override it with your own file.
I managed to solve this scenario by using the following selector:
.navbar-toggler > .navbar-toggler-icon {
background-color: white;
}
#Ivan Klochkov pointed me in the right direction, but I had to mess a bit with the correct selectors.
I am using bootstrap Clock Picker plugin.
When I use picker in modal, it is not auto adjusting when it is in bottom of the modal. so that I am not able to view the picker completely. When it is in the bottom of the page, it should come on top of the text field automatically.
Please help.
I am not able to fix.
Please suggest.
Thanks in Advance.
use this code to fix your issue.
sometimes when you are multiple layers of Div or any Tags. then this type of issue comes or some CSS code of an Element always force to come in top or Front. then that case this example will very helpful. In some solutions to this problem, I saw some developers used different codes like they are finding DIV Class name and setting Z-index. that also works.
.popover {
z-index: 215000000 !important;
}
When you use clock picker in modal then you will be not able to view it because of the z-index of the modal, you have to give z-index to clockpicker also as below, please add this below style in your css.
.clockpicker-popover {
z-index: 999999;
}
Using version 2.1.0 of durandal I found a problem I am not able to fix it seems.
I'm using a dialog but the content is too big for the screen, the buttons - which are at the bottom of the screen - kind of fall off, under the screen.
This mostly comes from the fact that I use visible bindings using knockout the show and hide elements on the dialog making durandal position it wrong and/or not showing a scrollbar for the dialog/screen when it overflows.
Does anyone know how to solve this by either getting a scrollbar or repositioning it on the screen?
I have tried the reposition method but to no success.
Moreover I tried both of these:
Responsive dialog
Durandal modal dialog
Both did not help out and I'm still stuck on this.
Anyone got any idea how to get the scrollbar on the dialog or on the screen so I can actually see my buttons by scrolling? Or is there a better way to get around this?
I'm not sure this is what you want
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
http://jsfiddle.net/farizazmi/5Lnqurar/