Issue
Consider the following code
@using App.Models
@model App.Models.AllPeopleViewModel
@{
ViewBag.Title = "Index";
}
<html>
<head>
</head>
<body>
@foreach (Customer person in Model.Content)
{
<div class="card border-primary text-center">
<div class="card-body">
<h5 class="card-title">@Html.DisplayFor(modelItem => person.name)</h5>
<p class="card-text">
@Html.DisplayFor(x => person.houseNameOrNumber), @Html.DisplayFor(x => person.Street),
@Html.DisplayFor(x => person.Town), @Html.DisplayFor(x => person.PostCode)
</p>
<div class="visually-hidden" id="call_button"></div><a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
</div>
<div class="card-footer text-muted">
Identifier - @Html.DisplayFor(modelItem => person.identifier)
</div>
</div>
}
</body>
</html>
Specifically the line
<div class="visually-hidden" id="call_button"></div><a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
I'm trying to hide this button. I've tried this, I've tried d.none, but neither of them work. Bootstrap cdn is included in my layout page and working, I know this as the cards are displaying correectly, but nothing hides that button! I want to be able to "unhide" it later on via javascript. I also want the hidden element to not effect the rendering of the page, untill I unhide it, if that makes sense!
Thanks you in advance, this one is driving me mental!
Solution
The problem is within the markup, currently the markup is:
<div class="visually-hidden" id="call_button">
</div>
<a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
Meaning you are hiding an empty <div>. To hide the <a>, it should be inside the .visually-hidden <div>.
Also, the visually-hidden class only makes the element invisible but it still occupies space (can be useful for elements that only should be visible for screen readers). To completely hide it, use the d-none (or display: none;) class instead. Not related to Bootstrap but more information about visibility: hidden; vs display: none;: https://www.geeksforgeeks.org/what-is-the-difference-between-visibilityhidden-and-displaynone/
Answered By - pistevw
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.