responsiveness is not working for bootstrap alert and forgot password link

See also questions close to this topic

• How to delete div and all element inside div? Javascript, html, css

  I have a function that clears the entire div and it disappears but still appears in the inspect (html). This is a real problem because we have this input type field on the email and I got this empty data in email. I only want when this value is not chosen to completely remove me from html and inspect. Look at my code and try to catch the error. The most important things in the whole code that you need to pay attention are onchange="checkSelected()" in html and first script tag which manipulate with that. It should simply become a display none but it still stands there.

  <div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
        <div class="modal-content" style="display: flex;">
  
  
  
           <div class="modal-body">
  
  
              <form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">
  
                 <div class="container-fluid">
  
                    <div class="step_1"  >
                       <h3 class="modal-title">Reifenmontage Termin buchen  </h3>
                       <div class="row termin_row">
                          <div class="col-xs-12 col-sm-4">
                             <div class="row">
                                <label>Pneu-Typ</label>
                             </div>
                          </div>
                          <div class="col-xs-12 col-sm-6">
                             <div class="row">
                                <select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
                                   <option value="Motorrad">Motorrad</option>
                                   <option value="Auto">Auto</option>
                                </select>
                             </div>
                          </div>
                       </div>
                       <div id="additionalRow"  class="row termin_row" >
                       <div id="reifenmontage-input" class="row termin_row">
                          <div class="col-xs-12 col-sm-4">
                             <div class="row">
                                <label>Mark und model</label>
                             </div>
                          </div>
                          <div class="col-xs-12 col-sm-4">
                             <div class="row">
                                <select name="marka" class="form-control" id="button-getdata">
                                </select>
                             </div>
                          </div>
                          <div class="col-xs-12 col-sm-4">
                             <div class="row">
                                <select name="model" class="form-control" id="result" > 
                                </select> 
                             </div>
                          </div>
  
                       </div>
                       </div>
                       <div class="row termin_row">
                          <div class="col-sm-4 col-xs-12">
                             <div class="row"><label>2. Terminvorschlag</label></div>
                          </div>
                          <div class="col-sm-4 col-xs-6">
                             <div class="row">
                                <div class="input-group date" id="date-2" data-termin="1">
                                   <input type='text' class="form-control" name="date[1]" />
                                   <span class="input-group-addon">um</span>
                                </div>
                             </div>
                          </div>
                          <div class="col-sm-4 col-xs-6">
                             <div class="row">
                                <div class="input-group time" id="time-2" data-termin="1">
                                   <input type='text' class="form-control" name="time[1]" />
                                   <span class="input-group-addon">Uhr</span>
                                </div>
                             </div>
                          </div>
                       </div>
  
                       <div class="row">
                          <div class="checkbox">
                             <label>
                                <input type="checkbox" name="accept" id="accept"> Ich akzeptiere die <a href="teilnahmebedingungen" target="_blank">Teilnahmebedingungen</a>
                             </label>
                          </div>
                       </div>
  
                       <div class="row text-center">
                          <button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
                       </div>
                    </div>
  
                    <div class="step_2">
                       <h3 class="modal-title">Your contact info</h3>
  
                       <div class="">
                          <div class="form-group clearfix">
                             <input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
                          </div>
                          <div class="form-group clearfix">
                             <input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
                          </div>
                          <div class="form-group clearfix">
                             <input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
                          </div>
                          <div class="text-center">
                             <button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
                          </div>
                       </div>
  
                    </div>
  
                 </div>
  
              </form>
  
           </div>
           <div class="modal-footer">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
           </div>
        </div>
     </div>
  </div> 
  

  and my script tag

  <script type="text/javascript">
     let selectItem = document.getElementById('pneu');
     let additionalRow = document.getElementById('additionalRow');
     function checkSelected() {
        if (selectItem.selectedIndex == "1") {
           additionalRow.style.display = 'none';
        } else {
           additionalRow.style.display = 'block';
        }
     }
  </script> 
  
  <script type="text/javascript">
  $('#button-getdata').on('change', function() {
      $.ajax({
          url: 'index.php?route=api/reifenmontage/get_marka_data',
          type: 'post',
          data: $('#reifenmontage-input select'),
          dataType: 'json',
          beforeSend: function() {
  
          },
          success: function(json) {
  
              if (json['success']) {
                 $("#result").empty();
                  for (i in json['success']) {
                  var element = json['success'][i];
                  var o = new Option(element['model'], element['model']);
                 $("#result").append(o);
                      html = "\t<option   value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
                      $("#result").append(o); 
                  }
                 //  document.getElementById("schedule_form").reset();
              }   
  
          }
      });
  });
  </script>  
  
  <script type="text/javascript">
  
  $.ajax({
   url: 'index.php?route=api/reifenmontage/mark',
   context: document.body,
   success: function(data) {
     const selectControl = $('#button-getdata');
     selectControl.html(data.map(ExtractData).join(''));
   }
  });
  
  function ExtractData(item) {
  return ` <option value="${item.value}">${item.label}</option>`;
  }
  
  </script>
  
