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/
Related
I am very new to using VueJS and was wondering if there is a way to only show a button (that contains a slot) to only show if there is a button value given to the slot.
I'm using BootstrapVue Modals and the code is as follows:
I was not able to successfully get the modal running in the snippet but a screenshot of the opened modal is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<b-btn #click="showModal" class="modalBtn">
<slot name="modalOpenBtn">Open Me</slot>
</b-btn>
<b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
<h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
<p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>
<div slot="modal-footer" class="w-100 d-flex align-items-center">
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalCloseBtn">btn 1</slot>
</b-btn>
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalOkBtn">btn 2</slot>
</b-btn>
</div>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
components: { App },
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
});
</script>
</body>
</html>
You can conditonally render any element with Vues v-if directive:
// generic
<button v-if="myBooleanCondition">...</button>
// exmaple
<button v-if="something == true">...</button>
https://v2.vuejs.org/v2/guide/conditional.html
I have a page with an <asp:FileUpLoad> tag that I place a glyphicon into. When I click on the submit button without selecting a file, bootstrapvalidator flags the field as invalid and displays the error message. The issue is that the glyphicon icon gets stretched to include the <asp:FileUpLoad> field and the bootstrap error message.
This is what the form looks like prior to clicking on Submit:
and this is what it looks like after I click on Submit:
Here is the code that I am running:
<head runat="server">
<title></title>
<script src="../Scripts/modernizr-2.6.2.js"></script>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link id="Link1" rel="stylesheet" type="text/css" href="../Content/bootstrap.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="../Content/bootstrapValidator.min.css" />
<link id="Link3" rel="stylesheet" type="text/css" href="../Content/bootstrap-datepicker.min.css" />
<link id="StyleLink1" rel="stylesheet" type="text/css" href="../Content/Site_VSTT.css"/>
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="../Scripts/respond.js" type="text/javascript"></script>
<script src="../Scripts/moment.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="../Scripts/bootstrapValidator.js" type="text/javascript"></script>
</head>
<body>
<form runat="server" id="contactForm" class="form-horizontal" >
<div class="form-group">
<label class="col-md-3 control-label">File Name</label>
<div class="col-md-6 input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-file"></i>
</span>
<asp:FileUpload ID="uploadfile" name="uploadfile" CssClass="form-control" runat="server" ClientIDMode="Static" placeholder="Enter name of file to upload"/>
</div>
<br /><br />
<div class="col-md-1 col-md-offset-3">
<asp:LinkButton ID="btnCancel" runat="server" CssClass="btn btn-default btn-sm">
<span aria-hidden="true" class="glyphicon glyphicon-remove"></span> Cancel
</asp:LinkButton>
<button id="btnSubSearch" runat="server" type="submit" class="btn btn-primary btn-sm" >
<span aria-hidden="true" class="glyphicon glyphicon-arrow-right">
</span> Validate
</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#contactForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uploadfile: {
validators: {
notEmpty: {
message: 'The file name is required'
}
}
}
}
})
})
</script>
</body>
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!
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*"));