问:
AttributeError: 'list' object has no attribute 'shape'?
can somebody help me, I've been trying to run the script below

```<code>X_train = np.reshape(X_train, newshape = (X_train.shape[0], X_train.shape[1], 1))
</code>```

but only to have an error like this

```<code>AttributeError Traceback (most recent call last)<ipython-input-48-9880c2146f81> in <module>()----> 1 X_train = np.reshape(X_train, newshape = (X_train.shape[0], X_train.shape[1], 1))
AttributeError: 'list' object has no attribute 'shape'
</code>```

and here is the full script

```<code>import numpy as np
import matplotlib.pyplot as plt
import pandas as pd

downloads = pd.read_csv('Datatraining.csv')
training_set = downloads.iloc[:, 1:2].values

from sklearn.preprocessing import MinMaxScaler
sc = MinMaxScaler(feature_range = (0, 1))
training_set_scaled = sc.fit_transform(training_set)

X_train = []
y_train = []
for i in range(72, len(training_set_scaled)):
    X_train.append(training_set_scaled[i-60: i, 0])
    y_train.append(training_set_scaled[i, 0])
    X_train, y_train = np.array(X_train), np.array(y_train)

X_train = np.reshape(X_train, newshape = (X_train.shape[0], X_train.shape[1], 1))
</code>```

答:
Your X_train is not a np array but a list. You first have to convert your list to a numpy array

```<code>X_train = np.asarray(X_train)
</code>```

Body:
can somebody help me, I've been trying to run the script below

X_train = np.reshape(X_train, newshape = (X_train.shape[0], X_train.shape[1], 1))

but only to have an error like this

AttributeError Traceback (most recent call last)<ipython-input-48-9880c2146f81> in <module>()----> 1 X_train = np.reshape(X_train, newshape = (X_train.shape[0], X_train.shape[1], 1))
AttributeError: 'list' object has no attribute 'shape'

and here is the full script

import numpy as np
import matplotlib.pyplot as plt
import pandas as pd

downloads = pd.read_csv('Datatraining.csv')
training_set = downloads.iloc[:, 1:2].values

from sklearn.preprocessing import MinMaxScaler
sc = MinMaxScaler(feature_range = (0, 1))
training_set_scaled = sc.fit_transform(training_set)

X_train = []
y_train = []
for i in range(72, len(training_set_scaled)):
    X_train.append(training_set_scaled[i-60: i, 0])
    y_train.append(training_set_scaled[i, 0])
    X_train, y_train = np.array(X_train), np.array(y_train)

X_train = np.reshape(X_train, newshape = (X_train.shape[0], X_train.shape[1], 1))

Body:
Your X_train is not a np array but a list. You first have to convert your list to a numpy array

X_train = np.asarray(X_train)


来源: stackexchange

问:
Bootstrap4 Multi-Step Form not responsive
I use boostrap4 and angular 7

I use multi step form.
I have a problem when I display in mobile device , it's not responsive

this a screen in desktop

this a screen in mobile

I want that the step depend on screen size.

this is the code :

html

```<code><!-- MultiStep Form -->
<div class="container-fluid" id="grad1">

    <div class="row justify-content-center mt-0">

        <div class=" card-header">
            <h2 class="title float-left" style="color:cadetblue;">
              <i class="fa fa-plus-circle" ></i>
              Save Request
            </h2>

          </div>

        <div class="col-11 col-sm-9 col-md-7 col-lg-12 text-center p-0 mt-3 mb-2">
            <div class="card px-0 pt-4 pb-0 mt-3 mb-3">

                <div class="row">
                    <div class="col-md-12 mx-0">
                        <form id="msform">
                            <!-- progressbar -->
                            <ul id="progressbar">
                                <li class="active" id="step1"><strong>1</strong></li>
                                <li id="step2"><strong>2</strong></li>
                                <li id="step3"><strong>3</strong></li>
                                <li id="step4"><strong>4</strong></li>
                                <li id="step5"><strong>5</strong></li>
                                <li id="step6"><strong>6</strong></li>
                                <li id="step7"><strong>7</strong></li>
                                <li id="step8"><strong>8</strong></li>
                                <li id="step9"><strong>9</strong></li>
                                <li id="step10"><strong>10</strong></li>

                            </ul> <!-- fieldsets -->
                            <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step1</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                    <div >
                                      <label>Last NAME: </label>
                                      <input
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                   <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>

                    <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step2</h2>

                                    <div class=" form-group">
                                      <label>Adr: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                    <div >
                                      <label>Phone: </label>
                                      <input
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>

                 <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step3</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>

                <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step4</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step5</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step6</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step7</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step8</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step9</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>
                                <div class="form-card">
                                    <h2 class="fs-title">Test step10</h2>

                                    <div class=" form-group">
                                      <label>test: </label>
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">
                                    </div>

                                  </div>
                                  <input type="button" name="next" class="next action-button btn-info float-right" value="submit" />

                              </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</code>```

css

```<code>* {
    margin: 0;
    padding: 0
}

html {
    height: 100%
}

#grad1 {

}

#msform {
    text-align: center;
    position: relative;
    margin-top: 20px
}

#msform fieldset .form-card {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 20px 40px 30px 40px;
    box-sizing: border-box;
    width: 94%;
    margin: 0 3% 20px 3%;
    position: relative
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

#msform fieldset:not(:first-of-type) {
    display: none
}

#msform fieldset .form-card {
    text-align: left;
    color: #9E9E9E
}

#msform input,
#msform textarea {
    padding: 0px 8px 4px 8px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0.4285rem !important;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 16px;
    letter-spacing: 1px
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none;
    font-weight: bold;
    border-bottom: 2px solid skyblue;
    outline-width: 0
}

#msform .action-button {
    width: 100px;
    background: skyblue;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue
}

#msform .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #616161
}

select.list-dt {
    border: none;
    outline: 0;
    border-bottom: 1px solid #ccc;
    padding: 2px 5px 3px 5px;
    margin: 2px
}

select.list-dt:focus {
    border-bottom: 2px solid skyblue
}

.card {
    z-index: 0;
    border: none;
    border-radius: 0.5rem;
    position: relative
}

.fs-title {
    font-size: 25px;
    color: #2C3E50;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey,

}

#progressbar .active {
    color: #000000
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    width: 7%;
    float: left;
    position: relative
}

#progressbar #step1:before {
    font-family: FontAwesome;
    content: "\f023"
}

#progressbar #step1:before {
    font-family: FontAwesome;
    content: "\f007"
}

#progressbar #step2:before {
    font-family: FontAwesome;
    content: "\f007"
}

#progressbar #step3:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step4:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step5:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step6:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step7:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step8:before {
    font-family: FontAwesome;
    content: "\f007"
}

#progressbar #step9:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #step10:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #step11:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #step12:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #step13:before {
    font-family: FontAwesome;
    content: "\f00c"
}

#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 18px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1

}

#progressbar li.active:before,
#progressbar li.active:after {
    background: skyblue
}

.radio-group {
    position: relative;
    margin-bottom: 25px
}

.radio {
    display: inline-block;
    width: 204;
    height: 104;
    border-radius: 0;
    background: lightblue;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    cursor: pointer;
    margin: 8px 2px
}

.radio:hover {
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3)
}

.radio.selected {
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1)
}

.fit-image {
    width: 100%;
    object-fit: cover
}
</code>```

js :

```<code>$(document).ready(function(){

  var current_fs, next_fs, previous_fs; //fieldsets
  var opacity;

  $(".next").click(function(){

  current_fs = $(this).parent();
  next_fs = $(this).parent().next();

  //Add Class Active
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  //show the next fieldset
  next_fs.show();
  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
  step: function(now) {
  // for making fielset appear animation
  opacity = 1 - now;

  current_fs.css({
  'display': 'none',
  'position': 'relative'
  });
  next_fs.css({'opacity': opacity});
  },
  duration: 600
  });
  });

  $(".previous").click(function(){

  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();

  //Remove class active
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

  //show the previous fieldset
  previous_fs.show();

  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
  step: function(now) {
  // for making fielset appear animation
  opacity = 1 - now;

  current_fs.css({
  'display': 'none',
  'position': 'relative'
  });
  previous_fs.css({'opacity': opacity});
  },
  duration: 600
  });
  });

  $('.radio-group .radio').click(function(){
  $(this).parent().find('.radio').removeClass('selected');
  $(this).addClass('selected');
  });

  $(".submit").click(function(){
  return false;
  })

  });
</code>```

