I want to create a drop-down, But I am not sure it is a drop-down or something else coz I am new to HTML environment.
What I want to create is
When I clicked on the Indian Spices, It must show another dropdown inside it, and if I clicked on the Pepper in must show another two items under it.
Here each option should comes under it is parent.And drop-down must not have the borders around it .I need to design the drop-down as same as in the image .(Without any borders)
I have tried something here but I know it is not the proper way of design.
https://stackblitz.com/edit/angular-a1deda?file=app%2Fapp.component.html
Here I almost near to my goal
https://stackblitz.com/edit/angular-tjndwi?file=app%2Fapp.component.html
Can anyone guide me to solve this ...
I think this is what you were looking for. You can do the rest bit of the designing yourself. Check the snippet.
$(document).ready(function () {
$('#head__top').on('click', function(){
if($('#innerCollapse').is(':visible')) {
$('#innerCollapse').hide();
}
});
$('#head__sub').on('click', function() {
$('#innerCollapse').fadeToggle(300);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
<h4 id="head__top">
<a class="font-weight-normal badge badge-light bg-white" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Indian Spices</a>
<span class="col-sm-3"></span>
<span class="col-sm-3"></span>
<i class="fa fa-angle-down text-fade" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="font-size:18px"></i>
</h4>
<div class="collapse" id="collapseExample">
<h6 id="head__sub">
<a class="dropdown-item" role="button" aria-expanded="false"
aria-controls="innerCollapse">Pepper
<span class="col-sm-3"></span>
<span class="col-sm-3"></span>
<i class="fa fa-angle-down" aria-hidden="true" data-toggle="collapse" href="#innerCollapse" role="button" aria-expanded="false"
aria-controls="innerCollapse" style="font-size:18px"></i></a>
</h6>
</div>
<div class="collapse col-sm-3" id="innerCollapse">
<h6>
<a class="dropdown-item">Black Pepper</a>
<a class="dropdown-item">White Pepper</a>
</h6>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
Related
I am working on a basic Razor Pages web app which has three main pages. I want to be able to change the body's background colour depending on which Razor Page the user is currently viewing.
The body is contained in the _Layout.cshtml file where I am able to change the colour for the whole app:
<body style="background-color: lightcoral ">
However at this late hour in the day I cannot seem to figure out how I can change this colour depending on the page I am currently on. My initial thought is to look at using JQuery to get the body element and update the background style attribute through there, but I am still not certain how I tell which page I am currently on to decide the colour.
If you want to add different background colors to different areas,you can add body id with current area name,and add styles to different ids.Here is a demo:
_layout.cshtml:
#{
var routeUrl = this.Url.RouteUrl(ViewContext.RouteData.Values);
var area = routeUrl.Split("/")[1];
}
<body id="#area">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">RazorPageWithAreas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Entry" asp-page="/Create">Entry/Create</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Session" asp-page="/Create">Session/Create</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Trip" asp-page="/Create">Trip/Create</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
...
<style>
#Session {
background-color: #ffefef;
}
#Trip {
background-color: #fff8d7;
}
#Entry {
background-color: #eafff3;
}
</style>
</body>
folder structure:
result:
So I have come up with this which works, however the background is still flickering white when I navigate between pages. I would be interested to hear anyone else's solutions that might be better, more performant... Even to include some transitions ;)
I have three areas each containing a Create, Edit, Details, Index, Delete page. The Areas are Season, Trip, Entry. So, for each page under Season I have added a hidden field:
<input type="hidden" name="hdnPageSelector" id="hdnSeasonPage" />
Each page under Trip I have added:
<input type="hidden" name="hdnPageSelector" id="hdnTripPage" />
and each page under Entry I have added:
<input type="hidden" name="hdnPageSelector" id="hdnEntryPage" />
Then I have a piece of Javascript/JQuery that executes on DOMCONTENTLOADED:
document.addEventListener("DOMContentLoaded", function () {
var pageId = $("[name ='hdnPageSelector']").attr('id');
if (pageId == "hdnSeasonPage") {
$("body,html").css("background-color", "#ffefef");
}
if (pageId == "hdnTripPage") {
$("body,html").css("background-color", "#fff8d7");
}
if (pageId == "hdnEntryPage") {
$("body,html").css("background-color", "#eafff3");
}
});
As I mentioned, this seems to work but would be interested in hearing some better solutions to this.
You could set a value in ViewData in your code and then just use that in the layout page
<body style="background-color: #ViewData["BackgroundColor"]">
Personally I would probably use a class to drive this
<body class=" #ViewData["BackgroundClass"]">
I have a tooltip that displays two sets of different info. I need to see some kind of break between the two because right now it all in one single line.
<ng-template #template let-anchor>
<span style="font-size: 17px;">
Last Sale Date : {{ lastSale.lastSaleDate }}
</span>
<span style="font-size: 17px;">
Next Sale Date: {{ nextFuture.nextFutureDate }}
</span>
</ng-template>
<div kendoTooltip
showOn="none"
[tooltipTemplate]="template"
filter=".k-grid td"
(mouseover)="showTooltip($event)">
I would like to see it in a nice format and 2 separte lines so it doesn't overlap.
You can try with this code
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<a tabindex="0"
class="btn btn-lg btn-primary"
role="button"
data-html="true"
data-toggle="popover"
data-placement="bottom"
data-trigger="focus"
title="<b>Example popover</b> - title"
data-content="<div>Click <i class="fa fa-rss" aria-hidden="true"></i>
<hr>
</div>
</div>
</div>
I am trying to make my h1 text not squished to the left. I am also using bootstrap so I'm not sure if that effects anything:
h1 {
margin: 5px 40px 10px 70px;
}
<html>
<head>
<script src="https://use.fontawesome.com/d712ea1844.js"></script>
<title>About Mike</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/a1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">About Mike</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Resume</li>
<li>Artifact 1</li>
<li>Artifact 2</li>
</ul>
</div>
</div>
</nav>
<h1 id="annoyingtitle">Examples of Work</h1>
<p id="p0">This is an example of a paper I wrote while I attended Frankline Pierce University. In this paper I look at the lenses at which mental illness is viewed in different parts of the world.</p>
<br/>
<A id="mentallink" HREF="mentalillness.docx">Mental Illness Cultural Lenses and Barriers</A>
<br/>
<p id="p1"> Reflection: Writing this essay was easily one of my hardest assignments I have ever done. It involved levels of research that I hadn’t done before. I learned how to form an argument while drawing evidence from multiple sources. This has helped me in my research and writing skills. My favorite part of writing this paper was doing the research. On this assignment we were allowed to pull sources from almost anywhere as long as they were credible, I enjoyed being able to go as far as my mind could take me. The one risk I believe I took with this project was the structure and flow. The entire assignment was 9 pages long. This made my biggest problem getting it all to flow together and getting my ideas in the right order. If I could re-do this assignment I wish I would write a better conclusion to the paper. </p>
<br/>
<div id="annoying">
<ul id="list1" class="text-center list-unstyled">
<li class="col-md-4"> <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
<br>
#M
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i>
<br>
mike
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-envelope" aria-hidden="true"></i>
<br>
email#email.com
</li>
</ul>
</div>
</body>
</html>
Your margin is working. You want your h1 not squished to the left? How about horizontally centered? (I usually put margin bottom on headers though)
h1 {
margin: 0 0 10px 0;
text-align: center;
}
Make sure you are saving the file, refreshing your browser, maybe clearing your cache, close your browser and re-open, do the same for your text editor, etc. Your code does work.
Make sure the local URL is correct in your browser, etc., or post your entire code. Try a different browser. There either has to be an element that doesn't have a closed tag, another CSS file that is overriding your h1 elements, or something that you have not posted that is conflicting with your styles.
When trying to adjust to Bootstrap 3, I have encountered the following problem.
When I click on the button named F, I would like Home and Not Home to show up, but it does not at the moment.
This is the video I am learning from.
<div class= "navbar navbar-inverse navbar-static-top">
<div class="container">
<a class= "navbar-brand">Jackdh</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> F
</button>
<div class ="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Not Home</li>
</ul>
</div>
</div>
</div>
I'm pretty sure that you simply forgot to add bootstrap.js and also jquery.
With that included, everything works for me.
#op (original poster)
Marcel's answer gave me a clue so I checked my script tag
<script src="bootstrap.min.js"></script>
I forgot to add the bootstrap javascript folder "js/"
With this script tag everything works fine.
<script src="js/bootstrap.min.js"></script>
# Marcel - I couldn't vote up your answer due to lack of reputaion!
You forgot to add navbar-header div after container, Try this one !
`
Brand
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>`
Is there a way to assign more than one event to a bootstrap control via "data-toggle".
For example, lets say I want a button that has a "tooltip" and a "button" toggle assigned
to it.
Tried data-toggle="tooltip button", but only the tooltip worked.
EDIT:
This is easily "workaroundable" with
$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
If you want to add a modal and a tooltip without adding javascript or altering the tooltip function, you could also simply wrap an element around it:
<span data-bs-toggle="modal" data-bs-target="modal">
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">
Hover Me
</a>
</span>
Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine like this:
$(document).ready(function() {
$('body').tooltip({
selector: "[data-tooltip=tooltip]",
container: "body"
});
});
with this markup:
<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>
Notice the data-tooltip.
Update
Or simply,
$('[data-tooltip="tooltip"]').tooltip();
I managed to solve this issue without the need to change any markup with the following piece of jQuery. I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal. All you will need to do here is add the title to the button.
$('[data-toggle="modal"][title]').tooltip();
This is the best solution that I just implemented:
HTML
<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>
JAVASCRIPT that you anyway need to include regardless of what method you use.
$('[rel="tooltip"]').tooltip();
Not yet. However, it has been suggested that someone add this feature one day.
The following bootstrap Github issue shows a perfect example of what you are wishing for. It is possible- but not without writing your own workaround code at this stage though.
Check it out... :-)
https://github.com/twitter/bootstrap/issues/7011
Since Bootstrap forces you to initialize tooltips only through Javascript, I changed data-toggle="tooltip" (since it's useless then) to class="bootstrap-tooltip" and used this Javascript to initialize my tooltips:
$('.bootstrap-tooltip').tooltip();
And so I was free to use the data-toggle attribute for something else (e.g. data-toggle="button").
I use href to load the modal and leave data-toggle for the tooltip:
<a
data-toggle="tooltip"
data-placement="top"
title="My Tooltip text!"
href="javascript:$('#id').modal('show');"
>
+
</a>
Just for complement #Roman Holzner answer...
In my case, I have a button that shows the tooltip and it should remain disabled until furthermore actions. Using his approach, the modal works even if the button is disabled, because its call is outside the button - I'm in a Laravel blade file, just to be clear :)
<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
<button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
<i class="fa fa-trash fa-fw"></i>
</button>
</span>
So if you want to show the modal only when the button is active, you should change the order of the tags:
<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
<button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
<i class="fa fa-trash fa-fw"></i>
</button>
</span>
If you want to test it out, change the attribute with a JQuery code:
$('button[name=delete]').attr('disabled', false);
One more solution:
<a data-toggle="modal" data-target="#exampleModalCenter">
<span
class="tags"
data-toggle="tooltip"
data-placement="right"
title="Tooltip text"
>
Text
</span>
</a>
There is a nice solution using class .stretched-link. Button must have a class .position-relative. Here is a full working example:
Tooltip must be added to the button otherwise its position will be incorrect.
$('[data-toggle="tooltip"]').tooltip();
/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
<span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
Click Me!
</button>
<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body">Modal body</div></div></div></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
When you opening modal on a tag and want show tooltip and if you implement tooltip inside tag it will show tooltip nearby tag. like this
I will suggest that use div outside a tag and use "display: inline-block;"
<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
<span class="fa fa-plus"></span>
</a>
</div>
I've also tried to use
<span></span>
but
<a></a>
worked great for me.
Here you are:
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
<a data-bs-toggle="tooltip" title="Example">Some info here</a>
</button>
Even better, try to wrap the entire button (that uses popover) with a div:
<div data-bs-toggle="tooltip" title="Something">
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
Button label
</button>
</div>
HTML (ejs dianmic web page): this is a table list of all users and from nodejs generate the table. NodeJS provide dinamic "<%= user.id %>". simply change for any value like "54"
<span type="button" data-href='/admin/user/del/<%= user.id %>' class="item"
data-toggle="modal" data-target="#confirm_delete">
<div data-toggle="tooltip" data-placement="top" title="Delete" data-
toggle="modal">
<i class="zmdi zmdi-delete"></i>
</div>
</span>
<div class="modal fade" id="confirm_delete" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
data-backdrop="static">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticModalLabel">Static Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<p> This is a static modal, backdrop click will not close it. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form method="POST" class="btn-ok">
<input type="submit" class="btn btn-danger" value="Confirm"></input>
</form>
</div>
</div>
</div>
</div>
<!-- end modal static -->
JS:
$(document).ready(function(){
$('#confirm_delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('action', $(e.relatedTarget).data('href'));
});
});
<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>