I created a new ASP.NET MVC Webapp. I added foundation for MVC using Nuget package manager and removed the bootstrap package. At this point, everything is perfect.
I then added Kendo UI to the MVC Webapp just as I normally do. This is what my Index.cshtml page looks like for a simple test:
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
<h3>Content goes here</h3>
<br/>
#(Html.Kendo().DatePicker().Name("datepicker"))
</div>
</div>
It seems like Foundation is somehow affecting the Kendo styles because the datepicker does not look how it should look. Does anyone have any ideas to why this could be happening? I purposely added anything related to KendoUI after Foundation to avoid this problem.
Here is my head tag in _Layout.cshtml
<head>
<meta charset="utf-8" />
#*Set the viewport width to device width for mobile *#
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - Welcome to Foundation</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Styles.Render("~/Content/foundation/css")
#Styles.Render("~/Content/kendo/css")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/kendo")
#RenderSection("head", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
Here is right before the closing body tag in _Layout.cshtml
#Scripts.Render("~/bundles/foundation")
<script>
$(document).foundation();
</script>
#*Use the Scripts section to define page specific scripts*#
#RenderSection("scripts", required: false)
Related
I think I have followed the steps for a previous post about this question. But I get no error but I get an alternating question mark and exclamation point on the display.
There are no errors in the Chrome debugger console. If I hover over these alternating "buttons" I don't get any tooltip or additional information. So it seems that the class has been recognized and the button loaded but there is some kind of error that I cannot determine.
Here is what I have so far
Downloaded and the zip of the FA components
Add link to index.html under wwwroot (this is a client side Blazor
application)
Referenced the classes in my component
<button class="fas fa-angle-double-up">Up</button>
<button class="fas fa-angle-double-down">Down</button>
But this doesn't seem to work. Ideas?
I have tried including the .js from Fontawesome but still no luck
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BreakpointManagement.App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BreakpointManagement.App.Client.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>
<script src="_content/BlazorTable/BlazorTable.min.js"></script>
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">đź—™</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
I added all paths, as #JasonD mentioned
added this line at component file
and added these lines at index.html
and voi-la
I am trying to migrate my old mvc app to bootstrap 4 and admitedly I have little experience with scss files.
Lets say I have a simple _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Source/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Source/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Source/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Source/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
a View:
<div>
<div class="row">
<div class="col-md-2">
-OOO-
</div>
<div class="col-md-3">
-WWW-
</div>
<div class="col-md-7">
-KKK-
</div>
</div>
</div>
and a Controller with method:
public ActionResult Index() => View();
Bootstrap v4.3.1
JQuery v3.4.1
As soon as the View renders the weird situation happens, the '.col-md-2' class is rendered with wrong width values because '_grid-framework.scss' appear twice in the styles list and the wrong one has precedence:
My questions are:
Why browsers see two different files with the same path??
How do I make bootstrap generate only the correct version of the file?
I tried the regular things with clearing cache, clearing/recompiling, removing content from the IIS and rebooting the IIS.
// EDIT 1
Actually the comment about bootrap 4 dropping .col-sm-*, .col-md-*, etc confused me and it turns out it is not really the case (they even added xl tier). So the problem stands, I am currently overriding .col-md-2 styling in the .css file but I don't really want to do that.
When i'am runing the application in visual studio 2010 i have no problem whith boostrap CSS and javascript, otherwise, when i publish it, all the javascript and css is not recognized. I create a simple html page to test
if it is a html formatt problem, but the problem still happen. Does anyone can help me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="Styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="Styles/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="starter-template">
<h1>
Bootstrap starter template</h1>
<p class="lead">
Use this document as a way to quickly start any new project.<br>
All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="row">
<button type="submit" class="btn btn-default">
Ok</button>
</div>
</div>
</body>
</html>
Usually this is due to windows features in IIS not being turned on to support static content such as CSS and JS.
The steps to enable this are:
Go to “Turn Windows features on or off”
Select Internet Information Services
Select World Wide Web Services
And check Static Content
You could try making the path to your css/javascript relative using the ~.
<link href="~/Styles/bootstrap.min.css" rel="stylesheet">
or by using ResolveURL
<link href='<%= ResolveUrl("~/Styles/bootstrap.min.css") %>' rel="stylesheet">
The problema was the mime Type of files .css in the site of ISS. It was set to "text/csss", but the correct is "text/css".
Following is code i used this is from template when i run this file i see error
bootstrap.css.map:1 GET http://localhost:8000/css/bootstrap.css.map 404 (Not Found)
but there is no link i made and error shows link is on first line can someone help me where the link is
how do i remove that link can someone help me with this
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Animus A Blogging Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Graphic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
</head>
<body>
<div class="contact-top">
<div class="container">
<h2>Log in</h2>
<div class="contact">
<p></p>
<div class="contact-down">
<div class="contact-right">
<div class="col-md-6 contact-info">
<form>
<input type="text" name="your name" placeholder="USER NAME" class="input">
<input type="password" name="your email" placeholder="PASSWORD" class="input">
<div class="clearfix"> </div>
<input type="submit"value="SEND" />
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's coming from your bootstrap.css file. You can remove the reference by editing that file and removing the following line from your code:
/*# sourceMappingURL=bootstrap.css.map */
Source Mapping files should only be used by the Developer Tools.
With Bootstrap you can disable the source map if you like or just ignore the 404 for any .css.map when using the Dev Tools.
If you want to use the Dev Tools for Debugging or want to have more 'completeness' to your code add the .css.map file available from Bootstrap along side the .css file.
Reference: https://developer.chrome.com/devtools/docs/css-preprocessors
Other similar questions: what are the .map files used for in Bootstrap 3.1?
Either you can remove
`/*# sourceMappingURL=bootstrap.css.map */
as mentioned by #xengravity or you can download bootstrap.css.map file of your bootstrap version and add it in your directory.
It has been four days since I have been trying to use my theoretical HTML and CSS knowledge to create a personal webpage.
Since I am still a beginner I did not host it and I am still under the process of creation.
I tried to create a favicon for my webpage so that it appears instead of the default "white paper with a fold on the top right."
Here is the code I have written:
<head>
<title>RAMYA VEMUGANTI</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="header">
<h1>Ramya Vemuganti</h1>
<hr/>
</div>
</body>
A few things:
<link> tag should be inside of <head> tag
You have two closing <head> tags
Your <div> content should by wrapped in a <body> tag BELOW the <head> tag
Make sure "favicon.ico" exists in the root location of your web server
and the tag should look like:
<link rel="icon" type="image/png" href="/favicon.ico" />