答:
I've made the arrangements for you. I mentioned the changes I made in the comment lines. I have some advice I can give you.

1-be more careful when using the Bootstrap grid system, usually bootstrap already offers a responsible structure. when adjusting column sizes, remember that each size will react differently.

2-even if you make some structures responsible, especially in small sizes such as mobile, you may need to change the dimensions with media query to fit the items on the screen.

  * {
  margin: 0;
  padding: 0
}

html {
  height: 100%
}

#grad1 {}

#msform {
  text-align: center;
  position: relative;
  margin-top: 20px
}

#msform fieldset .form-card {
  background: white;
  border: 0 none;
  border-radius: 0px;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 40px 30px 40px;
  box-sizing: border-box;
  width: 94%;
  margin: 0 3% 20px 3%;
  position: relative
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-bottom: 20px;
  position: relative
}

#msform fieldset:not(:first-of-type) {
  display: none
}

#msform fieldset .form-card {
  text-align: left;
  color: #9E9E9E
}

#msform input,
#msform textarea {
  padding: 0px 8px 4px 8px;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0.4285rem !important;
  margin-bottom: 25px;
  margin-top: 2px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 16px;
  letter-spacing: 1px
}

#msform input:focus,
#msform textarea:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none;
  font-weight: bold;
  border-bottom: 2px solid skyblue;
  outline-width: 0
}

#msform .action-button {
  width: 100px;
  background: skyblue;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue
}

#msform .action-button-previous {
  width: 100px;
  background: #616161;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #616161
}

select.list-dt {
  border: none;
  outline: 0;
  border-bottom: 1px solid #ccc;
  padding: 2px 5px 3px 5px;
  margin: 2px
}

select.list-dt:focus {
  border-bottom: 2px solid skyblue
}

.card {
  z-index: 0;
  border: none;
  border-radius: 0.5rem;
  position: relative
}

.fs-title {
  font-size: 25px;
  color: #2C3E50;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: left
}

#progressbar {
  display: flex;
  /* added*/
  justify-content: center;
  /* added*/
  margin-bottom: 30px;
  /* overflow: hidden; removed */
  color: lightgrey;
}

#progressbar .active {
  color: #000000
}

#progressbar li {
  list-style-type: none;
  font-size: 12px;
  width: 94%;
  /* changed and calc for form width*/
  position: relative
}

#progressbar #step1:before {
  font-family: FontAwesome;
  content: "\f023"
}

#progressbar #step1:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step2:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step3:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step4:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step5:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step6:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step7:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step8:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step9:before {
  font-family: FontAwesome;
  content: "\f09d"
}

#progressbar #step10:before {
  font-family: FontAwesome;
  content: "\f09d"
}

#progressbar #step11:before {
  font-family: FontAwesome;
  content: "\f09d"
}

#progressbar #step12:before {
  font-family: FontAwesome;
  content: "\f09d"
}

#progressbar #step13:before {
  font-family: FontAwesome;
  content: "\f00c"
}

#progressbar li:before {
  width: 50px;
  height: 50px;
  line-height: 45px;
  display: block;
  font-size: 18px;
  color: #ffffff;
  background: lightgray;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: skyblue
}

.radio-group {
  position: relative;
  margin-bottom: 25px
}

.radio {
  display: inline-block;
  width: 204;
  height: 104;
  border-radius: 0;
  background: lightblue;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  cursor: pointer;
  margin: 8px 2px
}

.radio:hover {
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3)
}

.radio.selected {
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1)
}

.fit-image {
  width: 100%;
  object-fit: cover
}

/*  Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {
  /* added all this*/
  #progressbar li:before {
    width: 35px;
    height: 35px;
    line-height: 22px;
    font-size: 15px;
    padding: 7px;
  }
  #progressbar li:after {
    top: 18px;
    z-index: -1
  }
  /*  Small devices (landscape phones, less than 768px) */
  @media (max-width: 767.98px) {}
  /*  Medium devices (tablets, less than 992px) */
  @media (max-width: 991.98px) {}
  /*  Large devices (desktops, less than 1200px) */
  @media (max-width: 1199.98px) {}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>
  <title>Document</title>
</head>

