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.
Related
I've implemented an autocomplete multi-select field based on the Downshift with Popper Material-UI demo. That worked well up until I tried to reuse the component within a Material-UI Dialog. The Popper appears behind the mask of the Dialog.
I've modified the Material-UI demo as an example of this behavior: https://codesandbox.io/s/76moj1mq1.
Looking at Material-UI's old auto-complete solution, it use to use Popover instead of Popper. I tried substituting that in to see if it's z-index would be higher than that of the Dialog, but I think Popover steals focus from Downshift in a way that triggers the autocomplete to close immediately after it opens. Here's an example, again modifying Material-UI's demo https://codesandbox.io/s/wk84p1myz7.
Any ideas on how I can make either approach work?
Overriding z-index on the Popper to be above the 1300 that Material-UI defaults dialogs to works, but I was hoping to avoid having to do that if possible.
I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.
Continuing with ZK studies, i had improved my knowledge about data binding and some .zul files components properties. So i read about properties of the Grids from here:
https://www.zkoss.org/wiki/ZK_Component_Reference/Data/Grid
My goal this time is to change the grid's paging button size (example of grid)
https://www.zkoss.org/_w/images/b/b9/ZKComRef_Grid_Paging.png
The document tells about paging, paginal properties and sorting but there is nothing about the property related with the buttons generated on the grid. Any suggestions about it? i'm glad to hear them out. Thanks for your time and attention.
These are things we need to solve with css.
I'll try to explain how we come to this, so you can css almost everything.
First of all, open your browser developertools and inspect the button element.
When you do that, you see what css class is added to that button.
In all 4 buttons we find the css class : z-paging-button
With this info we can adjust our css (in a css file or for fast local changes in a zul file with the style tag.)
<style>
.z-paging-button {
width:300px;
}
</style>
Sometimes, it's possible the css won't take, just try adding !important in the css.
Some example where you need to do this is for black digits in an disabled datebox :
<datebox disabled="true" style="color:black !important;" />
I've been given the task to try and fix an issue on this site:
[redacted]
When you tap below the bottom half of the screen on an iPhone 5, taps aren't registering and so links can't be clicked, etc.
I tried debugging by alerting what element is tapped, and nothing is registering below the halfway point. If you scroll down the page so the link you want to click is above the top half, it works perfectly fine.
I've searched around and there seems to be some issues with iPhone 5 apps (as far as I can tell, I'm not an app developer!) but I can't seem to find anyone having the same error on a responsive website.
What's going on - is it something to do with the viewport?
It looks like in your DOM you have an <iframe "id=FirebugUI"> that sits right below your element. It has some inline styles that include visibility:hidden; and a z-index of a super large number which means it's a hidden element that is on top of everything. You have some options:
1 - Get rid of it if you're familiar with what firebugUI is and can comfortably remove it all together. then you're good to go. It's probably being injected with some javascript.
2 - display none - you can add this css to remove it:
#FirebugUI {
display: none !important;
}
You'll need to add the important to the value so it overrides the inline styles. This may render the FirebugUI useless though.
3 - z index - you can update the z-index by setting it to like 0. But that will probably render this thing useless. so you might as well just remove this plugin if you're going to do that. You'll also need to use the !important value to override the inline styles.
I am trying to achieve the same effect facebook has with wrapping your status if it's too long.
Try to set your status to something like 300 "A" characters with a webkit user agent. How do they do that?
Yes... I know you can use:
word-wrap: break-word
I googled alot and all these tricks only work if you can set the width in advance, which I cannot.
My width is adjusting to 100% screen size to allow stretching when resizing (landscape).
So to sum this up, how can I achieve text wrap without giving a specific width to the element or a parent element, without using JS, under webkit only browser?
I could notice that FB use this property on the parent container:
-webkit-box-sizing: content-box
But I was not able to apply this to my case...
I would assume it's done this way with a server side language before given to the front-end. You typically want to stay away from content manipulation when you have such a large user base. There is a new CSS3 property that will do this for you, but it's not widely supported.
text-overflow:ellipsis;
More info can be found via Google
I think I know what you are looking for,
The trick is the combo of:
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
See this jsfiddle for a demonstration http://jsfiddle.net/bPsav/