I have a YUI dialog with z-index set to 1000. Then there is a little ul/li based (not a select) dropdown on the parent page which has a z-index 100. This (always) works perfect on my dev box - the dropdown goes behind the dialog.
But on a staging site, I get a strange behavior where the dropdown peeps through the dialog. When I check the dialog z-index using firebug, it is set to 4! The dropdown z-index is still 100. This happens only for particular cases.
I was wondering what might be causing to change the z-index of the dialog to 4 when my code sets it to 1000.
Since the problem is only happening for "particular cases," it sounds like a bug in your sw rather than in yui.
Some ideas:
Carefully check your css in the "particular cases" to make sure that your css file is not over-riding the z-index value. (Your css should not set the zindex value if it is being set programmatically by YUI dialog.)
Check your code where you create the dialog to ensure that your z-index setting has been set for each instantiation of the dialog. It could be that the z-index is being reset when the dialog is hidden.
Related
The Goal
I want to have a v-data-table that is editable and looks "nice".
The problem
Adding a v-text-field to make it editable also increases the row-height to a very eye unpleasing level
Original view:
With v-text-field inputs
The quesion
How can I decrease the row height to resemble the one without v-text-fields.
As a Bonus
Because I am quite new to this whole Front-End-Development-Kind-Of-Thing, how would I go about it identifying what is causing this "height issue"?
PS: I've tried to add a JSFiddle but I cant even seem to be unable to figure out how to display the v-data-table correctly...
The basic draft can be found here
Is it necessary for your table to be editable within the columns? How do you decide when to pass data back via request to your Backend? After the user left a field?
If it is not necessary to have the edit option within the table, I would just use the action buttons you already have in your table to trigger a modal in which you can edit the fields. This also allows you to have proper form control before a user can submit a request. There is also a Vuetify Codepen with an example how to do this Codepen
If it is necessary you should implement the v-data-table as v-data-iterator which is essentially the same functionality-wise, but allows for complete control over the look. https://vuetifyjs.com/en/components/data-iterators/
As to how to identify the problem with the v-text-field height you have to use your browser dev tools. You would then realise that the input has default paddings and margins but also a whole lot under the hood. It e.g. allocates space for error messages to pop up and for a label to go above the field.
And how to fix your JSfiddle you can read in the getting started section of the vuetify documentation under CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn.
you can use the "dense" property for Lower height of v-data-table inputs
https://vuetifyjs.com/en/components/data-tables/#dense
I am having issues of getting the following selection boxes to appear correctly. When you select like "Package" the dropdown menu is behind the "template" selection box.
I have tried many things to try and get the dropbox to be above the selection box, but nothing seems to work.
website
Thanks for any help.
I managed to resolve the issue by removing the z-index: 10; attribute of the .mfSelect class in style.css:3135.
I believe the problem lies in the stacking context of the elements which is affected by more than just the z-index.
I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)
How to check whether a DIV style property pointer event is none in the code behind using if else statement?
I have to store the value of 1 in a variable if the DIV pointer event property is set to none and 0 if it is set to auto.
You can use getComputedStyle() to get a CSS property value.
However it may be helpful for you to explain what the "code behind" is. Sounds like you might be working server side, so there may be more to it.
I used panel in place of DIV initially disabled later I enabled it on radio button check through java_ script.
In Internet Explorer 10 the behavior of drop-down boxes (<select> element) has changed: when expanding the box, instead of placing the list of options below the field, the list overlays the field, with the list positioned so that the currently-selected element is centered over the input field.
This is a little hard to describe, so here's a jsFiddle that shows it.
Our users are finding this behavior very confusing. Is there anything I can do in CSS to make the box behave like it did in IE9, and like every other major browser? (Perhaps something like the -ms-clear pseudo-element that hides the clear button in IE10 text input fields.)
Here's a sort of time-lapse screenshot:
One option is dynamically change size property of the select to the number of options (or a fixed number - if you have too many options). You would do it on mouse-down, and change it back on-change.
Style, Position of select as well as additional events will have to be tweaked - but here is the proof of concept: http://jsfiddle.net/KnAXL/1/