<body>

  <div class="container-fluid" id="grad1">

    <div class="row no-gutters justify-content-center mt-0">

      <div class=" card-header">
        <h2 class="title float-left" style="color:cadetblue;">
          <i class="fa fa-plus-circle"></i> Save Request
        </h2>

      </div>

      <div class="col-md-12 text-center p-0 mt-3 mb-2">
        <div class="card px-0 pt-4 pb-0 mt-3 mb-3">

          <div class="row">
            <div class="col-md-12">
              <form id="msform">
                <!-- progressbar -->
                <ul id="progressbar">
                  <li class="active" id="step1"><strong>1</strong></li>
                  <li id="step2"><strong>2</strong></li>
                  <li id="step3"><strong>3</strong></li>
                  <li id="step4"><strong>4</strong></li>
                  <li id="step5"><strong>5</strong></li>
                  <li id="step6"><strong>6</strong></li>
                  <li id="step7"><strong>7</strong></li>
                  <li id="step8"><strong>8</strong></li>
                  <li id="step9"><strong>9</strong></li>
                  <li id="step10"><strong>10</strong></li>

                </ul>
                <!-- fieldsets -->
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step1</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                    <div>
                      <label>Last NAME: </label>
                      <input name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>

                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step2</h2>

                    <div class=" form-group">
                      <label>Adr: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                    <div>
                      <label>Phone: </label>
                      <input name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>

                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step3</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>

                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step4</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step5</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step6</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step7</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step8</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step9</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step10</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="submit" />

                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html></code>```

ContentLicense: CC BY-SA 4.0

Body:
I use boostrap4 and angular 7

I use multi step form.
I have a problem when I display in mobile device , it's not responsive

this a screen in desktop

this a screen in mobile

I want that the step depend on screen size.

this is the code :

html

              Save Request

                        <form id="msform">

1

2

3

4

5

6

7

8

9

10

                            <fieldset>

Test step1

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                      Last NAME:
                                      <input
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                   <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>

                    <fieldset>

Test step2

                                      Adr:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                      Phone:
                                      <input
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>

                 <fieldset>

Test step3

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>

                <fieldset>

Test step4

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>

Test step5

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>

Test step6

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>

Test step7

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>

Test step8

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>

Test step9

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                              </fieldset>
                <fieldset>

Test step10

                                      test:
                                      <input class=" form-control"
                                             name="secondname"
                                             placeholder="" required
                                             type="text">

                                  <input type="button" name="next" class="next action-button btn-info float-right" value="submit" />

                              </fieldset>
                        </form>

css

* {
    margin: 0;
    padding: 0
}

html {
    height: 100%
}

#grad1 {

}

#msform {
    text-align: center;
    position: relative;
    margin-top: 20px
}

#msform fieldset .form-card {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 20px 40px 30px 40px;
    box-sizing: border-box;
    width: 94%;
    margin: 0 3% 20px 3%;
    position: relative
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

#msform fieldset:not(:first-of-type) {
    display: none
}

#msform fieldset .form-card {
    text-align: left;
    color: #9E9E9E
}

#msform input,
#msform textarea {
    padding: 0px 8px 4px 8px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0.4285rem !important;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 16px;
    letter-spacing: 1px
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none;
    font-weight: bold;
    border-bottom: 2px solid skyblue;
    outline-width: 0
}

#msform .action-button {
    width: 100px;
    background: skyblue;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue
}

#msform .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #616161
}

select.list-dt {
    border: none;
    outline: 0;
    border-bottom: 1px solid #ccc;
    padding: 2px 5px 3px 5px;
    margin: 2px
}

select.list-dt:focus {
    border-bottom: 2px solid skyblue
}

.card {
    z-index: 0;
    border: none;
    border-radius: 0.5rem;
    position: relative
}

.fs-title {
    font-size: 25px;
    color: #2C3E50;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey,

}

#progressbar .active {
    color: #000000
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    width: 7%;
    float: left;
    position: relative
}

#progressbar #step1:before {
    font-family: FontAwesome;
    content: "\f023"
}

#progressbar #step1:before {
    font-family: FontAwesome;
    content: "\f007"
}

#progressbar #step2:before {
    font-family: FontAwesome;
    content: "\f007"
}

#progressbar #step3:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step4:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step5:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step6:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step7:before {
    font-family: FontAwesome;
    content: "\f007"
}
#progressbar #step8:before {
    font-family: FontAwesome;
    content: "\f007"
}

#progressbar #step9:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #step10:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #step11:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #step12:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #step13:before {
    font-family: FontAwesome;
    content: "\f00c"
}

#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 18px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1

}

#progressbar li.active:before,
#progressbar li.active:after {
    background: skyblue
}

.radio-group {
    position: relative;
    margin-bottom: 25px
}

.radio {
    display: inline-block;
    width: 204;
    height: 104;
    border-radius: 0;
    background: lightblue;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    cursor: pointer;
    margin: 8px 2px
}

.radio:hover {
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3)
}

.radio.selected {
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1)
}

.fit-image {
    width: 100%;
    object-fit: cover
}

js :

$(document).ready(function(){

  var current_fs, next_fs, previous_fs; //fieldsets
  var opacity;

  $(".next").click(function(){

  current_fs = $(this).parent();
  next_fs = $(this).parent().next();

  //Add Class Active
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  //show the next fieldset
  next_fs.show();
  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
  step: function(now) {
  // for making fielset appear animation
  opacity = 1 - now;

  current_fs.css({
  'display': 'none',
  'position': 'relative'
  });
  next_fs.css({'opacity': opacity});
  },
  duration: 600
  });
  });

  $(".previous").click(function(){

  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();

  //Remove class active
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

  //show the previous fieldset
  previous_fs.show();

  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
  step: function(now) {
  // for making fielset appear animation
  opacity = 1 - now;

  current_fs.css({
  'display': 'none',
  'position': 'relative'
  });
  previous_fs.css({'opacity': opacity});
  },
  duration: 600
  });
  });

  $('.radio-group .radio').click(function(){
  $(this).parent().find('.radio').removeClass('selected');
  $(this).addClass('selected');
  });

  $(".submit").click(function(){
  return false;
  })

  });

Body:
I've made the arrangements for you. I mentioned the changes I made in the comment lines. I have some advice I can give you.

1-be more careful when using the Bootstrap grid system, usually bootstrap already offers a responsible structure. when adjusting column sizes, remember that each size will react differently.

2-even if you make some structures responsible, especially in small sizes such as mobile, you may need to change the dimensions with media query to fit the items on the screen.

  * {
  margin: 0;
  padding: 0
}

html {
  height: 100%
}

#grad1 {}

#msform {
  text-align: center;
  position: relative;
  margin-top: 20px
}

#msform fieldset .form-card {
  background: white;
  border: 0 none;
  border-radius: 0px;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 40px 30px 40px;
  box-sizing: border-box;
  width: 94%;
  margin: 0 3% 20px 3%;
  position: relative
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-bottom: 20px;
  position: relative
}

#msform fieldset:not(:first-of-type) {
  display: none
}

#msform fieldset .form-card {
  text-align: left;
  color: #9E9E9E
}

#msform input,
#msform textarea {
  padding: 0px 8px 4px 8px;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0.4285rem !important;
  margin-bottom: 25px;
  margin-top: 2px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 16px;
  letter-spacing: 1px
}

#msform input:focus,
#msform textarea:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none;
  font-weight: bold;
  border-bottom: 2px solid skyblue;
  outline-width: 0
}

#msform .action-button {
  width: 100px;
  background: skyblue;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue
}

#msform .action-button-previous {
  width: 100px;
  background: #616161;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #616161
}

select.list-dt {
  border: none;
  outline: 0;
  border-bottom: 1px solid #ccc;
  padding: 2px 5px 3px 5px;
  margin: 2px
}

select.list-dt:focus {
  border-bottom: 2px solid skyblue
}

.card {
  z-index: 0;
  border: none;
  border-radius: 0.5rem;
  position: relative
}

.fs-title {
  font-size: 25px;
  color: #2C3E50;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: left
}

#progressbar {
  display: flex;
  /* added*/
  justify-content: center;
  /* added*/
  margin-bottom: 30px;
  /* overflow: hidden; removed */
  color: lightgrey;
}

#progressbar .active {
  color: #000000
}

#progressbar li {
  list-style-type: none;
  font-size: 12px;
  width: 94%;
  /* changed and calc for form width*/
  position: relative
}

#progressbar #step1:before {
  font-family: FontAwesome;
  content: "\f023"
}

#progressbar #step1:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step2:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step3:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step4:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step5:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step6:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step7:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step8:before {
  font-family: FontAwesome;
  content: "\f007"
}

#progressbar #step9:before {
  font-family: FontAwesome;
  content: "\f09d"
}

#progressbar #step10:before {
  font-family: FontAwesome;
  content: "\f09d"
}

#progressbar #step11:before {
  font-family: FontAwesome;
  content: "\f09d"
}

#progressbar #step12:before {
  font-family: FontAwesome;
  content: "\f09d"
}

#progressbar #step13:before {
  font-family: FontAwesome;
  content: "\f00c"
}

#progressbar li:before {
  width: 50px;
  height: 50px;
  line-height: 45px;
  display: block;
  font-size: 18px;
  color: #ffffff;
  background: lightgray;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: skyblue
}

.radio-group {
  position: relative;
  margin-bottom: 25px
}

.radio {
  display: inline-block;
  width: 204;
  height: 104;
  border-radius: 0;
  background: lightblue;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  cursor: pointer;
  margin: 8px 2px
}

.radio:hover {
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3)
}

.radio.selected {
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1)
}

.fit-image {
  width: 100%;
  object-fit: cover
}

/*  Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {
  /* added all this*/
  #progressbar li:before {
    width: 35px;
    height: 35px;
    line-height: 22px;
    font-size: 15px;
    padding: 7px;
  }
  #progressbar li:after {
    top: 18px;
    z-index: -1
  }
  /*  Small devices (landscape phones, less than 768px) */
  @media (max-width: 767.98px) {}
  /*  Medium devices (tablets, less than 992px) */
  @media (max-width: 991.98px) {}
  /*  Large devices (desktops, less than 1200px) */
  @media (max-width: 1199.98px) {}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>
  <title>Document</title>
</head>

<body>

  <div class="container-fluid" id="grad1">

    <div class="row no-gutters justify-content-center mt-0">

      <div class=" card-header">
        <h2 class="title float-left" style="color:cadetblue;">
          <i class="fa fa-plus-circle"></i> Save Request
        </h2>

      </div>

      <div class="col-md-12 text-center p-0 mt-3 mb-2">
        <div class="card px-0 pt-4 pb-0 mt-3 mb-3">

          <div class="row">
            <div class="col-md-12">
              <form id="msform">
                <!-- progressbar -->
                <ul id="progressbar">
                  <li class="active" id="step1"><strong>1</strong></li>
                  <li id="step2"><strong>2</strong></li>
                  <li id="step3"><strong>3</strong></li>
                  <li id="step4"><strong>4</strong></li>
                  <li id="step5"><strong>5</strong></li>
                  <li id="step6"><strong>6</strong></li>
                  <li id="step7"><strong>7</strong></li>
                  <li id="step8"><strong>8</strong></li>
                  <li id="step9"><strong>9</strong></li>
                  <li id="step10"><strong>10</strong></li>

                </ul>
                <!-- fieldsets -->
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step1</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                    <div>
                      <label>Last NAME: </label>
                      <input name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>

                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step2</h2>

                    <div class=" form-group">
                      <label>Adr: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                    <div>
                      <label>Phone: </label>
                      <input name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>

                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step3</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>

                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step4</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step5</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step6</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step7</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step8</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step9</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="next" />

                </fieldset>
                <fieldset>
                  <div class="form-card">
                    <h2 class="fs-title">Test step10</h2>

                    <div class=" form-group">
                      <label>test: </label>
                      <input class=" form-control" name="secondname" placeholder="" required type="text">
                    </div>

                  </div>
                  <input type="button" name="next" class="next action-button btn-info float-right" value="submit" />

                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>


问:
Negative y axe in matplotlib
I want to make negative values on y-axe using

```<code>plt.yticks([10**(-8), 10**(-5), 10**(-2), 10, 10**(4)]) OR
plt.ylim([10**(-8), 10**(4)])
</code>```

However, I have the following result:

Numbers are clustering together. This graph is a sample that I am looking forward to making :)

答:
You need to make the scale of your y-axis logarithmic. Also, the values you are using are not negative. These are less than 1 and therefore the exponent is negative. Use</p>

```<code>plt.yscale('log')
</code>```

Title: Negative y axe in matplotlib

Body:
I want to make negative values on y-axe using

plt.yticks([10**(-8), 10**(-5), 10**(-2), 10, 10**(4)]) OR
plt.ylim([10**(-8), 10**(4)])

However, I have the following result:

Numbers are clustering together. This graph is a sample that I am looking forward to making :)

Body:
You need to make the scale of your y-axis logarithmic. Also, the values you are using are not negative. These are less than 1 and therefore the exponent is negative. Use

plt.yscale('log')


问:
how to update records after drag and drop
I am using react-sortable-hoc to drag/drop and reorder items. When I do this though I want to update the database (node.js and mongodb).

Firstly, I have changed it to be a functional component which is why my syntax looks a bit different to the example.

```<code>const onSortEnd = ({ oldIndex, newIndex }) => {

    setItems((items) => arrayMove(items, oldIndex, newIndex));

    const newArray = arrayMove(items, oldIndex, newIndex);

    async function makePatchRequest() {
      const config = {
        method: "patch",
        url: "http://localhost:8000/api/admin/faq/order",
        headers: { Authorization: "Bearer " + auth.token },
        data: {
          order: newArray,
        },
      };

      let res = await axios(config, { order: newArray });

    }
    makePatchRequest();
  };
