Pop window displaying same result for each window in View

Pop window displaying same result for each window in View - c#

I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem
When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback
However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002
Here is my code for the View
#{
ViewBag.Title = "Index";
Layout = "";
}
#model PagedList.IPagedList<Siza.Models.Review>
#using PagedList.Mvc;
<!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="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
#Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Reviews
</td>
</tr>
</table>
I really not sure how to solve this issue. Help would be greatly apprececiated

On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_#Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
Also href attribute in <li> element is invalid, so you should remove it.
Desired result would be
<div id="reviewpopup_1">
//div content here
</div>
and later
Review Number: #Html.DisplayFor(modelItem => item.ReviewID)

I managed to figure it out:) You can use the item.ReviewID as a div ID
{
//Popup window content
<div id="#item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}

Related

Create an image slider for multiple diffrent galleries in ASP NET

I have a map where anyone can add a custom marker with info and images.
I want to create for each marker with more than 1 image, a slider.
Now each marker looks something like that:
I want that if there are multiple images for lets say for 'n' markers, I want to make all the images hidden except the first one and make a slider for each one of them.
This is the code now:
foreach (var _Data in Model)
{
<div class="popup" id="overlay-container-#_Data.Id">
<div class="overlay">
<div class="content"> #*Content <-Text->*#
<div class="close-btn" onclick="togglePopup(#_Data.Id)">×</div>
<h3><u>Category</u>: #_Data.category</h3><br />
<h5><u>Title</u>: #_Data.title</h5>
<u>Description</u>: <br /> <textarea disabled cols="50" rows="10" style="resize:none; background: none; border:hidden" class="accept-policy"> #_Data.remarks </textarea> <br />
<b>Urgence</b>: #_Data.statUrgence <br />
<br />
<div id="slideshow-container" style="height:200px; width:380px; display: flex; overflow: hidden;"> #*The Images*#
#{
string #path = #_Data.path;
string ImgPath = #path.Substring(#path.IndexOf("Files") - 1, (#path.Length - (#path.IndexOf("Files") - 1)));
string[] ImgPathArray = ImgPath.Split('\\');
string[] filePaths = Directory.GetFiles(#path); // _Data.path
foreach (var file in filePaths)
{
var temp = file;
List<string> set1 = path.Split('\\').Distinct().ToList();
List<string> set2 = temp.Split('\\').Distinct().ToList();
var diff = set2.Count() > set1.Count() ? set2.Except(set1).ToList() : set1.Except(set2).ToList();
<img style="display: block; margin-left: auto; margin-right: auto; width: auto;"
src="~/#string.Join("/", ImgPathArray).Remove(0,1)/#string.Join("", diff)" />
}
}
</div>
<br />
</div>
</div>
</div>
<script> #*Display markers*#
markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point([parseFloat(#_Data.coordLat), parseFloat(#_Data.coordLong)]));
marker.setId(#_Data.Id);
//console.log(marker.getId());
markers.getSource().addFeature(marker);
</script>
}
<style> #*Style for the marker's popuop*#
.popup .overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1;
display: none;
}
.popup .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #fff;
width: auto;
height: auto;
z-index: 2;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.popup .close-btn {
position: absolute;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
background: #222;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height: 23.5px;
text-align: center;
border-radius: 50%;
}
.popup.active .overlay {
display: block;
}
.popup.active .content {
transition: all 300ms ease-in-out;
transform: translate(-50%, -50%) scale(1);
}
</style>

You can use Bootstrap Image slider (carousel).
For example, you have a list of image paths：
#{
List<string> imagePath = new List<string>() { "/images/img1.jpg", "/images/img2.jpg", "/images/img3.jpg" };
}
Then you can use carousel to load images:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-pause="hover">
<div class="carousel-inner" role="listbox">
#for (var i=0;i<imagePath.Count();i++)
{
var showClass = (i == 0 ? "active":"");
var path = imagePath[i];
<div class="item #showClass">
<div class="carousel-content">
<div style="margin: 0 auto">
<p>
<img src="#path" />
</p>
</div>
</div>
</div>
}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only"> Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-content {
color: black;
display: flex;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel();
});
</script>
Result:
If you want to have a carousel effect, set data-interval="2000" (2s switch).
Is this what you want?

Best way to render elements inside in div in random order in Razor pages

I'm working on ASP.NET MVC app. On one of the views (created by using Razor pages) I have a list of elements and I have to make them appear in random order on every request. So, for example on one request Google Chrome needs to be first, on next it should be Opera and so on. My question is, what is the best, most clean way to do it?
My code:
<div id="icons" style="flex-direction: row; display: flex; align-items: center; justify-content: space-around; margin-top: 3em; margin-right: 9em; margin-bottom: 3em; margin-left: 9em">
<div>
<img src="../../app/assets/images/svg/chrome.svg" alt="Chrome" width="100" height="100">
<p style="text-align: center;">Google Chrome</p>
</div>
<div>
<img src="../../app/assets/images/svg/firefox.svg" alt="Firefox" width="100" height="100">
<p style="text-align: center;">Mozilla Firefox</p>
</div>
<div>
<img src="../../app/assets/images/svg/edge.svg" alt="Edge" width="100" height="100">
<p style="text-align: center;">Microsoft Edge</p>
</div>
<div>
<img src="../../app/assets/images/svg/opera.svg" alt="Opera" width="100" height="100">
<p style="text-align: center;">Opera</p>
</div>
</div>
Just in case, entire file:
#using EPiServer.Core
#using EPiServer.Web.Mvc.Html
#model UnsupportedBrowserViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
#Model.Title
</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="http://fonts.cdnfonts.com/css/avenir" rel="stylesheet">
</head>
<body>
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Avenir, Helvetica, 'Helvetica Neue', sans-serif">
<img src="#Model.BrandLogo" alt="Logo of the brand" width="" height="" style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto;">
<h1 style="font-weight: bold; font-size: 45px; ">
#Model.Headline
</h1>
<div style="color: rgb(99, 102, 106); font-size: 22px;">
#Model.TextBlock
</div>
<div id="icons" style="flex-direction: row; display: flex; align-items: center; justify-content: space-around; margin-top: 3em; margin-right: 9em; margin-bottom: 3em; margin-left: 9em">
<div>
<img src="../../app/assets/images/svg/chrome.svg" alt="Chrome" width="100" height="100">
<p style="text-align: center;">Google Chrome</p>
</div>
<div>
<img src="../../app/assets/images/svg/firefox.svg" alt="Firefox" width="100" height="100">
<p style="text-align: center;">Mozilla Firefox</p>
</div>
<div>
<img src="../../app/assets/images/svg/edge.svg" alt="Edge" width="100" height="100">
<p style="text-align: center;">Microsoft Edge</p>
</div>
<div>
<img src="../../app/assets/images/svg/opera.svg" alt="Opera" width="100" height="100">
<p style="text-align: center;">Opera</p>
</div>
</div>
</div>
</body>
</html>

You can put the data into a collection and then order by Guid.NewGuid()
#{
var d = new Dictionary<string, string>
{
{"Chrome", "chrome.svg"},
{"Mozilla Firefox", "firefox.svg"},
{"Microsoft Edge", "edge.svg"},
{"Opera", "opera.svg"}
};
}
#foreach (var item in d.OrderBy(x => Guid.NewGuid()))
{
<div>
<img src="../../app/assets/images/svg/#item.Value" alt="#item.Key" width="100" height="100">
<p style="text-align: center;">#item.Key</p>
</div>
}

