Quantcast

Checkbox - CSS effect not working

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Checkbox - CSS effect not working

mark
Hi everyone,

I have a problem that I can not solve.
I want to do this effect: http://codepen.io/siiron/pen/MYXZWg

Passing data from the view to the controller works fine, the data after clicking the checkbox properly subscribe to the list in the IdsDTO. The CSS effect does not work, when you click checkbox, the color does not change to green and visually nothing happens.

Any idea? Thanks!


DTO:

public class IdsDTO {

    private List<Integer> ids = new ArrayList<>();

    public List<Integer> getIds() {
        return ids;
    }

    public void setIds(List<Integer> ids) {
        this.ids = ids;
    }
}

Controller:

@GetMapping("/hall")
public String showHall(){

      IdsDTO idsDTO = new IdsDTO();

      model.addAttribute("idsDTO", idsDTO);      


        return "someHall";
}

View:

...

<form action="#" th:action="@{/hall}" th:object="${idsDTO}" method="post">
      ...

   <li class="seat">
        <input type="checkbox" id="1A" th:field="*{ids}" th:value="${1}" />
        <label for="1A"></label>
   </li>
   <li class="seat">
        <input type="checkbox" id="1B" th:field="*{ids}" th:value="${2}"  />
        <label for="1B"></label>
   </li>

   ...

</form>
     


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Checkbox - CSS effect not working

mark
I also tried this way:

<form action="#" th:action="@{/hall}" method="post">

   <li class="seat">
      <input type="checkbox" id="1E" th:value="${5}" name="list" />
      <label for="1E">1E</label>
   </li>
   <li class="seat">
      <input type="checkbox" id="1F" th:value="${6}" name="list" />
      <label for="1F">1F</label>
   </li>

</form>

Controller:

@GetMapping("/hall")
public String showHall(){

      ArrayList<Integer> list = new ArrayList<>();

      model.addAttribute("list", list);

  return "someHall";
}

and the css effect works, the color changes to green but there is another problem. Only the first of the selected checkboxes is added to the ArrayList, and the next one is not.


My css:

.seats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.seat {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;
}
.seat:nth-child(3) {
  margin-right: 14.28571428571429%;
}
.seat input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.seat input[type=checkbox]:checked + label {
  background: #00B70C;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat input[type=checkbox]:disabled + label {
  background: #D00000;
  text-indent: -9999px;
  overflow: hidden;
}
.seat input[type=checkbox]:disabled + label:after {
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.seat input[type=checkbox]:disabled + label:hover {
  box-shadow: none;
  cursor: not-allowed;
}
.seat label {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #949494;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat label:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}
.seat label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5C6AFF;
}
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Checkbox - CSS effect not working

mark
In reply to this post by mark
I solved it this way:

Controller:

@GetMapping("/hall")
public String showHall(){

      IdsDTO idsDTO = new IdsDTO();

      model.addAttribute("idsDTO", idsDTO);      

      return "someHall";
}

View:

...

<form action="#" th:action="@{/hall}" th:object="${idsDTO}" method="post">
      ...

   <li class="seat">
       <input type="checkbox" id="1A" th:value="${1}" name="ids" />
       <label for="1A"></label>
   </li>
   <li class="seat">
       <input type="checkbox" id="1B" th:value="${2}" name="ids" />
       <label for="1B"></label>
   </li>
    ...

</form>

Now, everything works as it should!
Loading...