• How can i get my table values from html to servlet?

  I need to get my html table values in my servlet

  Hi,

  Im doing a project during my acadamic courses about sudoku website.

  During my project I have encounterd a problem that I can't slove - get my table html values into my servlet. I have tried doing things like set hidden names and getParameterValues but none of them worked.

  this is my html table

  <table class="center">
      <% int n =9;
      for(int s = 0; s<n; s++){
          %>
      <tr>
  
      <% for(int f=0; f<n; f++)
      {
      %>
      <td><%  int z = SF[s][f];
          if(z==0) {%>
          <input type="text">
          <% } else { %>
          <%=SF[s][f]%>
          <%}%>
      </td  hidden name="z">
      <% } %>
      </tr  hidden name="z">
      <% } %>
  </table>
  

  and this is my empty servlet

  package View;
  
  import org.omg.CORBA.SystemException;
  
  import javax.servlet.ServletException;
  import javax.servlet.annotation.WebServlet;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import java.io.IOException;
  import java.io.PrintWriter;
  
  @WebServlet(name = "CheckSudokuServlet",urlPatterns =     "/CheckSudokuServlet")
  public class CheckSudokuServlet extends HttpServlet {
      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          PrintWriter out = response.getWriter();
          //tried -   String td[]=request.getParameterValues("z");
      }
  
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
      }
  }
  
• Cakephp 3.6.14: Display html formatted text in text field

  I have a form with some text fields, I want to know if it is possible to display HTML formatted text in an editable text field.

  This is the field:

  echo $this->Form->control('instructions'); 
  

  How I can display it HTML formatted? Do I need a WYSIWYG Plugin or there is another way?
• How to change the color of words in jumbotron using the reference $jumbotron?

  I am learning web design and js .On my webpage, I define the default color is black in jumbotron h2.

  .jumbotron h2{
      text-align: center;
      color:black;
  }
  

  define reference var $jumbotron = $('.jumbotron h2'); while running, I use $jumbotron.html('hellow world'); ...... to display some words and I want to change its color but I do not know how to set new color while running, how to get the color value and assign a new value for my variable $jumbotron? I have tried $jumbotron.color = or $jumbotron.color('') but they are wrong. I have not found any useful answers with google.
• Vertically Scale an image in multiple background images

  I'm Making a multiple background image, and I want an image(flower image) to be going vertically if the browser is been resize accordingly.

  Below is a screenshot of the background image I want the flower hand to go up anytime I'm resizing the browser.

  https://imgur.com/zntKZUy

  Below is my code the second URL is the image I want to go up(vertical) whenever I'm resizing the browser.

  .desktopbackground {
    background: url("wp-content/uploads/2019/02/mobile-Girl-2.0.png") 50px bottom no-repeat, 
                url("/wp-content/uploads/2019/02/Flower-3.0.png") 100% -10% no-repeat,
                url("/wp-content/uploads/2019/02/desktop-Background-1.0.jpg") center no-repeat;
    background-attachment: fixed;
    background-size:515px,555px,cover;    
  }
  

  I've tried everything but it keeps going horizontal.
• Change Bootstrap button group properties

  I have a button group from Bootstrap :

  <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-secondary active">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
              </label>
              <label class="btn btn-secondary">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
              </label>
              <label class="btn btn-secondary">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
              </label>
        </div>
  

  Maybe its basic but, I am trying to change :

  1. background color of selected/unselected
  2. text - font/color

  and nothing works. Like this one : Bootstrap 4: Buttongroup - change active color