</code>```

I am sending the new array to the backend with everything in the order after the drag and drop. The issue is that I don't really know what to do with it on the backend. Do I need to delete all records and then loop over the array and insert new records? I initially wanted to loop over the records and update them but it isn't actually doing anything, probably because the code is wrong or my logic is wrong because all it is doing is overwriting with the exact same data because all that has changed is the order of the array, not the actual id or _id in the array.

```<code>exports.faqSort = async (req, res) => {
  const { order } = req.body;
  console.log(order);

  await order.map((o) => {
    Faq.update({ _id: o._id }, { $set: { id: o.id } });
  });
};
</code>```

This is the array when the page loads:

```<code>[
  {
    _id: '5ed273049b268308302cb1fb',
    question: 'question 1',
    answer: 'answer 1',
    id: 1,
    __v: 0
  },
  {
    _id: '5ed273439b268308302cb1fd',
    question: 'question 2',
    answer: 'answer 2',
    id: 2,
    __v: 0
  },
  {
    _id: '5ed276129b268308302cb1ff',
    question: 'quesiton 3',
    answer: 'answer 3',
    id: 3,
    __v: 0
  }
]
</code>```

And this is the new array I send to the backend

```<code>[
  {
    _id: '5ed276129b268308302cb1ff',
    question: 'quesiton 3',
    answer: 'answer 3',
    order: 3,
    __v: 0
  },
  {
    _id: '5ed273049b268308302cb1fb',
    question: 'question 1',
    answer: 'answer 1',
    order: 1,
    __v: 0
  },
  {
    _id: '5ed273439b268308302cb1fd',
    question: 'question 2',
    answer: 'answer 2',
    order: 2,
    __v: 0
  }
]
</code>```

答:
If you updating the documents, use the index values from the array to update the order id.

const promises = order.map( async (o, index) => {

  let orderkey = index + 1;
  const promise = Faq.updateOne({ _id: o._id }, { $set: { order: orderkey } });

  return promise;

});

const results = await Promise.all(promises);
```

This way the order key will be updated based on the order of the array you are sending .

But think about actually updating the order key already in the frontend, before sending it to the backend. This way the order of the array wouldn't matter.

Body:
I am using react-sortable-hoc to drag/drop and reorder items. When I do this though I want to update the database (node.js and mongodb).

Firstly, I have changed it to be a functional component which is why my syntax looks a bit different to the example.

const onSortEnd = ({ oldIndex, newIndex }) => {

    setItems((items) => arrayMove(items, oldIndex, newIndex));

    const newArray = arrayMove(items, oldIndex, newIndex);

    async function makePatchRequest() {
      const config = {
        method: "patch",
        url: "http://localhost:8000/api/admin/faq/order",
        headers: { Authorization: "Bearer " + auth.token },
        data: {
          order: newArray,
        },
      };

      let res = await axios(config, { order: newArray });

    }
    makePatchRequest();
  };

I am sending the new array to the backend with everything in the order after the drag and drop. The issue is that I don't really know what to do with it on the backend. Do I need to delete all records and then loop over the array and insert new records? I initially wanted to loop over the records and update them but it isn't actually doing anything, probably because the code is wrong or my logic is wrong because all it is doing is overwriting with the exact same data because all that has changed is the order of the array, not the actual id or _id in the array.

exports.faqSort = async (req, res) => {
  const { order } = req.body;
  console.log(order);

  await order.map((o) => {
    Faq.update({ _id: o._id }, { $set: { id: o.id } });
  });
};

This is the array when the page loads:

[
  {
    _id: '5ed273049b268308302cb1fb',
    question: 'question 1',
    answer: 'answer 1',
    id: 1,
    __v: 0
  },
  {
    _id: '5ed273439b268308302cb1fd',
    question: 'question 2',
    answer: 'answer 2',
    id: 2,
    __v: 0
  },
  {
    _id: '5ed276129b268308302cb1ff',
    question: 'quesiton 3',
    answer: 'answer 3',
    id: 3,
    __v: 0
  }
]

And this is the new array I send to the backend

[
  {
    _id: '5ed276129b268308302cb1ff',
    question: 'quesiton 3',
    answer: 'answer 3',
    order: 3,
    __v: 0
  },
  {
    _id: '5ed273049b268308302cb1fb',
    question: 'question 1',
    answer: 'answer 1',
    order: 1,
    __v: 0
  },
  {
    _id: '5ed273439b268308302cb1fd',
    question: 'question 2',
    answer: 'answer 2',
    order: 2,
    __v: 0
  }
]

Body:
If you updating the documents, use the index values from the array to update the order id.

const promises = order.map( async (o, index) => {

  let orderkey = index + 1;
  const promise = Faq.updateOne({ _id: o._id }, { $set: { order: orderkey } });

  return promise;

});

const results = await Promise.all(promises);

This way the order key will be updated based on the order of the array you are sending .

But think about actually updating the order key already in the frontend, before sending it to the backend. This way the order of the array wouldn't matter.


问:
Running python code in docker : "ImportError: No module named tqdm"
I have seen many posts about ImportError with python but no solution has worked so far.

I have a short code test.py using tqdm package to show progress bar in terminal. This script runs well in ubuntu terminal but raises a ""ImportError: No module named tqdm"" when run inside a docker container.
(the container allows me using openface algorithm running another python code that works just fine as long as tqdm is not included)

This is the Dockerfile from which docker container is build :

