0

My input elements will not show on screen when I run the webapplicatioin. here is my html

@model Boekingssysteem.ViewModels.BewerkDocentViewModel;
@{
    ViewData["Title"] = "Docent bewerken";
}

<div class="row">
    <div class="col-md-6">
        <h1>@ViewData["Title"]</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <form asp-action="BewerkDocent" method="post" class="form-inline justify-content-center">
            <input type="hidden" asp-for="RolId" />
            <input type="hidden" asp-for="Rnummer" />
            <div asp-validation-summary="ModelOnly" class="text-danger"/>
            <div class="row formRow">
                <div class="form-group col-md-6">
                    <input type="text" disabled class="form-control" id="inputRnummer" asp-for="Rnummer" class="form-control" />
                    <span asp-validation-for="Rnummer" class="text-danger"></span>
                </div>
                <div class="form-group col-md-6 align-bottom">
                    <button type="button" class="btn btn-outline-primary w-100">Richtingen</button>
                </div>
            </div>
            <div class="row formRow">
                <div class="form-group col-md-6">
                    <label asp-for="Voornaam" class="control-label">@Html.DisplayNameFor(model => this.Model.Voornaam)</label>
                    <input type="text" class="form-control" asp-for="Voornaam" class="form-control" />
                    <span asp-validation-for="Voornaam" class="text-danger"></span>
                </div>
                <div class="form-group col-md-6" style="display: inline-block">
                    <label asp-for="Achternaam" class="control-label">@Html.DisplayNameFor(model => this.Model.Achternaam)</label>
                    <input type="text" class="form-control" asp-for="Achternaam" class="form-control" />
                    <span asp-validation-for="Achternaam" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group formRow">
                <label asp-for="Email" class="control-label">@Html.DisplayNameFor(model => this.Model.Email)</label>
                <input type="email" class="form-control" asp-for="Email" class="form-control placeholder=" rnummer@thomasmore.be"" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <br>
            <input type="submit" class="btn btn-primary" value="Bevestig"/>
        </form>
    </div>
</div>

Here is a screenshot of the page enter image description here under every label should be a textbox and on the bottom should be an submit button. but it is not showing.

does anyone know what's wrong?

I tried to disable javascript but no help. I tried to search the web but I can't find any answers.

gilleslag
  • 13
  • 2
  • Try to add `Layout = null;` line after `ViewData["Title"] = "Docent bewerken";` in the view and check result. In additional try to use _**View Page Source**_ in the browser to analyze you page content. Usually this related to your CSS declarations. – Jackdaw Apr 02 '23 at 15:17
  • all seems fine. Can you share any CSS applied to input tag? – Muhammad Saqlain Apr 02 '23 at 15:20
  • that removes all the css. But i can see the textboxes back – gilleslag Apr 02 '23 at 15:21
  • its just bootstrap that I use – gilleslag Apr 02 '23 at 15:21
  • @gilleslag: Check this: [Make input invisible through css?](https://stackoverflow.com/q/1078451/6630084) – Jackdaw Apr 02 '23 at 15:25
  • input { height: 30px; width: 30px; appearance: none; background-color: black; border-radius: 50%; opacity: 0; } @MuhammadSaqlain input:hover { cursor: pointer; } – gilleslag Apr 02 '23 at 15:27
  • Thanks for the help. in css I should set opacity to 1 instead of 0. That fixed the problem – gilleslag Apr 02 '23 at 15:32

1 Answers1

0

Remove opacity: 0; from the <input> style. This property with value 0 make your button transparent. Default value is 1.

Jackdaw
  • 7,626
  • 5
  • 15
  • 33