I want some flexibility in my css style block so i decide to inject some server side code, f.e.
#defaultGameContainer {
position: relative;
width: #(SiteConfig.Instance.Game.Width + "px");
height: 600px;
top: 100px;
left: 50%;
margin-left: -480px;
}
But it seems not work, i have a error in VS like 'unexpected characters sequence...'
Are we restricted to use Razor syntax in css?
Thanks.
Actually, you can add a custom CSS block for a specific .cshtml View by following these instructions:
First off, Define in the .cshtml view your custom CSS block
#section CustomCSS{
<style>
#floorsList > tbody > tr > td {
vertical-align: middle
}
</style>
}
Then, you need to embed this CustomCSS section in _layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Your Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("Styles", false)
<!--Consider the following line -->
#RenderSection("CustomCSS", required: false)
</head>
<body>
</body>
</html>
css/js files are not parsed by mvc razor views engine
you can create CssController (be sure you don't have Css folder in project directory) which returns plain text
controller:
public class CssController : Controller
{
[OutputCache(Duration = 6000, VaryByParam = "l")]
public ActionResult generatecss()
{
return View("generatecss");
}
}
view: generatecss.cshtml
#{ Layout = ""; }
#defaultGameContainer {
position: relative;
width: #(SiteConfig.Instance.Game.Width + "px");
height: 600px;
top: 100px;
left: 50%;
margin-left: -480px;
}
put it in layout as stylesheet
<link href="~/Css/generatecss" rel="stylesheet"/>
I believe you can use LESS Css for .NET http://www.dotlesscss.org/
Thanks you guys! All you suggest is just fine!
And at the end of experimenting i found that it works even with those annoying VS warnings.
So we can just mix c# with css just in <style>...</style> block in main _layout.cshtml and ingore those warnings.
Related
Edited: I was trying to make a chat page that has a message textbox and a button to send inside a form element. Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>A</title>
<style>
body{height: 100vh;}
form{
line-height: 40px;
position: absolute;
}
</style>
</head>
<body>
<form name="form">
<input type="text" placeholder="A message goes here"/>
<button>Send</button>
</form>
<script>
var search = window.screen.height - 40;
document.form.style.top = search + "px";
</script>
</body>
</html>
But the form goes more than 100vh
There is no need for js or absolute positioning...you just need to set it up the way you need to look at it ...when I said use display: flex that needs to be inputed in the container box and your web content should go on a separate section outside your form like so:
body {height: 100%}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {flex: 1;}
form {
width: 100%;
height: 40px;
background: #000;
}
I copy your code and added it here: https://codepen.io/izzy_zeke/pen/OqVOVL
I am trying to archive similar effect to facebook's cover and profile image when one is placed top of the other. I tried to add css like this:
.profileImage{
position: relative !important;
z-index: -1 !important;
}
it does not change anything. My cover photo is in <Image> tag and my profile is in <Avatar> if that's important. Thanks :)
With the right CSS you can do it pretty easy.
Here a example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<style>
.profileImage {
position: absolute !important;
margin-top: 50px !important;
margin-left: -100px !important;
}
</style>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize_plus' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Image src="http://via.placeholder.com/350" height="150px"></Image>
<f:Avatar class="profileImage"></f:Avatar>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {});
/*** THIS IS THE "APPLICATION" CODE ***/
// instantiate the View
var myView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
}); // accessing the HTML inside the script tag above
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
I have a view page (View.cshtml) and a stylesheet (Style.css).
The stylesheet is located in a folder called "Stylesheet", and the view page is located in Views/Home/View.cshtml. I am trying to link the stylesheet to the view page by this code:
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css">
When I run the project, it showed the contents of the view page but the styling was not implemented. May I know what I am doing wrong?
UPDATE:
View.cshtml
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css" />
<title>Test Page</title>
</head>
<body>
<div id="topHeader">
<br />
<div id="credentialsBox">
<div id="texts">
<div id="word1">Username:</div>
<div id="word2">Password:</div>
</div>
</div>
</div>
</body>
Style.css
#font-face {
font-family: 'proximanova';
src: url('../fonts/proximanova-light-webfont (2)_0.ttf') format('truetype');
}
/*CSS Styling Properties*/
body {
font-family: proximanova;
margin: 0;
background-color: #007381;
}
#topHeader{
margin-top: 15%;
height: 450px;
background-color: #d6d6d6;
}
#credentialsBox {
border-radius: 3%;
width: 20%;
margin: auto;
margin-top: -5%;
background-color: #ffffff;
}
#texts {
padding: 14%;
text-align: center;
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
#RenderSection("css", false)
</head>
<body>
#RenderBody()
</body>
</html>
Sorry if the CSS styling is a bit messy, I am trying my best to learn here :D
You can also use #Url.Content instead for absolute path of css file.
<link href="~/Stylesheet/Style.css" rel="stylesheet" type="text/css" />
or
<link href="#Url.Content("~/Stylesheet/Style.css")" rel="stylesheet" type="text/css" />
If you that is your own custom CSS file then make sure that you add that file to BundleConfig.cs file in App_Start folder. Which will look something like this..
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/Style.css));
And in your head section try to replace
<head>
#RenderSection("css", false)
</head>
with
<head>
#Styles.Render("~/Content/css")
</head>
and see it will make any difference, and we will go from there.
I have solved the error. I placed my stylesheet inside "wwwroot/css" and it worked.
I am trying to build a dialog using AngularMaterial and in the demo it has css code:
.dialogdemoBasicUsage #popupContainer {
position: relative;
}
.dialogdemoBasicUsage .footer {
width: 100%;
text-align: center;
margin-left: 20px;
}
.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
font-size: 0.8em;
margin-top: 50px;
}
.dialogdemoBasicUsage button {
width: 200px;
}
.dialogdemoBasicUsage div#status {
color: #c60008;
}
.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
margin-bottom: 0;
}
In my angularJS project - where do I put this code? do i create a new .css file and then reference it and do I have to put anything around it?
It is the same way how you do it in normal HTML application.
Add the css code to a file named style.css , refer it inside
<head>
<title>To Do List</title>
<link href="style.css" rel="stylesheet" />
</head>
DEMO
In normal use case you should include the CSS file come with the library.
By the user guide of material CSS, you should include these files in your HTML
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<!--
Your HTML content here
-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->
If you need further modification on top of their CSS, make a new CSS file and include it below angular-material CSS file in <head>
As per the question, I am attempting to figure out where "​​" is coming from in my CSS. I use FlashDevelop, and up until now, it has worked fine. I have a min file I'm uploading to the site, and ​​ appears at the end of it, sometimes in the middle before the last little rule. Has anyone else encountered this kind of problem before? My CSS is mostly just class rules, rather basic defining columns. I am using Bootstrap and Font Awesome alongside it, but this just started happening today.
This is my code pre-minify:
html, body {
height: 100%;
background-color: #e6eded;
}
.box {
height: auto;
overflow: hidden;
}
.right {
width: 240px;
float: right;
background: #aafed6;
}
.header {
height: 55px;
background-color: #818181;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
After FlashDevelop produces the minified file and uploads it, I get this:
html,body{height:100%;background-color:#e6eded;}
.box{height:auto;overflow:hidden;}
.right{width:240px;float:right;background:#aafed6;}
.header{height:55px;background-color:#818181;}
.left{float:none;background:#e8f6fe;width:auto;overflow:hidden;}
​​
This is the remainder of the template I'm working on as requested.
<!DOCTYPE html>
<html lang="en">
<!-- BEGIN HEAD -->
<head>
<meta charset="UTF-8" />
<title>Teonnyn.com</title>
<meta content="" name="description" />
<meta content="" name="author" />
<?PHP echo $this->Html->css("bootstrap.min"); ?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<?PHP echo $this->Html->css("main.min"); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="box">
<div class="header">
</div>
<div class="right">
Test
</div>
<div class="left">
</div>
</div>
</body>
</html>
#Tomalak provided the correct answer. While I had to hunt for the symbol, opening a plain text editor displayed the actual code and allowed me to delete it correctly.