responsiveness is not working for bootstrap alert and forgot password link

See also questions close to this topic

• Moving appended path in a div (d3.js)

  I have a map that I seem to be unable to move the position of. Here's my HTML:

  <div class="container">
      <!-- Title -->
      <h1 class="title has-text-centered">New York</h1>
      <h2 class="subtitle has-text-centered">Income vs Poverty</h2>
  
      <div class="columns">
        <div class="column is-half">
          <svg class="current" width="780" height="850" style="text-align:left;" ></svg>
        </div>
         <div class="column is-half">
          <svg class="2015" width="580" height="800"></svg>
        </div>
      </div>
  

  And here's where I draw the map and append it to the 'current' svg:

   var geoPath = d3.geoPath()
  .projection( albersProjection );
  
  
  
  d3.select("svg.current").selectAll("path")
  .data( CaliforniaCountiesOverdoses.features )
  .enter()
  .append( "path" )
  .attr( "fill", "white" )
  .attr( "opacity", .8 )
  .attr( "stroke", "#696969" )
  .attr("left", 200)
  .attr( "border-radius", '50%' )
  .attr( "stroke-width", ".35" )
  .attr( "d", geoPath )
      .attr("class","counties")
  
      .attr("fill", function(d) { 
          var value = currentMap.get(d.properties.ID);
          return (value != 0 ? current_color(value) : "grey");  
  

  The problem is I can't move the map (i.e the 'counties' class within the SVG rectangle. I'd like it to be way further to the left. I've tried to set the viewBox of the 'counties' class :

  $('counties').each(function () { $(this)[0].setAttribute('viewBox', '0 0 100 100') });
  

  And Ive tried other CSS manipulation:

  .counties {
  
   text-align: left;
  

  }

  All with no luck. Can any one tell me what i'm missing in my approach here?
• Chart.js Tooltip Positioning Following Marker

  I have been experimenting with the Chart.js plugin on my site and it seems to suit most of my needs. The only thing I need to accomplish is keeping the tooltip at the top of the chart, instead of popping up and down. It would also be nice if I could attach it to the vertical line I draw so users can have a standard reference point. Below is the snipet of my code. Any help is appreciated. Thanks!

  var ctx = document.getElementById("myChart").getContext('2d');
  
  Chart.defaults.LineWithLine = Chart.defaults.line;
  Chart.controllers.LineWithLine = Chart.controllers.line.extend({
    draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);
  
      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
        var activePoint = this.chart.tooltip._active[0],
          ctx = this.chart.ctx,
          x = activePoint.tooltipPosition().x,
          topY = this.chart.scales['y-axis-0'].top,
          bottomY = this.chart.scales['y-axis-0'].bottom;
        // draw line
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, topY);
        ctx.lineTo(x, bottomY);
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#000';
        ctx.stroke();
        ctx.restore();
      }
    }
  });
  
  
  var myLineChart = new Chart(ctx, {
    type: 'LineWithLine',
    data: {
      labels: ["A", "B", "C", "D", "E", "F"],
      datasets: [{
        data: [12, 19, 3, 5, 2, 3],
        radius: 0,
        borderColor: 'red',
        fill: false
      }]
    },
    options: {
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      tooltips: {
        displayColors: false,
        intersect: false,
        mode: 'index',
        callbacks: {
          title: function(tooltipItems, data) {
            return '';
          },
          label: function(tooltipItem, data) {
            var datasetLabel = '';
            var label = data.labels[tooltipItem.index];
            return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '°F';
          }
        }
      }
    }
  });

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <div style="width:300px;height:100px;"><canvas id="myChart"></canvas></div>
• Customize nested ordered lists numbering

  I have nested lists of which I can't change the structure of. The first li element must not be included in the numbering, however, its children must ALL be numbered. Here is the JsFiddle.

  ol li ol {
    counter-reset: section;
    list-style-type: none;
  }
  
  ol li ol li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
  }

  <ol id="root">
    <li>List item two with subitems (this should not be numbered):
      <ol id="toc0">
        <li>Subitem 1 (This should be numbered 1)</li>
        <li>Subitem 2 (This should be 2)</li>
        <ol>
          <li> subitem (this should be 2.1)</li>
          <li> subitem (this should be 2.2)</li>
          <ol>
            <li> subitem (This should be 2.2.1)</li>
            <li> subitem (This should be 2.2.2)</li>
          </ol>
        </ol>
        <li>Subitem 3 (This should be 3)</li>
        <li>Subitem 4 (This should be 4)</li>
      </ol>
    </li>
  </ol>
