Ant Design Table VueJS issues - css

I am right now trying to have a text area input within my ant design table for VUE. However, it seems that the input box has some problems because the height of the input box will make the fixed column does not align with the current box height.
I'm wondering how I can solve this problem. Any help will be greatly appreciated. I've attached my screenshot for problems for reference.
I'm trying to set the z-index for that, but it seems that I don't have the correct parent item to be detached from the text area box.
The original table instruction can be found:https://2x.antdv.com/components/table-cn#components-table-demo-fixed-columns-header

Related

Angular Material: Textarea with fixed height

I want to have a page which has two main components. On the upper half a textarea on the lower half some input fields. The split should be 50:50. The problem I'm facing:
I cannot tell the textarea to fill the complete height when displayed. I know I can use some cdk..MinRows or ...MaxRows but therefore I need to know the whole height before. Additionally the underline looks also quite strange, e.g.
How to fix it? Does it work with Material or should I use plain HTML textarea? My project

Can i make tree graph where button means leaf?

id like to do something like tree graph with buttons. Idk how to explain my idea so ive created image. I build my website via Elementor. Is it even possible please?
My image
You can do this in one section using buttons and dividers, set width for the divider, and set it using margin and padding

slider revolution - text elements overlapping

Been using Slider Revolution on WordPress recently for a new client and having one big issue that I cannot find an answer to.
SITUATION
- I have 2 text elements, a Title text element and a Description text element (one above the other - vertically stacked)
- They have been manually placed to be aligned-left inside the slider area.
- I have them with a fixed width so they only cover the left side of the slider panel
- I have them set for auto-wrap so words do not get cut off and the test will drop to another line if needed.
PROBLEM
With this configuration, if the Title text element is too long (too many words) it will dynamically expand vertically (drop down lines) and cover up or overlap the description text element box below it.
SOLUTION
I would like to find a way to "link" or "hook" these 2 elements together (stacked one on top of the other with little space) so they do not overlap and the top element will automatically push down the 2nd text element box. Is it an html issue? a z-index issue? a placement process issue?
In the image I provided, you can see the difference between a 1, 2 & 3 line TITLE, and how the space between them is fixed. HOW DO I GET IT TO BE DYNAMIC? I apologize if this has been answered before, but I have searched for hours and cannot find an answer. Maybe I am searching with the wrong keywords.
slider-revolution-examples
This is a common situation with Revolution Slider when we use different text elements since they will be different layers and used with position:absolute.
The best solution for this is to merge all the text elements inside one element using basic HTML and style them as needed inside this element. Like this we only have one element used with position:absolute and inside it we have well formed HTML.

Nativescript: How to overlay one StackLayout over another StackLayout

I have a search suggestion component that is displayed under a TextField. whenever text is entered into the TextField the search suggestion component displays a list of possible matches based on the current entered text... I have more content under the TextField that gets pushed to the bottom whenever the Search suggestion gets populated with results. Is there any way to overlay the search suggestions over the content underneath it instead of pushing the content down? in HTML/css I would apply the position absolute and z-index css properties to the search suggestion component but this doesn't seem to be the case in Nativescript. I see that Nativescript does support the z-index css property but just applying that doesn't seem to do anything. It doesn't look like Nativescript supports the position property... Any idea how I can make this work/what i'm missing?
You have a couple quick options. One is to use a grid as mentioned in the comments. Set the views on the same row/col. This is the same as stacking views on the z axis. Or an absolute layout and use the same positioning of the views within that layout.

Dynamic table-width doesn't adjust properly

I'm trying to build a genealogy tree with HTML tables (and nested tables). It should, ultimately be editable by the user using contenteditable, and the nested cells should resize accordingly.
However, to my mystery, when I edit the cells, they resize far too fast and too much. Why so?
The outer table keeps everything under control, so sizes are fixed using
table-layout:fixed;
The nested table cells, on the other hand are only specified via
margin:auto;
Every cell's width is set individually via percentage, and it looks perfect before editing. Not so after.
DEMO here http://jsfiddle.net/KtB6C/
Try editing the Father or Mother cell.
I know this is a "fix-my-code" problem, but any help is appreciated.

Resources