CSS Styles differ from local and test server - css

I have an Angular 14 .NET 6 Web App that has different styles when running on my local vs an on prem server. The styles are only off a couple of pixels and just wanted to know if anyone here knows how I can approach fixing this.
My laptop is set to 100% in the display settings and chrome is set to 100% too.

Related

My node.js webapp (with bootsrap) works locally but not on my express server

I'm trying to develop a real estate web app. I downloaded html/css theme from envato and they look great locally... not so much on my express server (running on my host machine).
I get this error
As soon as I take out
"var bootstrap = require('bootstrap');"
my website loads but website layout is off. Anyone else experience this problem before?
Require is a built-in function for Node.js to load modules. See What is this Javascript "require"? for more info about require.
But in short when you remove var bootstrap = require('bootstrap'), you are not allowing your code to access the bootstrap module thus removing the bootstrap styling for the app.

IE loads incomplete assets (Vue Javascripts, stylesheets)

I build a web app using Vue.js2 and Sass packed with webpack, transpiled with Babel. The backend is build with PHP framework Symfony2.
I have full support for browsers based on webkit - Chrome, Opera, Firefox, Edge, however, I did everything to make sure it's compatible with IE11, I have some issues on production and testing env (both run under apache2). CSS are autoprefixed by webpack plugin and PostCSS.
While I run the server locally using PHP built-in server, everything works perfectly. While I launch the app from server with apache, in Webkit browsers, everything works perfectly as well. Now the interesting part is, IE 11 is not able to load complete asset files. CSS are broken and barely half of the page is styled up. Also the Javascripts are incomplete, that causes missing fc declaration and nothing is rendered due to errors.
This occurs only in IE11. We have F5 firewall on production, also internal proxy in our company's network. But since the problem is only IE11 related, I don't think the problem lays there.
Do you have any idea, where's the problem? Can apache modify headers to be incompatible with IE11?

IIS 7 won't serve kendo UI icons on production

I googled this until my eyes bled. I can't find what's causing it to save my life.
I'm using MVC4 with KendoUI HTML5 Framework; one of the 2015 editions. Everything's .min so I can't find the exact version.
On development, Kendo UI icons show fine.
On a VM I created to test deployments, Kendo UI icons show fine.
On the customer's network in production, Kendo UI icons do not show.
On the customer's network, you can navigate to the location of the icon sprite file successfully (no 404 error)
Bootstrap icons show normally in all cases. It's only the Kendo UI icons.
Dev means there's no inherent problem with the icons or CSS. The VM deployment working fine means it is most likely not an MVC bundling problem--I'm using the following solution for the bundling issue.
.Include("~/Content/kendo/kendo.bootstrap.min.css", new CssRewriteUrlTransform())
I have absolutely no idea what is different on my customer's network that causes KendoUI icons not to display. I'm baffled, and--as always--unbelievably grateful for any help you all can give.
For a start, you can disable bundling on production, to see if it is related to the problem.
On the other hand, with bundling enabled, there should be some 404 error in the browser console when the sprite file doesn't load - I suggest checkng what the request URL is in that case, and compare it with the working URL when you access the sprite file directly.
Also check this thread that may be applicable:
CssRewriteUrlTransform with or without virtual directory
In my case the icons were not copied over to production. I copied the kendo sub folder from contents folder to the corresponding folder in production and that solved it. Visual Studio 2010 MVC 3. No bundling used.

Visual Studio Apache Cordova - IOS build rotation issue

I'm a starter in writing app code in Visual Studio 2013 Community Apache Cordova and have managed to connect VS2013 with my Mac. Once I have gone through the process of building the app in VS and on my Mac and installing in on my iPhone, I open it up and it won't rotate. It doesn't rotate for a number of basic apps that I've written nor does it rotate if I build the default new project "Hello, your application is ready!" app.
I have done some research and tried changing the config.xml "Orientation" preference to "both", through the code window and also in the designer window but that doesn't change anything. I've also noticed that adding in a "BackgroundColor" preference doesn't work either.
Does anyone know if I may have configured something incorrectly or perhaps need to add something to my code?
All the HTML, JS and CSS that I've written seems to work okay (with the exception of trying to link URLs to the Safari Browser but that's another issue).
I have noticed the same issues. I tried finding some settings to fix that in the config.xml, but was not successful. I have resolved myself to just opening the iOS project in XCode and changing a few things:
Device Orientation: no matter the config.xml setting, its always only Portrait. I click-check the other 3 orientations.
Team: I have multiple developer profiles, and I need to choose correct one here.
Bundle Identifier. I screwed up one project, and have different case for iOS and Android. I leave the VS one as the Android one, so I can build completely correct for Android. Since I know I have to go to XCode for iOS anyway, I change the bundle identifier here.
You can find the project using Finder at ~/remote-builds/builds/9999/cordovaApp/platforms/ios/*.xcodeproj, where 9999 is the build number, though not necessarily the latest, largest number, but the latest datetime of the folder.
You can also refer to Greg's answer in this related post as an alternative solution.

CSS different in production

I have a Ransack search and Foundation in my Rails app and locally css renders ok while the same app in production has a quirk:
other things in the app are exactly the same.
I tested in Chrome and Safari - locally ok, production not ok.
Where can I start troubleshooting this?
UPDATE: I tried to run in production locally (assets:precompile) and it's the same as on the server... so how come asset compilation can change something?
One of the sites probably has a global css selector that set the margin or padding (can't really tell from your example).
Go to the production site and inspect one of the elements. You should see a difference in its computed style.

Resources