Bootstrap tab in modal popup is not working

By -

I found a Bootstrap tab inside a modal popup(for login registration) in Codepen. The code is for only two tabs -Login & Registration- inside a modal popup. So, I added another tab for "Forgot Password".

But the problem is that forgot password tab isn't working at all, it isn't clickable at all. Nothing happens when I clicked on it.

The Code

@{
  ViewBag.Title = "Index";
  Layout = "~/Areas/Landing/Views/Shared/_LandingLayout.cshtml";
}
  <!DOCTYPE html>
  <html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>

  <body>
      <div class="container mt-5 pt-5 modal" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
          <div class="card mx-auto  border-0" style="width: 24rem;">
              <div class="card-header border-bottom-0 bg-transparent">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>

                  <ul class="nav nav-tabs justify-content-center pt-4" id="pills-tab" role="tablist">
                      <li class="nav-item">
                          <a class="nav-link active text-primary" id="pills-login-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login"
                             aria-selected="true">Login</a>
                      </li>

                      <li class="nav-item">
                          <a class="nav-link text-primary" id="pills-forgotpassword-tab" data-toggle="pill" href="#pills-forgotpassword" role="tab" aria-controls="pills-forgotpassword"
                             aria-selected="false">Forgot Password</a>
                      </li>
                      <li class="nav-item">
                          <a class="nav-link text-primary" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register"
                             aria-selected="false">Register</a>
                      </li>
                  </ul>

              </div>

              <div class="card-body pb-4">
                  <div class="tab-content" id="pills-tabContent">

                      <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
                          @Html.Partial("~/Areas/Landing/Views/Account/_Login.cshtml")
                          @*<div id="partialSummaryDiv"> Html.RenderPartial("~/Areas/Landing/Views/Account/_Login.cshtml", Model);</div>*@

                      </div>

                      <div class="tab-pane fade" id="pills-register" role="tabpanel" 
                           aria-labelledby="pills-register-tab">
                          @Html.Partial("~/Areas/Landing/Views/Account/_Register.cshtml")
                      </div>
                      <div class="tab-pane fade" id="pills-forgotpassword" role="tabpanel" 
                           aria-labelledby="pills-forgotpassword-tab">
                          @Html.Partial("~/Areas/Landing/Views/Account/_Register.cshtml")
                      </div>
                  </div>
              </div>
          </div>
      </div>

  </body>

</html>


from Recent Questions - Stack Overflow https://ift.tt/3zAPUdS
https://ift.tt/eA8V8J

Comments

Post a Comment

Popular posts from this blog

Spring Elasticsearch Operations

By -
Elasticsearch Operations Spring Data Elasticsearch uses two interfaces to define the operations that can be called against an Elasticsearch index. These are ElasticsearchOperations and ReactiveElasticsearchOperations. Whereas the first is used with the classic synchronous implementations, the second one uses reactive infrastructure. The default implementations of the interfaces offer: Read/Write mapping support for domain types. A rich query and criteria api. Resource management and Exception translation. ElasticsearchTemplate The ElasticsearchTemplate is an implementation of the ElasticsearchOperations interface using the Transport Client. @Configuration public class TransportClientConfig extends ElasticsearchConfigurationSupport {   @Bean   public Client elasticsearchClient() throws UnknownHostException {                      Settings settings = Settings.builder().put("cluster.name", "elasticsearch")....
Read more

Network Error and Timeout on Authorize.net JS

By -
i am using authorize.net acceptUI.js in order to create a hosted payment form for credit card acceptance. The problem arising now is that, going on the checkout page, I have the following console message: GET https://js.authorize.net/v3/AcceptUI.js net::ERR_NAME_NOT_RESOLVED Which is weird, cause I cannot ping the domain or anything, as my computer cannot resolve the domain. However, this issue is also reported by individual customers and it seems to be sporadically and not happening the entire time, cause i can see other orders going through. Does anyone know how such an error can be caused, or any ideas how it can be resolved? Thanks for your help EDIT: I just checked the A DNS record for js.authorize.net and am getting the following result only: js.authorize.net. 100 IN CNAME js.authorize.net.cdn.cloudflare.net. Doing the same for js.authorize.net.cdn.cloudflare.net. does not return an A Record, unless I specifically instruct to use 1.1.1.1 as DNS server I...
Read more

Object oriented programming concepts (OOPs)

By -
Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects". Re-usability is the main concept of Oops. There are few major principles of object-oriented paradigm. If any programming Language supports this principles that programming language called Object-oriented programming. Below are object oriented programming concepts : 1. Object        Read More about Object     http://theprogrammersfirst.blogspot.in/2016/07/java-object-concept.html
Read more