```<code>FROM bamos/openface

RUN pip install tqdm

RUN apt-get update
</code>```

on Linux Ubuntu

Thanks for the help !

EDIT : Problem solved with the following dockerfile

```<code>FROM bamos/openface

RUN ln -s /root/openface/models/ /models

RUN apt-get update && apt install python-pip

RUN pip install -U pip && pip install tqdm
</code>```

Thanks all !

答:
Try to specify the python version you want to use.

For example, python3.7 -m pip install tqdm.

Note that, you should have python and python-pip installed in that image.

Body:
I have seen many posts about ImportError with python but no solution has worked so far.

I have a short code test.py using tqdm package to show progress bar in terminal. This script runs well in ubuntu terminal but raises a ""ImportError: No module named tqdm"" when run inside a docker container.
(the container allows me using openface algorithm running another python code that works just fine as long as tqdm is not included)

This is the Dockerfile from which docker container is build :

FROM bamos/openface

RUN pip install tqdm

RUN apt-get update

on Linux Ubuntu

Thanks for the help !

EDIT : Problem solved with the following dockerfile

FROM bamos/openface

RUN ln -s /root/openface/models/ /models

RUN apt-get update && apt install python-pip

RUN pip install -U pip && pip install tqdm

Thanks all !


问:
Update data in an Access table from Excel with VBA
I insert data into an Access table from a row in Excel using the code here (Insert Data from Excel into Access).

I have a problem when inserting a record that is already in the table because of the same primary key value.

I want to update the record or delete the record and enter a new one with the same key.

Dim Connect As ADODB.Connection
Set Connect = New ADODB.Connection

Connect.Open "Provider=Microsoft.Ace.OLEDB.12.0;Data Source=C:\Users\ExcelFileName.xlsm;Extended Properties=Excel 8.0;" & "Persist Security Info=False"
Connect.Execute "INSERT INTO tbl_TCM_MAA_Data IN 'C:\DataBaseFileName.accdb' SELECT * FROM [SheetName$A2:O2]"

Connect.Close
Set Connect = Nothing
```

答:
```<code>xlFilepath = Application.ThisWorkbook.FullName

Set Var = Sheets1.Range("A1")

Connect.Execute "Delete * FROM [TableName] WHERE [Column Name] = " & Var & ""

SQL = "INSERT INTO tbl_TCM_MAA_Data " & _

"SELECT * FROM [Excel 12.0 Macro;HDR=YES;DATABASE=" & xlFilepath & "].[SheetName$A2:O2] where [Column Name] > 1"

Connect.Execute SQL
</code>```

Warning in your Datasheet Table The first 8 rows. Assuming theres a Heading (HDR=YES)
the next 6 rows should contain a dummy data to define your columns equivalent to your access table column definition.

Body:
xlFilepath = Application.ThisWorkbook.FullName

Set Var = Sheets1.Range("A1")

Connect.Execute "Delete * FROM [TableName] WHERE [Column Name] = " & Var & ""

SQL = "INSERT INTO tbl_TCM_MAA_Data " & _

"SELECT * FROM [Excel 12.0 Macro;HDR=YES;DATABASE=" & xlFilepath & "].[SheetName$A2:O2] where [Column Name] > 1"

Connect.Execute SQL

Warning in your Datasheet Table The first 8 rows. Assuming theres a Heading (HDR=YES)
the next 6 rows should contain a dummy data to define your columns equivalent to your access table column definition.


问:
storing images in xml file
I am new to XML. I have an XML document that I am inserting data manually. I wanted to know if it is possible to include an image in an XML file and not by using the file path. I have found something about encoding but I do not understand how this work and the option is not even available in the XML editor. After storing the images in the XML file, I will access it using javascript. Please provide further information on this matter.</p>

答: An image is binary data, and the usual way to store binary data in an XML document is by encoding it in base64 (which turns it into ASCII characters). Libraries to convert from binary to base64, and back, are widely available, but the details depend very much on your programming environment. There are also online services where you can upload an image and get back its base64 representation: an example is here https://www.base64encode.net/base64-image-encoder</p>

Title: storing images in xml file


问:
mySQL: Variable LIMIT
I'm using a SQL-statement to retrieve the top 5 entries in a list:

```<code>SELECT ... FROM table ORDER BY someColumn DESC LIMIT 5
</code>```

The result will look something like this:

```<code>Name       Count
Person B   10
Person D   8
Person A   5
Person E   5
Person C   4
</code>```

If there are more results with a value like the fifth entry in the list (4 in the example), I would like to show them too. Is there a way to achieve this with a single query?

So let's say the complete lists looks like this:

```<code>Name       Count
Person B   10
Person D   8
Person A   5
Person E   5
Person C   4
Person H   4
Person I   4
------------
Person G   3
Person F   1
Person J   1
</code>```

How can I modify my query to return the first seven results? Obviosuly I can't use LIMIT 7 or WHERE Count >= 4, as I don't know that in advance.

答:
Two solutions:

Sol 1: Use LIMIT 100 or so, and eliminate unwanted rows in your program.

Sol 2: Execute two queries, most probaby that will be more costly:

```<code>SELECT * FROM (SELECT ... FROM table ORDER BY
  someColumn DESC LIMIT 5)
  UNION (SELECT ... FROM table ORDER BY
         someColumn DESC LIMIT 50, 5);
</code>```

ContentLicense: CC BY-SA 3.0

Title: mySQL: Variable LIMIT

Body:
I'm using a SQL-statement to retrieve the top 5 entries in a list:

SELECT ... FROM table ORDER BY someColumn DESC LIMIT 5

The result will look something like this:

Name       Count
Person B   10
Person D   8
Person A   5
Person E   5
Person C   4

If there are more results with a value like the fifth entry in the list (4 in the example), I would like to show them too. Is there a way to achieve this with a single query?

So let's say the complete lists looks like this:

Name       Count
Person B   10
Person D   8
Person A   5
Person E   5
Person C   4
Person H   4
Person I   4
------------
Person G   3
Person F   1
Person J   1

How can I modify my query to return the first seven results? Obviosuly I can't use LIMIT 7 or WHERE Count >= 4, as I don't know that in advance.

Body:
Two solutions:

Sol 1: Use LIMIT 100 or so, and eliminate unwanted rows in your program.

Sol 2: Execute two queries, most probaby that will be more costly:

SELECT * FROM (SELECT ... FROM table ORDER BY
  someColumn DESC LIMIT 5)
  UNION (SELECT ... FROM table ORDER BY
         someColumn DESC LIMIT 50, 5);


问:
Can I know which exception was thrown inside a gtest EXPECT_NO_THROW (or ASSERT_NO_THROW)?
To test my C++ project I am using GoogleTest framework.
Normally I can use the following syntax to easily debug a failure:

```<code>EXPECT_TRUE(*statement*) << *debugMessage*;
</code>```

When I use the macro EXPECT_NO_THROW (or ASSERT_NO_THROW) I might of course do the same, but I do not have access to the exception object that was thrown (and caught) inside the macro itself and so the debugMessage cannot tell me anything about it.

Is it possible to show information about this exception in any way?

EDIT

Is not possible without any custom function/macro.

答:
I am a little bit late to the party, but here's one approach which works:

/**
 * @brief Wrap a code block with try-catch, handle exceptions thrown, print them
 * into EXCEPT_STREAM and rethrow.
 */
#define PRINT_AND_RETHROW(CODE_BLOCK, EXCEPT_STREAM) try{do{ CODE_BLOCK }while(0);}catch(const std::exception& ex){ EXCEPT_STREAM << "std::exception thrown: " << ex.what() << std::endl; throw;  }catch(...){ EXCEPT_STREAM << "unknown structure thrown" << std::endl; throw;}

/**
 * @brief Wrap a code block with try-catch, handle exceptions thrown, print them
 * into std::cerr and rethrow.
 */
#define PRINT_STDERR_AND_RETHROW(CODE_BLOCK) PRINT_AND_RETHROW(CODE_BLOCK, std::cerr)

#define EXPECT_NO_THROW_PRINT(CODE_BLOCK) EXPECT_NO_THROW(SPECTRE_PRINT_STDERR_AND_RETHROW(CODE_BLOCK))

#define ASSERT_NO_THROW_PRINT(CODE_BLOCK) ASSERT_NO_THROW(SPECTRE_PRINT_STDERR_AND_RETHROW(CODE_BLOCK))

```

