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.
Related
Hi I have a responsive website. All the DIVs container depend of their parents and I use a lot width and height 100%.
I see that Arjs is setting fixed dimensions to the body.
I thought that I did something wrong but in the official example is happening the same:
My goal is to have some html elements on front of the camera but the fixed dimensions are affecting my CSS. Is there a way to control this?
I tried this configuration for tests but I did not see any change:
arjs="sourceWidth:480; sourceHeight:480; displayWidth: 480; displayHeight: 480"
You should use the "embedded" component on the tag, it will remove the automatic css fullscreen styles that A-Frame adds by default. You can find more details here in the documentation.
I have fixed it using position "fixed" in all my elements.
Making position "fixed" in all elements is helpful but not enough.
And still making custom elements acting weird or overflow from the screen.
Simply add these may help:
html {
width: 100vw;
height: 100%;
overflow: hidden;
}
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 🤦♂️
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
I followed this css-tricks how-to, to implement a sticky footer. I was successful but noticed that the (min)-height:100% has an negative effect on when I try to apply a margin-left of right to my primaryContent div.
At a certain height it causes a block of whitespace to show up. The only work-around I've found so far is to use padding instead of margin.
The height that this happens can be seen in my screenshot below. And I also notice if I remove the "background:inherit" line from #primaryContent div that the background of the container div stops at the same height that the margin white space problem occurs.
Any type of help is appreciated, links to the source code are:
default.css
index.html
reset.css
Screenshot:
very strage how they let that slip here is a fix :D
look for this in the default.css
html, body, #container {
height: 100%;
}
replace it with
html, body {
height: 100%;
}
Im not completely sure what the explanation for why this happens it could just be an css bug but there is always a work around.
bada-bing your done!
Click the "Reference Link" at the bottom of your example URL....it points to the original source: http://www.cssstickyfooter.com/.
If you click the "How to Use the Sticky Footer Code", you'll find that because the way their/his solution is written - padding for height attributes is proper - not margins.
I read through the documentation a week or so ago - thought I saw that caveat. <find>+padding will take you right to the notation.
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;.