I have got a table with a scroll with the style "overflow-x:visible" to the scroll. But when I move the horizontal scroll It look like this 1
I tried applying position : absolute and the overflow problem was solved but the table pasted with the bottom of the top div and the first table header's name dissapear, looking like this 2
Thanks Mayank for your answer, I make the changes but the problem persists, because now I have two horizontal scrollbars, one always visible but too short to show all the table and the other only appears on the bottom of the table and it's only visible if you move down using the lateral scrollbar.
In the first screenshot, you can see the double scroll
In the second screenshot, you can see that in the top of the table you can't see the other columns but the scrollbar is to short to use it
Related
I have a mat-dialog which contains a mat-stepper. Inside this stepper, I have a step which contains a form. In this form I have multiple elements (list, mat-card and table) which I want to always fill the height of the dialog. Basically, I want the height of the table and also the height of the list on the left side of the table to adjust to the dialog height. The mat-card, which is shown when selecting an item in the list, should always be at the bottom left of the dialog and the list above it should either show all elements (if possible) or display a scroll bar if there is not enough space left to show all elements. The table should also either show all elements if there is enough space or display a scroll bar if there isn't enough space. I do not want any of the elements in this dialog to cause an overflow which would require me to scroll in the actual dialog.
A colleague attempted to solve this by using max-height: calc(90vh - <x>px) before but this really does not work very well at all. How can I do this properly?
Here is a stackblitz which shows the problem:
Stackblitz
Hopefully, my question is clear. If not, please let me know and I will try my best to explain it in more detail.
Your problem is quite simple, the content of the dialog does not fit the height of your dialog.
Every child of the dialog mat-dialog-content, mat-stepper etc, should be maximizing their height (either with height:100% or flex:1 in a flex container).
Here is a quick example of this.
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...
I'll try to simplify my problem to make it easier to understand.
I want to be able to add lines of text (using javascript) to the document at the bottom of the page.
When a new line is pushed, it's added at the bottom, pushing all the previous lines up.
The document should be padded and when the content overflows the older lines (top ones) should be hidden or using scroll in which case it should be scrolled to the bottom.
I've been trying to accomplish this for a while now but I can't any elegant solutions.
Any ideas? css3 is more than welcomed.
Thanks.
There is an HTML element do this by default it is UL just include it inside an fixed height div with overflow and some focus on the last LI!
I have a special request, click here. to look the case.
Once I click over the arrow down and the div collapses, I need to make fixed the first table in the div collapsing and making scroll the other table below.
I hope the explanation is clear. How would you achieve that?
Can anyone tell me how to fix the DIV Overlap here
http://www.zomghentai.com/daiakuji-episode-7-sub/
The Video Source 1 and Video Source 2 buttons are overlapping on the title bar.
**Note, also, for some reason...if I put float:left; in the span.sources, the hyperlink on the buttons disappear, any thoughts on that?
Edit ** Problem has been fixed. I had to add Float left to a bunch of divs ones after another.
Try to position the two buttons relatively