<p>Later in code, replace <code>*_NO_THROW</code>'s with <code>*_NO_THROW_PRINT</code> and voila.</p>

<pre class="lang-cpp prettyprint-override"><code>
void f(){
    throw std::runtime_error{"this should be printed"};
}

TEST(test, test){
    EXPECT_NO_THROW_PRINT( f(); );
}

</code>```

Expected output of test case above:

```<code>Running main() from /build/googletest-qXr8Ln/googletest-1.10.0/googletest/src/gtest_main.cc
Note: Randomizing tests' orders with a seed of 60645 .
[==========] Running 2 tests from 2 test suites.
[----------] Global test environment set-up.
[----------] 1 test from test
[ RUN      ] test.test
std::exception thrown: this should be printed
/workspace/libasync/test/ut_executor_factory.cpp:56: Failure
Expected: try{do{ f(); }while(0);}catch(const std::exception& ex){ std::cerr << "std::exception thrown: " << ex.what() << std::endl; throw; }catch(...){ std::cerr << "unknown structure thrown" << std::endl; throw;} doesn't throw an exception.
  Actual: it throws.
[  FAILED  ] test.test (0 ms)
[----------] 1 test from test (0 ms total)

</code>```

Body:
To test my C++ project I am using GoogleTest framework.
Normally I can use the following syntax to easily debug a failure:

EXPECT_TRUE(*statement*) << *debugMessage*;

When I use the macro EXPECT_NO_THROW (or ASSERT_NO_THROW) I might of course do the same, but I do not have access to the exception object that was thrown (and caught) inside the macro itself and so the debugMessage cannot tell me anything about it.

Is it possible to show information about this exception in any way?

EDIT

Is not possible without any custom function/macro.

Body:
I am a little bit late to the party, but here's one approach which works:

/**
 * @brief Wrap a code block with try-catch, handle exceptions thrown, print them
 * into EXCEPT_STREAM and rethrow.
 */
#define PRINT_AND_RETHROW(CODE_BLOCK, EXCEPT_STREAM) try{do{ CODE_BLOCK }while(0);}catch(const std::exception& ex){ EXCEPT_STREAM << "std::exception thrown: " << ex.what() << std::endl; throw;  }catch(...){ EXCEPT_STREAM << "unknown structure thrown" << std::endl; throw;}

/**
 * @brief Wrap a code block with try-catch, handle exceptions thrown, print them
 * into std::cerr and rethrow.
 */
#define PRINT_STDERR_AND_RETHROW(CODE_BLOCK) PRINT_AND_RETHROW(CODE_BLOCK, std::cerr)

#define EXPECT_NO_THROW_PRINT(CODE_BLOCK) EXPECT_NO_THROW(SPECTRE_PRINT_STDERR_AND_RETHROW(CODE_BLOCK))

#define ASSERT_NO_THROW_PRINT(CODE_BLOCK) ASSERT_NO_THROW(SPECTRE_PRINT_STDERR_AND_RETHROW(CODE_BLOCK))

Later in code, replace *_NO_THROW's with *_NO_THROW_PRINT and voila.

void f(){
    throw std::runtime_error{"this should be printed"};
}

TEST(test, test){
    EXPECT_NO_THROW_PRINT( f(); );
}

Expected output of test case above:

Running main() from /build/googletest-qXr8Ln/googletest-1.10.0/googletest/src/gtest_main.cc
Note: Randomizing tests' orders with a seed of 60645 .
[==========] Running 2 tests from 2 test suites.
[----------] Global test environment set-up.
[----------] 1 test from test
[ RUN      ] test.test
std::exception thrown: this should be printed
/workspace/libasync/test/ut_executor_factory.cpp:56: Failure
Expected: try{do{ f(); }while(0);}catch(const std::exception& ex){ std::cerr << "std::exception thrown: " << ex.what() << std::endl; throw; }catch(...){ std::cerr << "unknown structure thrown" << std::endl; throw;} doesn't throw an exception.
  Actual: it throws.
[  FAILED  ] test.test (0 ms)
[----------] 1 test from test (0 ms total)


问:
nginx rewrite does not forward $arg_page to upstream
I have

```<code>rewrite (?i)^/museums/Andorra /search-results?country=ad&page=$arg_page break;
// 246 more similar rewrites for other country codes.
proxy_pass http://127.0.0.1:7001;
</code>```

and yet, when I go to /museums/Andorra&page=1 in the browser, the REQUEST_URI in the proxied app is set to /search-results?country=ad&page=

nginx is a bit old: 1.14.2 if that matters. This answer from 2013 however https://stackoverflow.com/a/17739990/308851 seems to suggests an $arg variable in the replacement part of rewrite should work.

答:
You are correct that rewrite can use $arg_ parameters in the rewritten URI, although you do not necessarily need to.

There are two problems:

You do not need to add &page=$arg_page to the end of the rewritten URI, as rewrite will automatically append the original query string unless the rewritten URI ends with a ?. So your existing rewrite statement will generate /search-results?country=ad&page=1&page=1 (assuming that the $arg_page variable is set).

Use either:

```<code>rewrite (?i)^/museums/Andorra /search-results?country=ad break;
</code>```

Or:

```<code>rewrite (?i)^/museums/Andorra /search-results?country=ad&page=$arg_page? break;
</code>```

See this document for details.

Your test URL does not contain a query string.

Use:

```<code>/museums/Andorra?page=1
</code>```

Body:
I have

rewrite (?i)^/museums/Andorra /search-results?country=ad&page=$arg_page break;
// 246 more similar rewrites for other country codes.
proxy_pass http://127.0.0.1:7001;

and yet, when I go to /museums/Andorra&page=1 in the browser, the REQUEST_URI in the proxied app is set to /search-results?country=ad&page=

nginx is a bit old: 1.14.2 if that matters. This answer from 2013 however https://stackoverflow.com/a/17739990/308851 seems to suggests an $arg variable in the replacement part of rewrite should work.

Body:
You are correct that rewrite can use $arg_ parameters in the rewritten URI, although you do not necessarily need to.

There are two problems:

You do not need to add &page=$arg_page to the end of the rewritten URI, as rewrite will automatically append the original query string unless the rewritten URI ends with a ?. So your existing rewrite statement will generate /search-results?country=ad&page=1&page=1 (assuming that the $arg_page variable is set).

Use either:

rewrite (?i)^/museums/Andorra /search-results?country=ad break;

Or:

rewrite (?i)^/museums/Andorra /search-results?country=ad&page=$arg_page? break;

See this document for details.

Your test URL does not contain a query string.

Use:

/museums/Andorra?page=1


问:
R Get Sum of Data frame Column By Another Column Variable
So I need to take the sum of a dataframe with two particulars columns of interest

Col1 : Numeric Data

Col2 : Years

So I need to take the sum of Numeric Data by the years mentioned in the Years Column.
Then I need to plot the aggregates on y-axis and the years on x-axis.

I tried the following:

agg <- tapply(Col1, Col2, FUN=sum)

but I'm unable to get the year names displayed in the x-axis in the plot.

In one of the solutions I found, the following formula was used:

aggregate(Col1 ~ Col2,Dataframe, FUN=sum)

Can someone explain how this formula works?
I understand the use of ~ in plotting, but not in this formula.

答:
For the aggregate() function the tilde-operator basically tells R to sum the Col1 values by Col2.
Then to plot you simply do plot(Col1 ~ Col2, Dataframe).

So for an example with simulated data:

```<code>#data.frame with numeric data and years
d <- data.frame(year = rep(2010:2020, each = 5),
                value = rnorm(55))

#aggregate to calculate sum per year
d2 <- aggregate(value ~ year, d, sum)