• How to use vw and vh css with React Native

  I'm creating a basic login using React Native with a logo and 2 inputs:

  //import liraries
  import React, { Component } from 'react';
  import { View, Text, StyleSheet, Image } from 'react-native';
  
  // create a component
  class Login extends Component {
      render() {
          const imageURL = require('./images/CircleLogo.png');
          return (
              <View style={styles.container}>
                  <View style={styles.loginContainer}>
                      <Image resizeMode="contain" style={styles.logo} source={imageURL} />
                  </View>
                  <View style={styles.formContainer}>
                      <LoginForm /> 
                  </View>
              </View>
          );
      }
  }
  
  // define your styles
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: 'aliceblue',
      },
      loginContainer:{
          alignItems: 'center',
          flexGrow: 1,
          justifyContent: 'center'
      },
      logo: {
          position: 'absolute',
          width: '70vw',
          height: '70vw',
          maxWidth: 300
      }
  });
  
  //make this component available to the app
  export default Login;
  

  As you can see i am using vw and vh css measurements.

  This works on the web, but not on iOS or Android.

  Does anyone have a good suggestion for handling vw and vh measurements?

  Side Note: It appears react accepts percentages as seen here, which I may revert to. But my question pertains to specifically the vw and vh measurements.
• how to create a responsive footer in material?

  I am trying to develop a page footer in angular 6. I am using angular material and not using bootstrap.

  Can anyone help to change this code into the angular material syntax?

  I want to convert this footer into the full responsive Material UI design.

  If possible then can I make this footer as responsive as well?

              .app-footer {
            margin-top: 2em;
            text-align: center;
            vertical-align:middle;
            min-height: 100%
          }
          
          .app-footer-link { 
            line-height: 1.5em;
          }
          
          .app-footer-link p {
              margin: 0;
          }
      
          .row/*:after*/ {
        display: flex;
        /*content: "";
        display: table;
        clear: both;*/
      }
      
      .firstrow/*:after*/ {
        display: flex;
        /*content: "";
        display: table;
        clear: both;*/
        padding-top: 20px;
      }
      
      .column {
        flex: 25%;
        /*width:20%;*/
        float:left;
        font-size:12px;
      }
      .headingcolumn {
        flex: 25%;
        /*width:20%;*/
        float:left;
        font-size:18px;
        /*line-height:12px;*/
      }
      .maincolumnleft {
        flex: 50%;
        /*width: 50%;*/
        float: left;
      }
      .maincolumnright {
        /*flex: 50%;*/
        width: 50%;
        float: right;
      }
      .fullcolumn {
        width: 100%;
        /*flex:100%;*/
        font-size: 12px;
        text-align: center;
        vertical-align: middle;
      }
      
      .heading{
        font-size:18px;
      }
  
          @media screen and (max-width: 600px) {
        .column {
          /*flex:100%;*/
          width: 100%;
        }
        .headingcolumn {
          /*flex: 100%;*/
          width: 100%;
        }
        .maincolumnleft {
          /*flex: 100%;*/
          width: 100%;
        }
        .maincolumnright {
          /*flex: 100%;*/
          width: 100%;
        }
      }

   
  
       ------------footer.component.html---------------------------
          <footer class="app-footer">
        <div class="app-footer-link">
          <div class="firstrow">
            <div class="headingcolumn"></div>
            <div class="headingcolumn">B</div>
            <div class="headingcolumn">S</div>
            <div class="headingcolumn">About Us</div>
            <div class="headingcolumn">C Service</div>
          </div>
          <div class="row">
            <div class="column"></div>
            <div class="column">New Acc</div>
            <div class="column">New Acc</div>
            <div class="column">About</div>
            <div class="column">Help</div>
          </div>
          <div class="row">
            <div class="column"></div>
            <div class="column">Cat</div>
            <div class="column">St</div>
            <div class="column">Sit</div>
            <div class="column">Contact Us</div>
          </div>
          <div class="row">
            <div class="fullcolumn">
              <span class="heading">Follow:</span>
            </div>
          </div>
          <div class="row">
            <div class="fullcolumn">
              Copyright &copy; {{getYear()}} 
            </div>
          </div>
        </div>
        </footer>

  