• JQUERY $(document).click vs $(document).ready

  $(document).ready(function(e) {
    if ($('#sidebar').hasClass('active')) {
      $('#dismiss, .overlay').on('click', function() {
        $('#sidebar').removeClass('active');
        $('.overlay').removeClass('active');
      });
    } else {
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar').addClass('active');
        $('.overlay').addClass('active');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
      });
    }
  });

  .fixed-top {
    z-index: 1 !important;
  }
  
  #sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100vh;
    z-index: 999;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
    overflow-y: hidden;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  }
  
  #sidebar.active {
    left: 0;
  }
  
  #dismiss {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: #7386D5;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  
  #dismiss:hover {
    background: #fff;
    color: #7386D5;
  }
  
  .overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }
  
  .overlay.active {
    display: block;
    opacity: 1;
  }
  
  #sidebar .sidebar-header {
    padding: 0px;
    background: #6d7fcc;
    text-align: center;
  }
  
  #sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
  }
  
  #sidebar ul p {
    color: #fff;
    padding: 10px;
  }
  
  #sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
  }
  
  #sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
  }
  
  #sidebar ul li.active>a,
  a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
  }
  
  a[data-toggle="collapse"] {
    position: relative;
  }
  
  .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
  
  ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
  }
  
  ul ul ul a {
    font-size: 0.7em !important;
    padding-left: 40px !important;
    background: #6d7fcc;
  }
  
  ul.CTAs {
    padding: 20px;
  }
  
  ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
  }
  
  a.download {
    background: #fff;
    color: #7386D5;
  }
  
  a.article,
  a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
  }

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
  
  <nav id="sidebar">
    <div class="sidebar-header">
      <div id="dismiss">
        <i class="fas fa-arrow-left"></i>
      </div>
    </div>
  </nav>
  
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:#6d7fcc;">
    <div class="container-fluid">
      <button type="button" id="sidebarCollapse" class="btn btn-info">
        <i class="fas fa-align-left"></i>
        <span>Table Of Contents</span>
      </button>
    </div>
  </nav>
  
  <div class="overlay"></div>

  with this $(document).ready(function (e){...});code, my button for opening the sidebar is working, but the dismiss button isn't?

  but if changed it to $(document).click(function (e) {...});it works but i have to press the toggle button twice for the first time to open the sidebar. Why is that so?

  and in addition, may ask for help to close the sidebar when clicking outside of it? I have this

  $(document).click(function(e) {
      if ($('#sidebar').('active') && !$(e.target).is('#sidebar')) {
          $('#sidebar').removeClass('active');
          $('.overlay').removeClass('active');
      }
  });
  

  code but this doesn't do the trick.

  Already edited the code. I've organized the imports of bootstrap files.
• How to collapsed only first bootstrap panel?

  I want to active only first bootstrap panel but when it loaded collapse/active all panel. Here is my code:

  <?php                                                            
       $the_query = new WP_Query( array(
       'posts_per_page'=>-1,
       'post_type' => 'news-and-events',
       'order'   => 'ASC',
       'category_name'     => 'news-events',
       'paged' => get_query_var('paged') ? get_query_var('paged') : 1) ); 
  ?>  
  
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  
  <?php 
       $i = 1;
       while ($the_query -> have_posts()) : $the_query -> the_post(); 
   ?>
  
  <div class="panel panel-default">
    <div class="panel-heading silva-news-panel" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapseOne">
          <?php the_title(); ?>
        </a>
      </h4>
    </div>
  <div id="collapse-<?php echo $i;?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  <div class="panel-body nws-body">
      <h3><i class="fa fa-newspaper-o" aria-hidden="true"></i> <?php echo get_the_date(); ?></h3>
      <div class="nws-body-img">
        <?php the_post_thumbnail();?>
      </div>
      <?php the_field('news_description'); ?>
  </div>
  </div>
      </div>
    <?php
           $i++;
           endwhile;
    ?>
  

  Here Class panel-collapse collapse in in is collapsed.When I loaded the page in active all panel. I want to collapsed only first panel. Other will be inactive.