#plot the results (as a line graph)
plot(value ~ year, d2, type = 'l')
</code>```

Hope I understood your question correctly and addressed it.

Body:
For the aggregate() function the tilde-operator basically tells R to sum the Col1 values by Col2.
Then to plot you simply do plot(Col1 ~ Col2, Dataframe).

So for an example with simulated data:

#data.frame with numeric data and years
d <- data.frame(year = rep(2010:2020, each = 5),
                value = rnorm(55))

#aggregate to calculate sum per year
d2 <- aggregate(value ~ year, d, sum)

#plot the results (as a line graph)
plot(value ~ year, d2, type = 'l')

Hope I understood your question correctly and addressed it.


问:
How make a custom Retrofit ConverterFactory to transform ReponseBody to a new ResponseBody?
I'd like to transform the answer of a service which is codified in "windows-1252" to "unicode". I am trying to do using a custom converter factory in retrofit to acomplish that work. My custom converter try to intercept the ResponseBody class, change the character codification, and return a new ResponseBody to retrofit to be processed.
But it didn't work. Apparently, retrofit built in converters intercept first the ResponseBody class and it can't be processed again.
Is there any way to avoid that behavior?

Note: I can get it using a map function when I have the response but I'd like to learn to do in retrofit.

This is my code.

```<code>AnsiconverterFactory.java
-------------------------

public class AnsiConverterFactory extends Converter.Factory {
    public static AnsiConverterFactory create() {
        return new AnsiConverterFactory();
    }

    private AnsiConverterFactory() {
    }

    @Override
    public @Nullable Converter<ResponseBody, ?> responseBodyConverter(Type type, Annotation[] annotations, Retrofit retrofit) {
        if (type == ResponseBody.class) {
            return AnsiResponseBodyConverter.INSTANCE;
        }
        return null;
    }

    @Override
    public Converter<?, String> stringConverter(Type type, Annotation[] annotations, Retrofit retrofit) {
        return super.stringConverter(type, annotations, retrofit);
    }

    @Override
    public Converter<?, RequestBody> requestBodyConverter(Type type, Annotation[] parameterAnnotations, Annotation[] methodAnnotations, Retrofit retrofit) {
        return null;
    }
}
</code>```

```<code>AnsiResponseBodyConverter.java
------------------------------
public class AnsiResponseBodyConverter implements Converter<ResponseBody, ResponseBody> {
    static final AnsiResponseBodyConverter INSTANCE = new AnsiResponseBodyConverter();

    @Override
    public ResponseBody convert(ResponseBody value) throws IOException {
        Log.d("CONVERTER", " En convert de responsebodyconverter");
        final CharBuffer todo = Charset.forName("windows-1252").decode(ByteBuffer.wrap(value.bytes()));
        return ResponseBody.create(value.contentType(), todo.toString());

    }
}
</code>```

And the use in the app:

```<code>Retrofit retrofit = new Retrofit.Builder()
                .baseUrl("https://...some webservice here")
                .addConverterFactory(BitmapConverterFactory.create())
                .addConverterFactory(AnsiConverterFactory.create())
                .client(clientBuilder.build())
                .addCallAdapterFactory(RxJava3CallAdapterFactory.create())
                .build();
</code>```

答:
I finally managed to solve the problem using an interceptor in okhttp. This is the code:

```<code>class LoggingInterceptor implements Interceptor {

    @Override
    public Response intercept(Chain chain) throws IOException {
        Response response = chain.proceed(chain.request());
        ResponseBody body = response.body();
        if (body.contentType().equals(MediaType.parse("text/csv"))) {
            final CharBuffer todo = Charset.forName("windows-1252").decode(ByteBuffer.wrap(body.bytes()));
            body = ResponseBody.create(body.contentType(), todo.toString());
            Response.Builder builder = response.newBuilder();
            return  builder.headers(response.headers())
                    .body(body)
                    .build();
        }
        return response;
    }
}
</code>```

And this just before Retrofit build.

```<code>OkHttpClient.Builder clientBuilder = new OkHttpClient.Builder()
            .addInterceptor(new LoggingInterceptor());
</code>```

Body:
I'd like to transform the answer of a service which is codified in "windows-1252" to "unicode". I am trying to do using a custom converter factory in retrofit to acomplish that work. My custom converter try to intercept the ResponseBody class, change the character codification, and return a new ResponseBody to retrofit to be processed.
But it didn't work. Apparently, retrofit built in converters intercept first the ResponseBody class and it can't be processed again.
Is there any way to avoid that behavior?

Note: I can get it using a map function when I have the response but I'd like to learn to do in retrofit.

This is my code.

AnsiconverterFactory.java
-------------------------

public class AnsiConverterFactory extends Converter.Factory {
    public static AnsiConverterFactory create() {
        return new AnsiConverterFactory();
    }

    private AnsiConverterFactory() {
    }

    @Override
    public @Nullable Converter<ResponseBody, ?> responseBodyConverter(Type type, Annotation[] annotations, Retrofit retrofit) {
        if (type == ResponseBody.class) {
            return AnsiResponseBodyConverter.INSTANCE;
        }
        return null;
    }

    @Override
    public Converter<?, String> stringConverter(Type type, Annotation[] annotations, Retrofit retrofit) {
        return super.stringConverter(type, annotations, retrofit);
    }

    @Override
    public Converter<?, RequestBody> requestBodyConverter(Type type, Annotation[] parameterAnnotations, Annotation[] methodAnnotations, Retrofit retrofit) {
        return null;
    }
}

AnsiResponseBodyConverter.java
------------------------------
public class AnsiResponseBodyConverter implements Converter<ResponseBody, ResponseBody> {
    static final AnsiResponseBodyConverter INSTANCE = new AnsiResponseBodyConverter();

    @Override
    public ResponseBody convert(ResponseBody value) throws IOException {
        Log.d("CONVERTER", " En convert de responsebodyconverter");
        final CharBuffer todo = Charset.forName("windows-1252").decode(ByteBuffer.wrap(value.bytes()));
        return ResponseBody.create(value.contentType(), todo.toString());

    }
}

And the use in the app:

Retrofit retrofit = new Retrofit.Builder()
                .baseUrl("https://...some webservice here")
                .addConverterFactory(BitmapConverterFactory.create())
                .addConverterFactory(AnsiConverterFactory.create())
                .client(clientBuilder.build())
                .addCallAdapterFactory(RxJava3CallAdapterFactory.create())
                .build();

Body:
I finally managed to solve the problem using an interceptor in okhttp. This is the code:

class LoggingInterceptor implements Interceptor {

    @Override
    public Response intercept(Chain chain) throws IOException {
        Response response = chain.proceed(chain.request());
        ResponseBody body = response.body();
        if (body.contentType().equals(MediaType.parse("text/csv"))) {
            final CharBuffer todo = Charset.forName("windows-1252").decode(ByteBuffer.wrap(body.bytes()));
            body = ResponseBody.create(body.contentType(), todo.toString());
            Response.Builder builder = response.newBuilder();
            return  builder.headers(response.headers())
                    .body(body)
                    .build();
        }
        return response;
    }
}

And this just before Retrofit build.

OkHttpClient.Builder clientBuilder = new OkHttpClient.Builder()
            .addInterceptor(new LoggingInterceptor());


问:
How to configure a conditional type based on value of a property?
I have a number of Item objects and a method that processes them. The issue is that some Items could potentially have certain properties that others don't.

type ItemType = 'ApiGateway' | 'ApiGatewayEndpoint' | 'ApiGatewayMethod';

export default interface Item {
    ref?: string;
    position: Position;
    type: ItemType;
    children?: Item[];
}

function process(item: Item) {...}
```

<p>Now, let's say I want to create a separate interface <code>ApiGatewayMethodItem</code> (that extends <code>Item</code>) that has an additional string property called 'method' representing whether it's a GET or POST or something else. Is there a way I can type it in such a way that as soon as I type <code>process({type: 'ApiGatewayMethod'})</code> tsc will start complaining about the missing property <code>method</code> ? I understand that TS has a pretty good support for the "conditional types", but I haven't used them before and I'm having a hard time wrapping my head around them...</p>

