I'm not sure if there is another post similar to this one but I'm hoping this can be a simple fix for someone better as css than me.
See the example here: https://svelte.dev/repl/e7d663de324043f98613b8fe35b8d78f?version=3.47.0
I build the example in Svelte repl but the issue is with the html and css.
The problem is that the dropdown part of the SimpleSelector is hidden behind the other rows below it.
I've tried to set the z-order but that doesn't seem to work. I tried playing with the display attribute and position but I can't seem to get this to work the way I want.
Try clicking on the textbox on any row. You'll see part of the dropdown but the rest is hidden.
Thanks in advance for any help.
I figured it out.
It seems that the z-index had to be set separately for each row.
For example, if there are 100 rows, the first row should have z-index: 100, the second row, z-index: 99, the third, z-index: 98 and so on.
That seemed to have done the trick.
Here is a link to the updated REPL: https://svelte.dev/repl/e84a80ef53a64af6975705407ddff040?version=3.48.0
However, in the end, I redesigned how the interface will work and I will not be editing inline in the table anymore so I won't be using this solution.
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'm using FullCalendar with the resource library that you can see in my JSFIDDLE
How you can see the problem of the resource (first column, second column) is the overlapping. Seems infact if the resource have a long name go to overlap the near column and this is bad for me. What I want is cut the resource name if exceeds a certan lenght, anyway, the label must not overlap the next cell.
Issue image:
Final result
Something like: First col | Second col
You seem to want to hide the overflow.
Your calendar's table header elements are overflowing into each other.
CSS:
#calendar tr th div.col-label{
overflow-x: hidden;
}
This will make the overflowing text not draw instead of drawing on the next cells.
EDIT: Fixed this making the events disappear
EDIT 2: Fixed messing up the Date Label
Another way to solve your problem is by setting a min-width property on your columns in order to ensure that each one will have enough space available to store it's data. And then use width:100%; property on your labels. Maybe use some padding as well in order to make it look nice. Let me know if this helped :)
I've really strange behavior and I spent a couple of days to try to figure out what is a problem.
MooTools methods makes my input fields not clickable, and I don't know why.
$$('.class1.class2').makeResizable({
});
Above piece of code needs to make all children of div which has class 'class1' & 'class2' to be re-sizable, and that works perfectly but beside that it also makes input fields not clickable.
Does anybody had the similar problem?
Any kind of help will be appreciate.
Thanks
so the problem is that you have no handle passed in. when you fail to do that, the whole element becomes a listener for mousedown and attempts to click into any child element will not bubble correctly, resulting in weird behaviour.
I also found a bug in the logic for adding handlers, which seems to not evaluate handles correctly
https://github.com/mootools/mootools-more/blob/master/Source/Drag/Drag.js#L66 is wrong on many levels - it expects a collection / array of elements but looks in the global document and not child elements - yet it ends up picking element anyway and ignores passed collections like $$('.class1 .resizer')
i did a small change to accept a string for a child selector and added a resize handler.
http://jsfiddle.net/pbu5uzho/
you should submit this bug to https://github.com/mootools/mootools-more/issues though i doubt it will get picked up.
$$('.class1').makeResizable({
handle: '.resizer'
});
the change I did to make this work was:
this.handles = this.element.getElements(this.options.handle);
alternatively, you can use something like InteractJS to handle this.
I'm not 100% sure but can you try this one
I think you are missing (,)
$$('.class1,.class2').makeResizable({
});
I'm trying to re-make an existing ASP.Net page which generates labels. The original uses hideous tables-within tables-within tables to force a layout, and as our order quantity has increased it's now got to the point where it's spitting out 65k lines of HTML assuming it doesn't time out first.
I've replaced it with an unordered list for my list of lables, with each list item floated, and the on-screen layout is now perfect. For print, it's 4 labels per page, one in each corner.
However, at least in IE-land, go to print preview and it goes back to being a vertical list.
Any thoughts?
make sure you are using a float:... in your css of li class it will fix it :)
Let me know if that helps
Changed from UL/LI elements to the ubiquitous DIV, and placed every set of 4 inside a container which did the job. Still none the wiser about why FireFox, Chrome and IE all ignored float:left in print though, but it's working now.