With the exception of the nav-bar, the content width of my pages won't resize to 100%. As you resize the browser window, the content will stretch to a certain width, and then stop.
I've set the width of all elements to 100% to no avail.
This only occurs when serving pages from my development machine, which is running IIS Express 8.0. It does not occur on the Test and Development servers, which are running IIS 8.5.
Everything within the body of the page would max out at a width of around 1000px.
The only thing that has worked to fix this is simply setting the max width for body to 1900px.
I don't know where in Bootstrap the body is being limited to a smaller width.
Related
We are trying to set up screenshot tests to automate UI/ layout regression testing by comparing screenshots against an expected set of screenshots. We are using testcafé for that but we are struggling when scrollbars come into play for full-page fixed width screenshots:
const testcafe: TestController;
await testcafe
.resizeWindow(1024, 768)
.takeScreenshot({
fullPage: true
});
This will result in a screenshot with a width of 1003px (not 1024px!) and a height of 1546px. Nonetheless, the screenshot still contains the vertical scrollbar which is surely not out of coincidence 21px wide. It's neither full page as few pixels are also missing at the bottom of the page which most likely does actually result in the vertical scrollbar.
When trying to workaround the reduced width by adding additional pixels (21 to be exact), the screenshot is indeed 1024px wide and has a slightly reduced height of 1510px (as something on the page is not required to be wrapped anymore). It's still missing parts at the bottom of the screenshot and it still has a scrollbar.
const testcafe: TestController;
await testcafe
.resizeWindow(1024+21, 768)
.takeScreenshot({
fullPage: true
});
Now it gets slightly more weird: The behavior just described continues up to a width of 1024+21+20 px. Screenshots have a width of (1024-21) +21+20 px, a height of 1510px and scrollbar. Starting from 1024+2*21 though the vertical scrollbar disappears, the screenshot is complete also at the bottom with 1510px as the correct height (as again something else on the page doesn't have to wrap anymore) - but unfortunately I do have a screenshot with a width of 1045px which is not of the intended width of 1024px.
If I specify resizeWindow with a width of 1024px I do expect a screenshot exactly of that width if it does include a scrollbar. If testcafe thinks it has to take the screenshot without the scrollbar and reduce the screenshot to a width of 1003px it's also fine with me - but here I guess it has somehow considered the scrollbar but still not actually cut it off.
The same mechanism for a page which content doesn't require the height of 768px, in other words doesn't have a scrollbar to begin with, the screenshot has a width of 1024px without any "correction".
Few versions if relevant:
node: v14.16.0
testcafe: 1.10.1
browser: Chrome 89.0.4389.72 running on Windows 10
Do you have any further ideas?
Within my react native app I have a simple ScrollView with containers which should stretch horizontally to 100% width. Each of these containers should display an image. I receive the image for each container from a web API (but I could send the actual image as byte64 string too if it makes any difference).
Now the problem I have is that the Image component needs me to set the height and width style attributes in order to display the image. I understand the reasoning for that, since the actual dimensions of the image are only available at runtime and it would cause the UI to behave strange when the images are loaded.
However I would like to set the width of the image to 100% of the parent container, eventhough that means that the the containers height will change when each image are loaded.
Any advice on how to solve this issue?
Not sure if I'm completely understanding the scenario you're describing, so this idea may not work. But if you know the width of the container, you can use that to scale the image's height based on the ratio of the container's width to the image's original width.
I've actually answered a recent question about this by providing a component I coded up for a similar purpose:
Auto scale image height with React Native
Hope this helps.
You can do something like
resizemode="stretch"
with this the image will stretch in the whole container irrespective of the size of the image
I intend to create a non-responsive Bootstrap template. Because I want to prevent the navbar from collapsing. However when I window resize to a certain level a gap arises
Example
http://bootply.com/render/87304
To prevent the navbar from collapsing, Download the latest version from http://github.com/twbs/bootstrap/archive/master.zip and compile your own version.
Set #grid-float-breakpoint to 0 in variables.less.
To could also use http://getbootstrap.com/customize/#variables-basics to do the same.
See also: https://github.com/twbs/bootstrap/pull/10465
If you don't want to compile anything try: https://github.com/bassjobsen/non-responsive-tb3
update
the gap has to do with the fixed width of your container to width: 970px; Note your navbar is not in a container and gets 100% width of the viewport.
I use Hiero, java version, because I want to create fonts for CCLabelBMFont.
However, due to my game being on retina display, my font images are big, and they require more than one page. Cocos2d only supports one.
So, essentially, how can I produce bigger pages (canvases)? I don't think Hiero has that feature.
Click on Glyph cache radio button. Then adjust Page width and Page height until it says Pages: 1. Then change the font size to the size you want. Re-adjust page width/height if the new font size increases the number of pages.
p/s: Make sure you adjust page width/height before increasing the size. Hiero will freak out if you suddenly change to a large size without changing the page width/height, and stop displaying the sample rendering. If that happens, you have to close and restart Hiero.
I try to setup UltraMon with a really big width and height for my Safari on Windows.
See capture : http://cl.ly/de21e9cd2cf4f265efc4
The problem is that the width and height seems to have a max value that I would like to change.
I want UltraMon not to change my width and height, even if they are bigger than the screen resolution.
Windows doesn't allow that, according to the developers of UltraMon.
See http://www.realtimesoft.com/multimon/forum/messages.asp?tmpl=UltraMon&Topic=10795#39510