<p>So let's say I have the interface </p>

```interface ApiGatewayMethodItem extends Omit<Item, 'type'> {
    type: 'ApiGatewayMethod';
    method: string;
}
```

now when I call the process function, I need the compiler to complain that the method property is missing when I don't specify it, but specify the type ApiGatewayMethod

答:
You could solve this by using discrimated unions. This way the compiler can figure out which members are available from the type field.

```<code>type ItemTypeWithoutMethod = 'ApiGateway' | 'ApiGatewayEndpoint' | 'ApiGatewayMethod';
type ItemTypeWithMethod = "ApiGatewayMethodItem";

interface ItemBase {
    ref?: string;
    position: Position;
    children?: Item[];
}

interface ItemWithoutMethod extends ItemBase {
  type: ItemTypeWithoutMethod
}

interface ItemWithMethod extends ItemBase {
    type: ItemTypeWithMethod;
    method: string;
}

export type Item = ItemWithMethod | ItemWithoutMethod;

function doSomethingWithItem(item: Item) {
  if (item.type == "ApiGatewayMethodItem") {
    console.log(item.method);
  }
}
</code>```

Playground link

Body:
I have a number of Item objects and a method that processes them. The issue is that some Items could potentially have certain properties that others don't.

type ItemType = 'ApiGateway' | 'ApiGatewayEndpoint' | 'ApiGatewayMethod';

export default interface Item {
    ref?: string;
    position: Position;
    type: ItemType;
    children?: Item[];
}

function process(item: Item) {...}

Now, let's say I want to create a separate interface ApiGatewayMethodItem (that extends Item) that has an additional string property called 'method' representing whether it's a GET or POST or something else. Is there a way I can type it in such a way that as soon as I type process({type: 'ApiGatewayMethod'}) tsc will start complaining about the missing property method ? I understand that TS has a pretty good support for the "conditional types", but I haven't used them before and I'm having a hard time wrapping my head around them...

So let's say I have the interface

interface ApiGatewayMethodItem extends Omit<Item, 'type'> {
    type: 'ApiGatewayMethod';
    method: string;
}

now when I call the process function, I need the compiler to complain that the method property is missing when I don't specify it, but specify the type ApiGatewayMethod

Body:
You could solve this by using <a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAksEFsAq4IHUCWwAWB7ArsALIQ64AmUAvFAOQCCYGA4gIbwDurItUAPnUYt2ELiACiAO3JhcGScF4CGTNp24ky5WgG4AUKEix4yVJhya8lGgCIha0RtJW4iG-r0QAHrIBOwKHl4XwAzVgBjaFcEACFWAGdoAG89KDSoXwgQgH4ALih44F95AHN9dKhZeKwMXEl8gAVcauBayXL08OwMABtyTMk840QAbQBdfQBfPU8fXH9AhQhQiKiTczxCSwoob3hpeOHYhOTUqEMIfOiUSA2CYmcKPWnZvwCg5bDIo43tyj2IAcjnFElAUhULlcTDd0FhsH8OmkEI9yPlCsVJGVnjMLkdqD84X9+ASyFsUR4QvhJOFWnUoORcABlXDInClDbRAAUWEQUMQAEowWcMCEoNyTAA6XFUWz2ERiP7RGyC8GdOrxXA9CASnq4ErixAS1lWfkdabTIA" rel="nofollow noreferrer">discrimated unions. This way the compiler can figure out which members are available from the type field.

type ItemTypeWithoutMethod = 'ApiGateway' | 'ApiGatewayEndpoint' | 'ApiGatewayMethod';
type ItemTypeWithMethod = "ApiGatewayMethodItem";

interface ItemBase {
    ref?: string;
    position: Position;
    children?: Item[];
}

interface ItemWithoutMethod extends ItemBase {
  type: ItemTypeWithoutMethod
}

interface ItemWithMethod extends ItemBase {
    type: ItemTypeWithMethod;
    method: string;
}

export type Item = ItemWithMethod | ItemWithoutMethod;

function doSomethingWithItem(item: Item) {
  if (item.type == "ApiGatewayMethodItem") {
    console.log(item.method);
  }
}

<a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAksEFsAq4IHUCWwAWB7ArsALIQ64AmUAvFAOQCCYGA4gIbwDurItUAPnUYt2ELiACiAO3JhcGScF4CGTNp24ky5WgG4AUKEix4yVJhya8lGgCIha0RtJW4iG-r0QAHrIBOwKHl4XwAzVgBjaFcEACFWAGdoAG89KDSoXwgQgH4ALih44F95AHN9dKhZeKwMXEl8gAVcauBayXL08OwMABtyTMk840QAbQBdfQBfPU8fXH9AhQhQiKiTczxCSwoob3hpeOHYhOTUqEMIfOiUSA2CYmcKPWnZvwCg5bDIo43tyj2IAcjnFElAUhULlcTDd0FhsH8OmkEI9yPlCsVJGVnjMLkdqD84X9+ASyFsUR4QvhJOFWnUoORcABlXDInClDbRAAUWEQUMQAEowWcMCEoNyTAA6XFUWz2ERiP7RGyC8GdOrxXA9CASnq4ErixAS1lWfkdabTIA" rel="nofollow noreferrer">Playground link


问:
How to highlight the differences between two versions of a text in .NET web app?
I have been supporting a web application at work for our Call Center unit for about 2 years now. The app is written in ASP.NET 3.5 with SQL server 2005 database. I’ve been asked to expand the call detail section to allow agents to edit the current call note with the ability to revert back to its previous version. Now, that’s all cool but now the manager wants to be able to click on any particular note and see all edits with changes highlighted in yellow (and if something was deleted, he wants to SEE the deleted text crossed out). Actually, what I need is very similar to how Stackoverflow handles edits on their questions.  I’ve been thinking about how to go about this and after doing research and Google-ing of course, I am still unsure which route to take. I am fairly new to .NET development. Any ideas on the best technique for highlighting the changes in UI? I am afraid I am going to have to store a copy of the entire note each time they make a change because the manager wants to be able to easily review notes and revert back to ANY version (not just the most recent one) before sending the monthly call report off to our VIP customers. Since this department OFTEN changes their mind on things,  I want to make sure the new functionality is scalable and easy to maintain. Any ideas would be greatly appreciated. I am really just looking for someone to point me in the right direction; maybe there are some tools out there that can be useful, recommended keywords in Google lookup, etc. </p>

答:
Easiest would be to store the text for each revision, then when the user wants to see the diff use a diff tool to generate the highlighted text.

Here is some Javascript diff code:
http://ejohn.org/projects/javascript-diff-algorithm/

If all the computers have Word installed you may be able to use a Word control to accomplish this. TortoiseSVN has scripts in its program directory which can take two word documents and produce a document with changes highlighted. To see this create c:\aaa.doc and bbb.doc, then install TortoiseSVN and run:

```<code>wscript.exe "C:\program files\tortoisesvn\Diff-Scripts\diff-doc.js" c:\aaa.doc c:\bbb.doc //E:javascript
</code>```

OwnerDisplayName: Dinci

ContentLicense: CC BY-SA 2.5

LastEditorDisplayName: Dinci Garrone

Body:
Easiest would be to store the text for each revision, then when the user wants to see the diff use a diff tool to generate the highlighted text.

Here is some Javascript diff code:
http://ejohn.org/projects/javascript-diff-algorithm/

If all the computers have Word installed you may be able to use a Word control to accomplish this. TortoiseSVN has scripts in its program directory which can take two word documents and produce a document with changes highlighted. To see this create c:\aaa.doc and bbb.doc, then install TortoiseSVN and run:

wscript.exe "C:\program files\tortoisesvn\Diff-Scripts\diff-doc.js" c:\aaa.doc c:\bbb.doc //E:javascript

OwnerDisplayName: sjbotha