I have layout where on left side there is a mat-table - which is restricted in its height to 4 rows and on the right side a mat-card. The idea is to display the content of a selected row next to the table. Basically it should look like:
I put the two items in a grid layout. The problem I'm facing? If the mat-card-content is far too much it goes over the boundary and looks quite nasty:
I tried to fix it but didn't succeed. How to fix it for this layout? If there is some kind math required for the CSS I would appreciate if the calculation can be tracked - since I need it little bit different in my project.
UPDATE: Forgotten the link for the code
I just add this class and worked!
mat-card-content {
overflow-y: scroll;
max-height: 80px;
}
you can change max-height as much as you want.
https://stackblitz.com/edit/angular-wcpe6e-bjfyza?file=src/app/table-basic-example.css
Related
I have a table at the bottom of my page with rows of select2 dropdowns.
Unless I pad the bottom the select2 won't trigger. Even then I need to adust my CSS to eliminate the wrapper div overflow-y: auto;
Before (with overflow-y: auto;):
After (cleared overflow-y: auto;)
Any initial thoughts on where to start looking to adjust the CSS on this or perhaps a Select2 option? Ideally the wrapper div would just expand as required for the select and avoid the excess padding.
UPDATE
I looked again - it seems like I may have been mistaken. It looks like the select2 is in fact trying to display upwards when at the bottom of the screen. Working a codepen to reproduce this.
Took some head banging but sorted it out. I have these selects originally in a modal. I had to add this to make that work:
dropdownParent: $(this).parent()
This was the issue all along 🤦♂️
Hi I don't know how to solve this...
I want the element marked with a red rectangle in the images to move depending on the size of the screen ALIGNED to the containers below ALL THE TIME. I'm making a responsive website with the different media screen instances but I want to be sure that this element keeps in the same alignment all the time. How do I do that? No JS please.
http://www.awesomescreenshot.com/image/58399/669844960fdd9761084f64bae5d29112
since you haven't provided any code for what you have so far its difficult to help you. However, I think I understand what you need and you need to specify some width constraints to accomplish this:
you will need a container inside the header that will have the same width as the content below. Here is a working fiddle
css {
width: X%;
}
Im making a page with bootstrap 2 due to job requirements and facing the following challenge, please understand Im learning it ;)
I have one #mainDiv below a div with my namespace for bootstrap .bootstrapDiv
Below that I have one .row-fluid, under them 2 .span12, here is my problem;
I need to be able to put together with margin-right:0 first one and margin-left:0 second one, these two divs should fill the row respecting the general layout of the rest of rows.
How I see them is ok in the left but at right is missing this gutter width and doesnt looks nice at all, is there any special class that expands the row and its contents horizontally if you take out the iner horizontal margins of the elements in it?
How should you solve this problem normally?
EDIT
Here is my fiddle:
http://jsfiddle.net/qdb74/
im refering to the black space
I usually solve problems like this by creating my own CSS or extending Bootstrap. That is because Bootstrap doesn't have an option to modify the gutter for .row-fluid. Here is an example on how to extend Bootstrap:
.row-fluid [class*="span"].no-gutter {
margin: 0;
}
.row-fluid .span6.no-gutter {
width: 50%;
}
.row-fluid .span5.no-gutter {
width: 41.666666666666666%
}
...
And you can decorate your element like this:
<div class="firstDiv span6 no-gutter"></div>
However if you decide to extend Bootstrap and a new version of the framework comes out this might break. If that is a concern it might be better to create your own fluid grid without gutters. That option will require you to write a bit more CSS than this.
I am porting my application from WPF to HTML/Javascript and am having trouble with the layout that I need for my application.
This layout should take up the entire available screen. It will actually be put into a jquery ui tab so with the menu, logo, and tabs it technically it won't be the entire screen. I have gotten parts of this to work but not all together.
The left side is going to have a custom slippy map and I would like it to take up as much space as available both horizontally and vertically.
The right side is going to have some filters at the top and bottom with the middle showing them results from the filters. The results could be pretty long so it needs to scroll vertically if to much content is pulled from the web server.
All I need help with is the basic layout to support this. Any help would be appreciated. You can see my layout drawing below. Thanks in advance!
In that div, add style="max-width: 350px; overflow-y: scroll;"
First, you need something like this (It's called Fluid - Fixed layout), here's an example you can take from Dynamic Drive http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/. With the exception that you need to "invert" the margins and widths (replacing left to right) because of the example is the opposite of your layout.
Secondly, you need to put your 2nd div (350x50) at the bottom of the page. Some thing you can do, is setting that div so it has the following:
#small_box
{
position: absolute;
right: 0;
bottom: 0;
...
}
The link above does work even on IE6+
Hope It helps.
I have just decided to use relative positioning and a little javascript. Spent hours looking for an elegant solution with no results and it only took me a few minutes once I decided to use javascript. Something like this is so easy to do in WPF so it was surprising. I basically just attach to the window.onresize event and manually set the height of the right vertically expanding scrollbar. Thanks for your suggestions anyways.
I have several divs on a page that all have the same width but different heights. They are all in one div, the #note1PreviewDiv. They all share the class .note, which has the following css code (among other):
.note{
width: 160px;
padding: 10px;
margin: 10px;
background: #e3f0ff;
float: left;
}
I thought with float: left; they would all automatically align so that they are well aligned among each other.
Here's a preview of what it looks like:
Current state http://posti.sh/img/ist.png
And here's what the positioning should be like:
Desired state http://posti.sh/img/soll.png
I think you get the idea. Somehow it seems to me the height of the leftmost div pushes the other divs in the second row to the right - but that's only guessing.
Thanks for your help!
Charles
You're not going to be able to do this easily with CSS only.
CSS3 has a new feature called column layout, but browser support is not great. IE9 and below don't support it.
See http://designshack.net/articles/css/masonry/ and the last example for CSS3 solution.
Have a look at these js / jQuery options for easier implementation and browser support:
masonry
isotope
vanilla masonry which doesn't need jQuery.
wookmark
The kind of lay out you want is really difficult (not possible?) without going for a column based approach and adding additional block elements to represent each column. This obviously won't work with a flexible number of columns if you want a dynamic layout based on screen size.
That said, you could always use JavaScript to dynamically place elements into columns, and get it to match the screen size.
Is the height of the parent container given a fixed value? If it is, try setting the height of the parent container to auto, and the overlow propery to hidden.