Why default style of asp.net core is like this

a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
I'm coding on asp.net core and I just realized that the top navbar of _layout.cshtml isn't on top of the , Then I opened a new project to find out why it's behaving like that. then I found out that when I add code in Body of _layout page it'll float on left side of screen and it hurt the actuall template , Could you guys help me to put the navbar on top of the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - PadshahOnlineShop</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/bootstrap/Bootstrap-rtl.css"/>
</head>
<body>
<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-controller="Home" asp-action="Index">PadshahOnlineShop</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-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - PadshahOnlineShop - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
enter image description here

In the css code you shared I find this:
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
}
display: flex may affect the top navbar of _layout.cshtml , you can try to remove it to see if it works fine.

DataTables pagination could be over the Bootstrap Fixed Footer of the ASP.NET Core MVC project template

I am working with ASP.NET Core 3.1 MVC and Bootstrap 4.4.1 and the default project template with DataTables.js (1.10.20 and css twitter bootstrap).
The first thing I must say is that I'm not good at all with css, so I think this could be the reason of this problem.
The following problem occurs when the screen has a lower resolution: (Tested resolution: 400x500)
I would like to know why this happened with the Fixed Footer and if there is a fix for this.
Thanks in advance for any assistance.
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<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">WebApplication1</a>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js"></script>
</body>
</html>

