I'm trying out this Angular-material2-datepicker. It seems the z-index is not working correctly. In the source code, I can see the z-index is set to 10000, but not sure why it shows up behind my material md-button, which I'm not sure what's the z-index value.
How Can I bring up the date picker?
Thanks!
Try to decrease the buttons z-index.
Related
friends!
I want to make a number picker on Flutter, where the font size of numbers (not selected) progressively decreases to each side and changes the colors.
As shown in the picture.
Is anybody has a task like that? Any solution?
p.s. Tried to use package NumberPicker
No results!
i never used NumberPicker, but here is
https://pub.dev/documentation/numberpicker/latest/numberpicker/NumberPicker-class.html
decoration properties which help to change selected value size and color.
I'm using Vuetify to build an app that displays local points of interest. The app uses vue2-leaflet to display the maps. Unfortunately the map pokes out of navigation drawers, dialogs, and darkener screen overlays. Here are images demonstrating it:
How can I fix it?
In my opinion if z-index needs to be changed: it's better modifying the map itself - rather than Vuetify's css which can affect other components across the app.
In the component where leaflet map is registered add
<style lang="scss">
.vue2leaflet-map {
z-index: 1;
}
</style>
This works for me using Vuetify + Vue2-leaflet (latest for today's date).
Haven't noticed any issues with other Vuetify components so far.
This is a z-index issue. Try adding the following to your CSS:
.v-navigation-drawer--temporary {
z-index: 1001;
}
You can see a working example on Codepen. I think this is the minimum z-index value that will get you the overlay that you want, but you may have to play around with it until you get the right value.
NOTE: this solution only works for navigation drawers. You'll probably have to tweak the z-index values in custom CSS separately for other types of components like dialogs. Alternatively, you might be able to find where the z-index is set in the Leaflet CSS and modify that instead. I'm more familiar with Vuetify so that's what I tweaked.
I need a CodeMirror editor which starts with a certain width and then grows automatically to the right to match the maximum line length. I.e. roughly what CodeMirror does when height is set to auto, but with width.
Here's a self-contained example. The editor grows automatically along the y-axis fine, but not along the x-axis. By tweaking the CSS, I can either have a fixed width editor with a scrollbar, or one which fills the entire width of the browser, but not one which grows as you type. I assume overflow-x is relevant, but I don't understand how it interacts with other CSS size properties set on parent elements. I also tried setting that property on CodeMirror-scroll, but it didn't help.
I believe this can be done using CSS properties alone. In fact I have this behaviour in my application already, but growing to the left, rather than the right, but I don't understand why it happens, or how to reproduce it in a small example.
This question is essentially the same, but for the vertical scrollbar.
Simply add float:left to the CodeMirror div.
<div id="here" style="float:left"></div>
This is not something CodeMirror supports. You may be able to get something working by setting .CodeMirror's width to (-webkit-)fit-content, but there will likely be corner cases where this breaks the scrollbars or cursor placement.
I have a search icon, when i click on that, a search popup will opens(which is actually a vertical panel). In this Date textboxes are there. when i am clicking on a Data textbox. Its coming, but its behind the Vertical Panel popup.
My question is, when datebox is clicked, Calender should come front. What i have to do for that.
Can anyone please help me.
Thanks in Advance,
Saritha.
You need to set the CSS z-index property for the calendar to a higher value than the popup's z-index.
I had the same problem and Using z-index didn't work for me. I removed all z-index values from style sheets instead, and so far it worked.
Hope it can be of use for you.
G.
I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.
I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?
What I have tried so far
I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.
Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div
Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4
So whats the best/easiest way to do this?
How can I remove the style around
links?
Or can I use a single image CSS sliding door method? To reduce HTTP request.
Ok I figured it out
See soultion here http://jsbin.com/uraya5/10/
I had to:
Set width to 19% of each button for
some reason there is spacing between
each button so 20% does not work.
Set ui-bar-a background to black so
it hides the spaces between my
images
Use this JS code to navigate pages $.mobile.changePage($("#about"),
"flip", true, true);
I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.