I have a site that is a fixed width, within the content area I am displaying a log viewer.
The log viewer is hard to read as it is confined by the fixed width of the site and the log lines are quite long.
What I want to do is above the log viewer have a button that says "Expand", when clicked the log viewer's width would grow to be just slightly less than the size of the viewport.
The rest of the site would still remaine fixed width but the log viewer would be as wide as the screen.
I've drawn an image of what I want to achieve here:
http://imgup.co.nz/3940
I have tried setting "position: absolute; left: 20px" (As well as setting the width) but this causes the footer of my site to move up to be under the log viewer (As the log viewer is no longer increasing the height of the content area).
I'm not sure what to do, it should all be css related I believe.
Any help would be much appreciated!
Try this: http://jsfiddle.net/h4C2p/
EDIT: Sorry, that won't work for different widths. Here is one that works:http://jsfiddle.net/h4C2p/1/
if you don't mind setting a height for the content area, set it for the parent of the element of wherever you show the log.
or, don't wrap everything in one tag. ie. have separate header, content, footer, that normally have the same width and are centered, but when you click expand, the content.. expands
Related
Here is a code sandbox that defines a Logs React component and works great.
It uses react-scroll-to-bottom to show a page with a header and some logs. Note that because we use a flexbox, the size of log section grows perfectly to fit the height of the screen.
Now I want to place this Logs component inside an App component. The problem is that now the log section is too tall and another scrollbar appears in addition to the scroll-to-bottom scrollbar. You can see this here.
I think this is because we use 100vh for the height of the Logs component. The problem is, if I change this to 100%, ScrollToBottom breaks and displays the full log content as if it were a normal div. It seems like ScrollToBottom requires a specific type of height such as px, em or vh to work. I'm not sure where to go from here.
How do I grow ScrollToBottom to fill the height of the screen?
This issue is indeed with using 100vh. You're not accounting for the height of the header. You could change the height to something like 90vh and it seems to work. Or even give it a defined height in px.
I am trying to find the source of a bottom border in my small personal website. I have a processing sketch in the background that I'm trying to stretch to the full size of the page. I also want my body element to render from top to bottom.
This is my issue:
I made the html background a garish yellow for high-visibility.
I have a div holding the sketch for absolute positioning with no margin and no padding.
Inspect element doesn't reveal where the space is coming from and I've tested it in FF and in Safari.
Here is the page: My Personal Page (http://asperw.me)
My research on this question turns up results where top margins had collapsed or there was a random top padding but I'm fairly sure neither of those my culprit.
Thank you.
Edit: I should mention that I don't think the problem is with the sketch as the height of it is equal to the height of the body element. You can also right-click and view image and it doesn't have the bottom border there.
UPDATE: I originally thought this was something between MatchHeight and FlowType but it now appears to be an issue with using flexbox css. I commented out the flex css and FlowType works, but I need it to work with flexbox. Any ideas?
ORIGINAL QUESTION:
I have a page where I have 5 blocks with text and images in them. They are organized in a row and I am using matchheight.js to keep them all the same height and FlowType.js so the text will resize within the boxes and keep the proper layout.
Ideally the header text should all be the same size across the boxes as well as the body text.
However when the page first loads some of the boxes have different size text than the others - even though they all have the same base font size and the boxes are the same size.
When I adjust the size of the window everything recalculates and the font sizes become uniform. What is missing when the page loads that causes the text to not size correctly and/or is there a way to trigger the recalculation without resizing the window.
Here is the code I use to call the js.
$(document).ready(function() {
$('.front-page-guide').flowtype({
maxFont: 40,
});
$('.front-page-guide').matchHeight();
});
Here is a codepen: http://codepen.io/dll416/pen/xgeeoz
So you can see the html and css and see it in action.
The viewport has to be 1200px or below to see the issue.
Thx.
I have to place the content of service provider in an iframe on parent website.
The height of the iframe content would dynamically change depending on user interaction.
Problem I face is that there is some extra height added to the iframe. I'm not sure where the height is coming from.
Any insight appreciated.
LINK TO PAGE
I don't believe this to be the fault of easyXDM.
It appears that the height being calculated is for the current width of the iframe. If you remove line 28 in your HTML file, you will see that the height is completely filled. (Or the following line) (Or you can leave the code as is, and disable the height style in your developer tools and see the result)
this.container.getElementsByTagName("iframe")[0].style.width = "500px";
Since it's hard to modify the code in the debugger, the next thing I would try is, setting the width to what you would like it to be prior to filling with content and a calculated height.
I had the same problem
When you do assign the height to the iframe element, don't assign it to all iframe. Because it affects iframes in the Ads and social media plugins.
So I did the following
$('#divID iframe').height(easyXDMmessage);
$('#divID iframe').width('100%');
In the case of empty iframes, I ran into an issue where if you set the height to 0px, the parent block element will still show at least one line of empty text. This is because iframes are actually inline elements, so their parent block will still show one line-height of text even if the iframe itself is zero height. Here's the simple fix:
iframe#my_iframe { display:block; }
So I've got a page that shows an image with some absolutely positioned text on top of it.
I want to write a print style sheet for it so that:
the image is resized to fit the width of the page
the text is repositioned and resized to maintain relative position and size with the image behind it
So I know I can do (1) with just max-width: 100%, but I'm not sure how to accomplish (2). I'm okay with using some javascript if necessary, but I wanted to know if there's a way to do this in pure CSS. If I do need to use javascript, what can I hook to check for the pixel width of the image in the printed page? Just use the calculated width as normal?
And yes, this question might be more appropriate for DocType, but I've yet to get any help over there.
My problem was that I had set overflow: auto in the main div, which was causing the contents to overflow the printed page.
To fix it, all I needed to do was set overflow: none.
The overflow: auto was what was making it print like
(source: github.com)
I think you could happily leave it to the printer driver if you trim off the whitespace around the images, and then replace the margins on-screen with css, and the remove it again in a print-media stylesheet. Buiding-in the page margins is going to cause problems.