I used CSS flex to reduce the change to your markup.
The change I did were:
I added class content to your main content.
I changed the style for body to have these styles
body {
display: flex;
flex-direction: column;
height: 100vh;
}
Then I added these, and also updated the style for your .footer
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<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">WebApplication1</a>
</div>
</nav>
</header>
<div class="content container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="footer border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
</body>
You can see it working here:
https://jsfiddle.net/8ba9cdxe/

you can change the position of the footer to static then it will be fixed.

Try remove posistion:absolute in footer class
.footer {
/*position: absolute;*/
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}

Setting "Active" from carousel in html code

I have a project that contains several views with some "carousel".For example, this is one of the pages with some buttons. p1
and when I click, for example, at the first button "Ver mais" it shows this p2
So far so good! But if I get out of this "window" and click on another button "ver mais", it happens this, that is, the slide doesn't start on the first image.p3
My html code is this(I only post the code from two galleries of images because I have a few and it would become too extensive):
window.onload = function() {
$(document).ready(function() {
$('#data').after('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('' + pageNum + ' ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
}
body {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
width: 960px;
margin: 40px auto;
}
h2 {
font-size: 21px;
color: #008000;
font-weight: normal;
}
#ancora {
text-align: right;
color: black;
position: absolute;
top: 205px;
right: 200px;
text-decoration: underline;
}
#customers {
border-collapse: collapse;
}
#customers td,
#customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
background-color: black;
color: white;
}
th,
td {
padding: 5px;
text-align: center;
}
.center {
text-align: center;
}
.btn-info {
color: #fff;
background-color: rgba(0, 128, 0, 1);
border-color: rgba(0, 0, 0, .075);
cursor: pointer !important;
}
.btn {
text-align: left;
}
.btn-info:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:active:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:focus {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.container {
width: auto;
height: auto;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
* {
-webkit-box-sizing: content-box;
}
.imagem {
width: 150px;
height: 150px;
object-fit: cover;
}
#data tr {
display: none;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
#data td,
#data th {
border: 1px solid #ddd;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
background-color: black;
color: white;
}
td {
width: 350px;
text-align: center;
}
a:-webkit-any-link {
color: white;
cursor: pointer;
text-decoration: underline;
}
#nav {
margin: 0 auto;
float: none;
display: table;
}
#nav a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
#nav a.active {
background-color: #008000;
color: white;
border: 1px solid #008000;
}
#nav a:hover:not(.active) {
background-color: #ddd;
}
#nav a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.carousel-control.right {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Projetos de Jardim & Lazer</h2>
<a id="ancora" href="/Home/Index">Página Inicial</a>
<table id="data" style="width:100%">
<tbody>
<tr>
<th></th>
<th><strong>Tipo de relva</strong></th>
<th><strong>Descrição</strong></th>
<th><strong>Localidade</strong></th>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Boticas1.jpg"></td>
<td><strong>DOMO® SCALA (PHILI)</strong></td>
<td>Boticas Hotel Art & Spa</td>
<td>Boticas - Vila Real</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Boticas Hotel Art & Spa</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Boticas2.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas3.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas4.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas5.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® SCALA (PHILI)
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Seia1.jpg"></td>
<td><strong>DOMO® MONZA</strong></td>
<td>Centro Escolar</td>
<td>Seia - Guarda</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Centro Escolar de Seia</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Seia2.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia3.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia4.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® MONZA
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
Any suggestions? Another question, where do I change the time of transition from an image to another?

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Pop window displaying same result for each window in View - c#

Related

Create an image slider for multiple diffrent galleries in ASP NET

Best way to render elements inside in div in random order in Razor pages

Why default style of asp.net core is like this

DataTables pagination could be over the Bootstrap Fixed Footer of the ASP.NET Core MVC project template

Setting "Active" from carousel in html code

Categories

Resources