• how do add a dialog to the bootstrap 4 modal button rails 5?

  I have added a bootstrap modal to my rails 5 app successfully however I am trying to add a dialog similar to other rails form to ask them to confirm if they wish to continue. With this modal I need to to get a question with a cancel or cont that will then fire the modal. For example they press redeem then prior to showing the modal a question will appear. "do you wish to cont your offer will be redeemed. I have used the code below in the past with rails however do not know how to apply it to bootstrap modal.

  <%= link_to theme_icon_tag("trash"), deal_path(deal), 'data-toggle': 
  'tooltip', title: 'Delete',data: { confirm: 'Are you sure?' }, method: 
  :delete, class: 'btn btn-link' %>
  

  my research has shown only how to use modal as the dialog alert itself. Do I have to use a modal inside a modal. Or is there a JS or bootstrap code to achieve this

  my modal code below:

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-outline-primary btn-block" data- 
  toggle="modal" data-target="#redeem">Redeem Now</button>
  
  <div id="redeem" class="modal fade" role="dialog">
    <div class="modal-dialog">
  
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data- 
     dismiss="modal">&times;</button>
          <h4 class="modal-title"><%= @deal.deal_title %></h4>
        </div>
        <div class="modal-body">
          <p>Your coupon code is <%= @deal.promo_code %>. You just saved 
           a bunch of mullah $$$$</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data- 
        dismiss="modal">Close</button>
        </div>
      </div>
  
    </div>
  </div>
  
• Return a Error View after call a popup modal

  I have a problem with the front end of my application.

  I have the following method to return errors:

      public class ErrorController : Controller
        {
          //Erro 500 Servidor
          public ActionResult Index()
          {
              ViewBag.AlertaErro = "Ocorreu um Erro :(";
              ViewBag.MensagemErro = "Tente novamente ou " +
                  "contate um Administrador";
  
              return View("Error");
          }
  
          //Error 404
          public ActionResult NotFound()
          {
              ViewBag.AlertaErro = "Ocorreu um Erro :(";
              ViewBag.MensagemErro = "Não existe uma página para a URL informada";
  
              return View("Error");
          }
  
           //Erro 401 permissão de execução       
          public ActionResult AccessDenied()
          {
              //ViewBag.AlertaErro = "Acesso Negado :(";
              //ViewBag.MensagemErro = "Você não tem permissão para executar isso";
  
              return PartialView("Error403");
          }
  
      }
  }
  

  My index page is where the modal code is and where it calls the "details" method that has the access restriction

  <td>
  
         <a href="@Url.Action("Edit","Barcos", new { id = item.Id })" class="btn btn-warning" data-target="modaleditar">
                      <span title="Editar" class="glyphicon glyphicon-pencil">  </span>
                  </a>
                  <a href="#" class="btn btn-primary btnDetalhes" data-value="@item.Id" data-modal="">
                      <span title="Editar" class="glyphicon glyphicon-search">  </span>
                  </a>
                  <a href="@Url.Action("Delete","Barcos", new { id = item.Id })" class="btn btn-danger">
                      <span title="Excluir" class="glyphicon glyphicon-trash"></span>
                  </a>
  
                  </td>
  
  
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h2 class="modal-title" id="exampleModalLabel">Detalhes </h2>
                  <h4>Dados da Embarcação</h4>
  
              </div>
              <div class="modal-body">
                  <div id="teste"></div>
              </div>
          </div>
      </div>
  </div>
  
  
  @section scripts{
  
      <script type="text/javascript">
  
  
          $(document).ready(function () {
  
              $.ajaxSetup({ cache: false });
  
  
              $(".btnDetalhes").click(function () {
  
                  var id = $(this).data("value");
  
                  $("#teste").load("/Barcos/Details/" + id, function () {
                      $('#myModal').modal("show");
                  });
              });
          });
  
      </script>
  
  
  
      }
  

  Error View:

  @model System.Web.Mvc.HandleErrorInfo
  
  @{
      ViewBag.Title = "Acesso Negado!";
  }
  
  <h1 class="text-danger">Opa!</h1>
  <h2 class="text-danger">Acho que você não pode fazer isto :(</h2>
  

  But when I click on the details method and the modal opens, the error message is getting inside my navbar class.

  Look at the image below

  NAVBAR ERROR

  MODAL

  How would I do to open the error page within the modal or open on another page, without the message appearing inside the navbar
• How to add class on distance of div from left side

  i need your urgent help.

  i want to add class on when is have some distance from left side.

  i don't know JavaScript or J query, please help me, thanks