I'm created a simple CSS with YUI Skin Builder, but, when I try to use it in my MVC project the color system is not correct
My skin is that: Skin, the spected button color is red, but, I just get a gray or blue button:
My cshtml code:
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width" />
<title>UniFlex</title>
<link href="#Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/pure-skin-min.css")" rel="stylesheet" />
</head>
<body>
<div style="margin-top: 60px;margin-left:auto; margin-right: auto;width:330px;">
<img src="#Url.Content("~/Imagens/logo.png")">
</div>
<div style="width:500px; margin-right:auto; margin-left:auto;">
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Usuario:</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Senha:</label>
<input id="password" type="password" placeholder="Password">
</div>
<button class="pure-button pure-button-primary">A Pure Button</button>
</fieldset>
</form>
</div>
</body>
</html>
What is wrong ?
Ok, I forgot to put the css name in body
<body class="pure-skin-mine">
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width" />
<title>UniFlex - Bradesco</title>
<link href="#Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/pure-skin-mine.css")" rel="stylesheet" />
</head>
<body class="pure-skin-mine">
<div style="margin-top: 60px;margin-left:auto; margin-right: auto;width:330px;">
<img src="#Url.Content("~/Imagens/bradesco-logo.png")">
</div>
...
Now it's work very well!
Related
Hey guys im using bootstrap and i wanted to have text in one div but where i write more than the width of the div the text goes out instead of appear or the next line ... here is my html:
<!Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>AGORA</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="SITE.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row entete">
</div>
<div class="row">
<!-- PROFIL -->
<div class="col-md-5">
<!-- PHOTO ET PRES -->
<div class="row">
<!-- PHOTO -->
<div class="col-md-3" style="padding:0;"><img src="profil.jpg" class="img-responsive"></div>
<!-- PRESENTATION -->
<div class="col-md-9">
<p>PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
</div>
</div>
<!-- INFOS DU MEC -->
<div class="row bordure"></div>
<!-- NIVEAU TROPHEES ET CENTRE INTERET -->
<div class="row bordure"></div>
</div>
<!-- DEBATS -->
<div class="col-md-7">
<div class="row bordure"></div>
<div class="row bordure"></div>
</div>
</div>
</div>
</body>
</html>
and my css :
*{
padding:0;
}
.container-fluid{
border: 1px solid; box-sizing: border-box; height:100%;
}
.entete{
height:100px;
background-color: blue;
}
I do not understand while the text in the div doesnt stay in it ...
Thanks for help !
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header style="background-color: blue">
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<div class="container-fluid img-responsive">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4 col-xl-4" ><img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" width="200px" height="200px"></div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8" style="word-wrap: break-word ">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle now:https://jsfiddle.net/77qmh8zm/
Hello I am starting to learn in web programming language using asp.net mvc4 and bootstrap. I am getting this error (Server Error in '/' Application) when running my application but if it is in default code it is functioning fine.
These are my codes
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
I didn't change anything here
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" content="" />
<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="Corinthians 3" />
<title>Sample BS</title>
<!-- Bootstrap Core CSS -->
<link href="#Url.Content("~/plugin/bower_components/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<!-- MetisMenu CSS -->
<link href="#Url.Content("~/plugin/bower_components/metisMenu/dist/metisMenu.min.css")" rel="stylesheet" type="text/css" />
<!-- DataTables CSS -->
<link href="#Url.Content("~/plugin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css")" rel="stylesheet" type="text/css" />
<!-- Animation CSS -->
<link href="#Url.Content("~/plugin/css/animate.css")" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="#Url.Content("~/plugin/dist/css/sb-admin-2.css")" rel="stylesheet" type="text/css" />
<!-- Custom Fonts -->
<link href="#Url.Content("~/plugin/bower_components/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css" />
<link href="../../plugin/dateTimePicker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div>
<label for="disabledSelect" style="color:#A94442; display:none;" id="lblTotalCollectibles"></label>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0; background-color:#337AB7;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
< span class="sr-only"> Toggle navigation < /span >
< span class="icon-bar">< /span >
< span class="icon-bar">< /span >
< span class="icon-bar">< /span >
</button>
<a class="navbar-brand" href="#Url.Content("~/BS/BSSSS")" style="color:White;">BS</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li style="margin-top:13px;">
<span class="fa fa-clock-o" style="color:White;" id="timeTxt"></span>
</li>
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
</li>
<li> <!--style="display:none;"> -->
</li>
<li> <!--style="display:none;"> -->
</li>
<li>
<i class="fa fa-wrench fa-fw" id="side-menu-filemaintenance"></i> File Maintenance <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
</li>
<li>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper" style="background-image:url(../../Images/bg.gif); background-attachment: fixed;">
<div class="container-fluid">
#RenderBody()
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="#Url.Content("~/plugin/bower_components/jquery/dist/jquery.min.js")" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/bootstrap/dist/js/bootstrap.min.js")" type="text/javascript"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/metisMenu/dist/metisMenu.min.js")" type="text/javascript"></script>
<!-- DataTables JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/datatables/media/js/jquery.dataTables.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/plugin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/plugin/js/jquery.scrollUp.min.js")" type="text/javascript"></script>
<script src="../../plugin/dateTimePicker/js/moment-with-locales.js" type="text/javascript"></script>
<script src="../../plugin/dateTimePicker/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<!-- Custom Theme JavaScript -->
<script src="#Url.Content("~/plugin/dist/js/sb-admin-2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/userdefined/Sales/jsSales.js")" type="text/javascript"></script>
</body>
</html>
And Lastly for my View>BS>BSSSS.cshtml
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
<h1>aaaa</h1>
</div>
</body>
</html>
Here is the picture of the error.
UPDATED
#Gaurav here is the new error that i follow your suggested way.
Approach 1
Rename your BSSSS.cshtml to Index.cshtml and move it to Views/Home folder (replace existing file).
Leave the statement as return View(); in Home controller's Indexaction.
Approach 2
Let the BSSSS.cshtml file remain at path Views/BS/BSSSS.cshtml. In your Home controller's Index action change the return View(); to return View("BSS/BSSSS.cshtml");
I have this nasty display on some elements with bootstrap3
the black triangle is in the MIDDLE of the tooltip.
My placement is set to "auto"
and even removing all my css and all js (keeping only bootstrap and css) I have this problem
// I just keep this to test and still have problem
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
Here is the way it is called (in the footer.php)
(function() {
bootbox.setDefaults({ locale: "en"});
$('[title]').tooltip({
placement:"auto"
});
Here is the FULL Page
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label title="Main-Stage" class="btn btn-default active" >
<input type="radio" name="options" checked >Main-Stage
</label>
<label title="Chat with DJ" class="btn btn-default" >
<input type="radio" name="options" > DJ
</label>
<label title="Chat with Manager" class="btn btn-default">
<input type="radio" name="options" > Manager
</label>
</div>
<script>
(function() {
$('[title]').tooltip({
placement:"auto"
});
})();
</script>
</body>
</html>
FIDDLE:
http://jsfiddle.net/a279b885/
I have a SearchGoogle html page which opens a google map.I want to load this html file into a modal dialog on the click of a button.
Defined a modal on my main index.jsp page and href the SearchGoogle.html. The content doesnt load up.Any help?
The below page is the remote page i want to load in an Modal Dialog.Have tried remote content loading.It is not working
<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/googleMap.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label> <input type="radio"
name="type" id="changetype-establishment"> <label
for="changetype-establishment">Establishments</label> <input
type="radio" name="type" id="changetype-geocode"> <label
for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>
If you look up the load method in the jQuery API doc, it says that the load method uses innerHTML to parse the page to be loaded and that:
During this process, browsers often filter elements from the document such as <html>,
<title>, or <head> elements.
I suggest putting the googleMap.css on the modal page and moving your scripts in the page above to the body tag like this:
HTML for the page to be loaded (which I'm calling remote.html):
<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Google Map Modal Title</h4>
</div>
<div class="modal-body">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label> <input type="radio"
name="type" id="changetype-establishment"> <label
for="changetype-establishment">Establishments</label> <input
type="radio" name="type" id="changetype-geocode"> <label
for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</body>
</html>
HTML for the page with the modal:
<!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">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Add the googleMap.css on this page -->
<link rel="stylesheet" type="text/css" href="css/googleMap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- The contents of remote.html will be injected here. Don't forget to wrap your content in the modal-header, modal-body, and modal-footer classes! -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
I have just started a new project in MVC4 using some code from an existing MVC3 project. I can force my form to ajax reload the specific DIV, but not using the normal submit method, only with the test doSomthing() javascript function. What am I missing?
To clarify: The first button does not work right, the second one does - but I don't want to do it that way.
VIEW
#using (Ajax.BeginForm("Method1", null,
new AjaxOptions { HttpMethod = "post", UpdateTargetId = "divPartial1" },
new { id = "form1" }))
{
<div class="data">
#Html.LabelFor(x => x.TotalSubmitted, new { #class = "total" })<div class="number total">#Html.FormatValue(Model.TotalSubmitted, "{0:n0}")</div>
...
</div>
<div class="details">
<div id="divPartial1">
#Html.Partial("ReportDashboardAppPartial")
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="k-button"><span class="k-icon k-i-search" /></button>
<button type="button" name="Save" value="Save" onclick="doSomething(); return false;"><span class="k-icon k-i-search" /></button>
</div>
}
<script type="text/javascript">
function doSomething() {
$.ajax({
url: '#Url.Action("Method1", "Controller")',
type: 'post',
data: $('form#form1').serialize(),
success: function (result) {
$('#divPartial1').html(result);
}
});
}
</script>
_Layout
#model BaseViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="#Url.Content("~/Content/kendo.compatibility.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")" rel="stylesheet" type="text/css" />
#RenderSection("styles", false)
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/kendo.aspnetmvc.min.js")"></script>
#RenderSection("scripts", false)
</head>
<body>
#Html.Partial("_AlertWindow")
<div id="wrapper">
<header>
<div id="logindisplay">
#Html.Partial("_LoginPartial")
</div>
<a href="#Url.Action("Index", "Home")">
<div id="logo"></div>
</a>
<div id="title">
<h1>Ha!</h1>
</div>
#(Html.Kendo().Menu().Name("Menu").BindTo("Main").SecurityTrimming(true))
</header>
<div id="main">
#RenderBody()
</div>
<footer>
<div id="version">#Html.ActionLink("Version " + #Model.CurrentVersion, "About", "Home")</div>
</footer>
</div>
#RenderSection("end_scripts", false)
</body>
</html>
I know this should work.
I had the same problem. The solution is to add a statement in _Layout.cshtml page.
#Scripts.Render("~/bundles/jqueryval")
The definition of ScriptBundle("~/bundles/jqueryval") as below
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));