I'm using google prettyprint to display code, the problem is that my code sections will not resize to be scrollable unless I set a max-width on them. But I can't set the max-width to the device width, at least I can't figure out how to do that.
Is there a better way to do this?
The problem is when it shows up on mobile it will be as wide as the longest line of code...
Related
Currently I have set the left menu of page with percentage 20% of body width. However, I'm using this to make the menu stay the same place when I zoom the page. Now i want to use pixel for it,but i know when using fixed pixel, if we change screen,the menu width still stay the same and it look imbalance.
I have searched around and found 2 ways : using media query or using javascript trick. If i using query, i have to repeat for many different resolutions. The Javascript way seem to be dirty.
So, is there any other way to dinamycally change the size of element base on screen size with pixel ? I see web like Facebook or W3school have the left menu in pixel,and when i open the page in a bigger screen,the width increase. How can i do like that ?
I am currently facing an issue with browser resizing. When the page is at full size (i.e. the browser window is not being minimised), the page works well, yielding this:
However, when I minimise the window, making it smaller by compressing it vertically, this happens:
The content is cut off, and I cannot scroll to view the full content in the resized browser window.
I understand that this is a common issue. I have tried to resolve this by ensuring that:
any widths are in terms of % (and indeed, everything scales well
with respect to the width)
heights are auto (so that they wrap the necessary content)
When that did not work out, I replaced the height values with % values instead of simply using auto, making sure that the total height values did not exceed 100%. Unfortunately, that did not work out either. Any idea why, and what I can do to make this work? Thanks in advance!
My HTML and CSS can be found here: https://codepen.io/anon/pen/yoBEWb
try changing height: 100vh; with min-height: 100vh;
You can use Media queries to resize properly your screen and adapt your content. Basically a media query is something like a rule saying for example : if my screen height is less or equal to 480px then please reduce the font-size, place it below...More info here.
I have a QTextBrowser object in my dialog which will have HTML written to it. It is in a vertical layout with several other objects. I have the vertical size policy currently set to MinimumExpanding for this QTextbrowser. The problem is if the HTML written to the browser ends up taller than the QTextBrowser's minimum set height, its height stays the same and it instead makes me scroll down through the browser to see all the data, where I would like it instead to show all the data at once. I have tried changing around the size policies for the QTextBrowser and the layout it is in, but nothing I have tried has worked. Is there a way to do this that I am overlooking?
QTextBrowser *m_text=new QTextBrowser;
m_text->setFixedHeight(m_text->document()->size().height());
wish to help you.
If you know how many lines you are going to add then you can work out a height and then set that height.
int number_of_lines; // If you can get this value from somewhere this should work
// Get the height of the font being used
QFontMetrics font_metrics(ui->text_browser->font());
int font_height = font_metrics.height();
// Get the height by multiplying number of lines by font height, Maybe add to this a bit for a slight margin?
int height = font_height * number_of_lines;
// Set the height to the text broswer
ui->text_browser->setMinimumHeight(height);
ui->text_browser->setMaximumHeight(height);
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
This is more of a general question; but I notice on some webistes (including stackoverflow) That when content is off the screen and the user has to scroll to the right background images/color stop at 100% of the screen view. Does anyone have a better idea how to fix this.... other than setting max and min widths?
here is a google doc of two different websites to explain what I am talking about.
https://docs.google.com/document/d/133Uek4Fd3G3eB6Zz4CNomPGzARevCUg4fAV4Xhvin-o/edit?usp=sharing
Josh C's response is spot on. If the elements that have background colours had min-widths that matched the content width (980px in stackoverflow's case) then the issue would be resolved. This is not only the easiest way, but probably the best practice)
Your alternative, if you don't want to set max and min values to your elements that use percentages, would be to not set fixed widths on elements (in the case of stack overflow, it's content width is fixed at 980px, and most everything else is fluid).
If content and it's children used max-width instead of width this problem would disappear.
Alternately, as lookingGlass points out, more fluid responsiveness.
Add breakpoints so that when your window size is below/above your ideal the site adapts.