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 🤦♂️
Related
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
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
I have a problem with a fluid layout, made using bootstrap and a fixed element made by the bootstrap affix plugin.
What I’d like to achieve is a compound view like on Android tablets, where you have left a list of elements and when you click on one you see the details of that element on the right hand side.
My problem is that as soon as the plugin attaches the affix class to the right side it is taken “out” of the page and the width is strange. The affix class makes the element to have position: fixed. And that makes the width to no longer be relative to the parent, but to the document.
I’ve made a pen of my simplified testcase. You have to scroll to see the effect happening.
http://codepen.io/anon/pen/zDieo
Thank you very much for your time
A quick fix would be add this to your css
.affix , .affix-top {
width: 800px;
}
Modified Code : http://codepen.io/anon/pen/gBHca
Try this - codepen
And read this - question
I've embedded a Facebook Comment box into my site (http://ponycountdown.com), but the div it is contained within doesn't expand to accommodate it. Does anyone know what causes this, and if there is a way around it?
To see the problem in action, click the comments tab on the left of that page.
An additional query - is it possible to reverse the order of comments so that the most recent is on top? I tried adding reverse="true", but it doesn't have any effect.
Change height of the div to min-height in CSS.
In other words, use min-height: 392px instead of height: 392px.
This way it will expand and not be of fixed height as it is now. Hope this helps.
I would suggest to add the following to the slide-out-div class:
overflow-y: auto;
overflow-x: hidden;
With some additional styling this will create a scrollbar when the facebook comments overflow downwards.
I have been using a lot of position:relative; in my design, I just find it the easiest way to get everything where I need them to be.
However, the more items I add on my site (each one with their individual div) each one ends up further and further at the bottom of my page, so I have to manually position them higher.
This leaves a lot of empty space at the bottom, and I thought that adding height: 1000px; would limit the scrolling a bit, but this method doesn't seem to work.
I've even tried adding height: 1000px; to the wrapper and it's still not working.
How can I limit vertical scrolling, to the number of pixels I choose?
Thanks so much in advance.
Wait, so you are creating a div, using position relative to move the content of the div to the correct location, and the issue being that the div tag itself is still in the same place and creating a vertical scroll even though there is no content there?
If so you should look into floats.
Here are some tutorials.
Floatutorial
Learn CSS Positioning in Ten Steps
You can specify both the height and the overflow:
.someClass
{
height:1000px;
overflow:scroll;
}
The most common values for overflow are scroll, auto, and hidden.
To limit the distance someone can scroll, I think you'd need to use JavaScript. I'm not sure how, but I can't think of anything in CSS that would do that.
If you are looking to set when something should scroll instead of just be cut off or expand the tag, use overflow:auto;.