问:
Referring to class attributes from the .kv file
I have the following related sections from my .py and .kv files.

```<code>class DrillScreen(Screen):
    def __init__(self, **kwargs):
        super(DrillScreen, self).__init__(**kwargs)
        self.thedrill = drill(kwargs['options'])
        self.thedrill.bind(on_answer = self.printtest)

    def printtest(self,*args):
        self.ids.answerlabel.text = self.thedrill.answer
        print(self.ids.answerlabel.text)

    def startdrill(self):
        Process(target=self.thedrill.run).start()
</code>```

```<code><DrillScreen>:
    FloatLayout:
        FloatLayout:
            size_hint: 1.0, None
            height: self.width
            pos_hint: {'center_x':0.5,'center_y':0.5}
            id: wheelbox
            background_color: 1,1,1,1
            pos: 0, 200
            Label:
                id: answerlabel
                pos_hint: {'center_x':0.5, 'center_y':0.5}
                text: root.thedrill.answer
        Button:
            text: 'Start'
            size_hint: 0.5, 0.1
            on_release: root.startdrill()
        Button:
            text: 'Back'
            size_hint: 0.5, 0.1
            pos_hint: {'x':0.5}
</code>```

This gives me an error AttributeError: 'DrillScreen' object has no attribute 'thedrill'. If I change root.thedrill.answer in the label text to some literal string, it runs fine, and from the output of printtest() I see that it does get changed internally, but its display does not update. I'd like to either access the class attribute from the .kv file, or set the label display from the .py file. Thank you.

EDIT:
Proceeding upon Yoav Glazner's advice, I tried adding a button to also bind to the printtest() function to see what's going on, and I'm baffled to see that the calls from different bindings produce different output. Here's the modified class from the .py:

```<code>class DrillScreen(Screen):
    answer = StringProperty('alo')
    def __init__(self, **kwargs):
        self.thedrill = drill(kwargs['options'])
        self.thedrill.bind(on_answer = self.printtest)
        super(DrillScreen, self).__init__(**kwargs)
        self.answer = self.thedrill.answer

        b = Button(text = 'Test',
            size_hint = [0.1,0.1],
            pos_hint = {'top':1,'right':1})
        b.bind(on_release = self.printtest)

        self.ids.wheelbox.add_widget(b)

    def printtest(self,*args):
        self.answer = self.thedrill.answer
        print('This is printtest(): ', self.ids.answerlabel.text)

    def startdrill(self):
        Process(target=self.thedrill.run).start()
</code>```

The only change to the .kv file is that the label text points to root.answer. When I run this, (and click the button in the .kv which calls startdrill()), thedrill dispatches its on_answer events at regular intervals, and I also click the newly created button to manually call printtest as well, producing such output in the terminal:

```<code>('This is printtest(): ', 'ti')
('This is printtest(): ', 're')
('This is printtest(): ', 'Default')
('This is printtest(): ', 'Default')
('This is printtest(): ', 'so')
('This is printtest(): ', 'Default')
('This is printtest(): ', 'le')
('This is printtest(): ', 'Default')
</code>```

The lines with syllables are results of on_answer dispatches of thedrill, and the ones with 'Default' are from button clicks. I can't imagine what could effect the difference. On inspecting the drill class I see no reason for it to revert to a previous value immediately (it actually does sleep(1) on the line following the lines setting .answer and dispatching the event). Perhaps I'm missing something and I can post the code if no more plausible explanation exists.

EDIT2:
Here's a runnable example.
The .kv file:

```<code><DrillScreen>:
    FloatLayout:
        FloatLayout:
            id: wheelbox
            size_hint: 1.0, None
            height: self.width
            pos_hint: {'center_x':0.5,'center_y':0.5}
            background_color: 1,1,1,1
            pos: 0, 200
            Label:
                id: answerlabel
                pos_hint: {'center_x':0.5, 'center_y':0.5}
                text: root.answer
        Button:
            text: 'Start'
            size_hint: 0.5, 0.1
            on_release: root.startdrill()
</code>```

and the .py:

```<code>from kivy.app import App
from random import choice
from time import sleep
from kivy.event import EventDispatcher
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.button import Button
from kivy.properties import StringProperty
from multiprocessing import Process

class DrillScreen(Screen):
    answer = StringProperty('Initialized.')
    def __init__(self, **kwargs):
        self.thedrill = drill()
        self.thedrill.bind(on_answer = self.printtest)
        super(DrillScreen, self).__init__(**kwargs)
        self.answer = self.thedrill.answer

        b = Button(
                text = 'printtest()',
                size_hint = [ 0.1, 0.1 ],
                pos_hint = {'center_x':0.75,'center_y':0.5},
                )
        b.bind(on_release = self.printtest)
        print(self.ids)
        self.ids.wheelbox.add_widget(b)

    def printtest(self,*args):
        self.answer = self.thedrill.answer
        print('This is printtest(): ', self.ids.answerlabel.text)

    def startdrill(self):
        Process(target=self.thedrill.run).start()

class drill(EventDispatcher):
    def __init__(self):
        self.register_event_type('on_answer')
        self.answer = 'Default'

    def on_answer(self,*args):
        pass

    def run(self):

        while True:

            self.answer = str(choice(range(100)))
            self.dispatch('on_answer', self.answer)
            sleep(1)

class Manager(ScreenManager):
    pass

class TestingApp(App):
    def build(self):
        sm = Manager()
        s = DrillScreen(name='ds')
        sm.add_widget(s)
        sm.current = 'ds'
        return sm

TestingApp().run()
</code>```

Clicking the Start button starts thedrill.run in its own process, spitting random numbers to the terminal every second, and while it is running, clicking the printtest() button outputs 'Default' as the label text value. Sample output:

```<code>('This is printtest(): ', '8')
('This is printtest(): ', '60')
('This is printtest(): ', '6')
('This is printtest(): ', 'Default')
('This is printtest(): ', '66')
('This is printtest(): ', '68')
('This is printtest(): ', 'Default')
('This is printtest(): ', '89')
('This is printtest(): ', '69')
</code>```

答:
You need to change the order in your __init__ function:

```<code>thedrill = ObjectProperty(None) # not really needed ...

def __init__(self, **kwargs):
    self.thedrill = drill(kwargs['options'])
    self.thedrill.bind(on_answer = self.printtest)
    super(DrillScreen, self).__init__(**kwargs) # this will trigger the kv file section that exploded before ...
</code>```

That said, using processes will not work with your example since each process has its memory and cannot handle the UI directly. You should use a process queue or move to threads. just remember to update the UI from the main thread. (using Clock or @mainthread)

Have fun ...

Body:
I have the following related sections from my .py and .kv files.

class DrillScreen(Screen):
    def __init__(self, **kwargs):
        super(DrillScreen, self).__init__(**kwargs)
        self.thedrill = drill(kwargs['options'])
        self.thedrill.bind(on_answer = self.printtest)

    def printtest(self,*args):
        self.ids.answerlabel.text = self.thedrill.answer
        print(self.ids.answerlabel.text)

    def startdrill(self):
        Process(target=self.thedrill.run).start()

<DrillScreen>:
    FloatLayout:
        FloatLayout:
            size_hint: 1.0, None
            height: self.width
            pos_hint: {'center_x':0.5,'center_y':0.5}
            id: wheelbox
            background_color: 1,1,1,1
            pos: 0, 200
            Label:
                id: answerlabel
                pos_hint: {'center_x':0.5, 'center_y':0.5}
                text: root.thedrill.answer
        Button:
            text: 'Start'
            size_hint: 0.5, 0.1
            on_release: root.startdrill()
        Button:
            text: 'Back'
            size_hint: 0.5, 0.1
            pos_hint: {'x':0.5}

This gives me an error AttributeError: 'DrillScreen' object has no attribute 'thedrill'. If I change root.thedrill.answer in the label text to some literal string, it runs fine, and from the output of printtest() I see that it does get changed internally, but its display does not update. I'd like to either access the class attribute from the .kv file, or set the label display from the .py file. Thank you.

EDIT:
Proceeding upon Yoav Glazner's advice, I tried adding a button to also bind to the printtest() function to see what's going on, and I'm baffled to see that the calls from different bindings produce different output. Here's the modified class from the .py:

class DrillScreen(Screen):
    answer = StringProperty('alo')
    def __init__(self, **kwargs):
        self.thedrill = drill(kwargs['options'])
        self.thedrill.bind(on_answer = self.printtest)
        super(DrillScreen, self).__init__(**kwargs)
        self.answer = self.thedrill.answer

        b = Button(text = 'Test',
            size_hint = [0.1,0.1],
            pos_hint = {'top':1,'right':1})
        b.bind(on_release = self.printtest)

        self.ids.wheelbox.add_widget(b)

    def printtest(self,*args):
        self.answer = self.thedrill.answer
        print('This is printtest(): ', self.ids.answerlabel.text)

    def startdrill(self):
        Process(target=self.thedrill.run).start()

The only change to the .kv file is that the label text points to root.answer. When I run this, (and click the button in the .kv which calls startdrill()), thedrill dispatches its on_answer events at regular intervals, and I also click the newly created button to manually call printtest as well, producing such output in the terminal:

('This is printtest(): ', 'ti')
('This is printtest(): ', 're')
('This is printtest(): ', 'Default')
('This is printtest(): ', 'Default')
('This is printtest(): ', 'so')
('This is printtest(): ', 'Default')
('This is printtest(): ', 'le')
('This is printtest(): ', 'Default')

The lines with syllables are results of on_answer dispatches of thedrill, and the ones with 'Default' are from button clicks. I can't imagine what could effect the difference. On inspecting the drill class I see no reason for it to revert to a previous value immediately (it actually does sleep(1) on the line following the lines setting .answer and dispatching the event). Perhaps I'm missing something and I can post the code if no more plausible explanation exists.

EDIT2:
Here's a runnable example.
The .kv file:

<DrillScreen>:
    FloatLayout:
        FloatLayout:
            id: wheelbox
            size_hint: 1.0, None
            height: self.width
            pos_hint: {'center_x':0.5,'center_y':0.5}
            background_color: 1,1,1,1
            pos: 0, 200
            Label:
                id: answerlabel
                pos_hint: {'center_x':0.5, 'center_y':0.5}
                text: root.answer
        Button:
            text: 'Start'
            size_hint: 0.5, 0.1
            on_release: root.startdrill()

and the .py:

from kivy.app import App
from random import choice
from time import sleep
from kivy.event import EventDispatcher
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.button import Button
from kivy.properties import StringProperty
from multiprocessing import Process

class DrillScreen(Screen):
    answer = StringProperty('Initialized.')
    def __init__(self, **kwargs):
        self.thedrill = drill()
        self.thedrill.bind(on_answer = self.printtest)
        super(DrillScreen, self).__init__(**kwargs)
        self.answer = self.thedrill.answer

        b = Button(
                text = 'printtest()',
                size_hint = [ 0.1, 0.1 ],
                pos_hint = {'center_x':0.75,'center_y':0.5},
                )
        b.bind(on_release = self.printtest)
        print(self.ids)
        self.ids.wheelbox.add_widget(b)

    def printtest(self,*args):
        self.answer = self.thedrill.answer
        print('This is printtest(): ', self.ids.answerlabel.text)

    def startdrill(self):
        Process(target=self.thedrill.run).start()

class drill(EventDispatcher):
    def __init__(self):
        self.register_event_type('on_answer')
        self.answer = 'Default'

    def on_answer(self,*args):
        pass

    def run(self):

        while True:

            self.answer = str(choice(range(100)))
            self.dispatch('on_answer', self.answer)
            sleep(1)

class Manager(ScreenManager):
    pass

class TestingApp(App):
    def build(self):
        sm = Manager()
        s = DrillScreen(name='ds')
        sm.add_widget(s)
        sm.current = 'ds'
        return sm

TestingApp().run()

Clicking the Start button starts thedrill.run in its own process, spitting random numbers to the terminal every second, and while it is running, clicking the printtest() button outputs 'Default' as the label text value. Sample output:

('This is printtest(): ', '8')
('This is printtest(): ', '60')
('This is printtest(): ', '6')
('This is printtest(): ', 'Default')
('This is printtest(): ', '66')
('This is printtest(): ', '68')
('This is printtest(): ', 'Default')
('This is printtest(): ', '89')
('This is printtest(): ', '69')

Body:
You need to change the order in your __init__ function:

thedrill = ObjectProperty(None) # not really needed ...

def __init__(self, **kwargs):
    self.thedrill = drill(kwargs['options'])
    self.thedrill.bind(on_answer = self.printtest)
    super(DrillScreen, self).__init__(**kwargs) # this will trigger the kv file section that exploded before ...

That said, using processes will not work with your example since each process has its memory and cannot handle the UI directly. You should use a process queue or move to threads. just remember to update the UI from the main thread. (using Clock or @mainthread)

Have fun ...


来源: stackexchange

问:
table rows and cells are broken
I have the following styling and HTML, but when it displays, the table appears broken (all the table rows and cells are broken). I'm not sure why; how can I fix it?

the tbody need have this size: height: calc(100vh - 130px);

the red line defines the size of the table.

edit: my tbody need have scroll and the thead need be fixed.

jsfiddle: https://jsfiddle.net/zuxq2gr0/11/

.col-lg-12 {
  border: 1px solid red;
}

tbody {
  display: block;
  overflow-y: scroll;
  height: calc(100vh - 130px);
}

tbody > tr {
  display: table;
  width: 100%;
}```

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

          test
          test
          test
          test
          test

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          <compose view="./-box.html"></compose>

```

答:
You need to remove some style as per following code:

table {
    width: 50%;
}

thead, tbody, tr, td, th {
    display: block;
}

thead th {
    height: 30px;
}

tbody {
    overflow-y: auto;
    height: calc(100vh - 130px);
}

tbody td, thead th {
    float: left;
    width: 20%;
}

tr:after {
    clear: both;
    content: ' ';
    display: block;
    visibility: hidden;
}```

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

          test
          test
          test
          test
          test

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          <compose view="./-box.html"></compose>

```

ContentLicense: CC BY-SA 3.0

Title: table rows and cells are broken

Body:
I have the following styling and HTML, but when it displays, the table appears broken (all the table rows and cells are broken). I'm not sure why; how can I fix it?

the tbody need have this size: height: calc(100vh - 130px);

the red line defines the size of the table.

edit: my tbody need have scroll and the thead need be fixed.

jsfiddle: https://jsfiddle.net/zuxq2gr0/11/

.col-lg-12 {
  border: 1px solid red;
}

tbody {
  display: block;
  overflow-y: scroll;
  height: calc(100vh - 130px);
}

tbody > tr {
  display: table;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

          test
          test
          test
          test
          test

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          test
          test
          test

              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>

          <compose view="./-box.html"></compose>

Body:
You need to remove some style as per following code:

table {
    width: 50%;
}

thead, tbody, tr, td, th {
    display: block;
}

thead th {
    height: 30px;
}

tbody {
    overflow-y: auto;
    height: calc(100vh - 130px);
}

tbody td, thead th {
    float: left;
    width: 20%;
}

tr:after {
    clear: both;
    content: ' ';
    display: block;
    visibility: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="col-lg-8 ">
  <div class="col-lg-12">
    <table class="table table-striped" aurelia-table="">
      <thead>
        <tr>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
      </tbody>
    </table>
    <!--  textarea -->
    <div class="form-group">
      <label class="col-md-12 control-label" for="textarea"></label>
      <div class="row">
        <div class="col-md-12">
          <compose view="./-box.html"></compose>
        </div>
      </div>
    </div>
  </div>
</div>


问:
Django not loading static files (Pycharm)
I am working on a project which requires loading on a CSS stylesheet and a logo file. But my Django server also returns 404 resource not found while loading these files. I have checked other questions like this but none of them is using the format to specify static files I used.
This is the html code i am using

```<code>{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="/static/Emu86/style.css">
{% endblock stylesheets %}
</code>```

This is my settings.py file:

```<code>    """
Django settings for mysite project.

Generated by 'django-admin startproject' using Django 1.9.1.

For more information on this file, see
https://docs.djangoproject.com/en/1.9/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.9/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.9/howto/deployment/checklist/

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

# Application definition

INSTALLED_APPS = [
    'Emu86',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_extensions',

]

MIDDLEWARE_CLASSES = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'mysite.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.9/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

# Password validation
# https://docs.djangoproject.com/en/1.9/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/1.9/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'verbose': {
            'format': "[%(asctime)s] %(levelname)s [%(name)s:%(lineno)s] \
                %(message)s",
                'datefmt': "%d%b%Y %H:%M:%S"
         },
    },
    'handlers': {
        'file': {
            'level': 'DEBUG',
            'class': 'logging.FileHandler',
            'filename': 'Emu86.log',
            'formatter': 'verbose'
        },
    },
    'loggers': {
        'django': {
            'handlers': ['file'],
            'propagate': True,
            'level': 'DEBUG',
        },
        'Emu86': {
            'handlers': ['file'],
            'level': 'DEBUG',
        },
    },
}
</code>```

Project Structure:

```<code>Emu86/
  mysite/
      static/
        Emu86/
</code>```

答:
First of all add this  'django.template.context_processors.static' to your context_processors array. And then in your template file use static file like this

<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}Emu86/style.css">

** Do not forget to place all your static file in your static folder.

Body:
I am working on a project which requires loading on a CSS stylesheet and a logo file. But my Django server also returns 404 resource not found while loading these files. I have checked other questions like this but none of them is using the format to specify static files I used.
This is the html code i am using

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="/static/Emu86/style.css">
{% endblock stylesheets %}

This is my settings.py file:

    """
Django settings for mysite project.

Generated by 'django-admin startproject' using Django 1.9.1.

For more information on this file, see
https://docs.djangoproject.com/en/1.9/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.9/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.9/howto/deployment/checklist/

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

# Application definition

INSTALLED_APPS = [
    'Emu86',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_extensions',

]

MIDDLEWARE_CLASSES = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'mysite.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.9/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

# Password validation
# https://docs.djangoproject.com/en/1.9/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/1.9/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'verbose': {
            'format': "[%(asctime)s] %(levelname)s [%(name)s:%(lineno)s] \
                %(message)s",
                'datefmt': "%d%b%Y %H:%M:%S"
         },
    },
    'handlers': {
        'file': {
            'level': 'DEBUG',
            'class': 'logging.FileHandler',
            'filename': 'Emu86.log',
            'formatter': 'verbose'
        },
    },
    'loggers': {
        'django': {
            'handlers': ['file'],
            'propagate': True,
            'level': 'DEBUG',
        },
        'Emu86': {
            'handlers': ['file'],
            'level': 'DEBUG',
        },
    },
}

Project Structure:

Emu86/
  mysite/
      static/
        Emu86/


问:
Trying to store multiple items in storage but only last one added gets stored
I'm making an app that can be thought of as a shopping cart. A user searches for a product, they click on the product, and they have the option of adding it to their cart.
After adding the item they are brought back to the search page. However if they go back to the search page, and search for something it refreshes the page in a sense because a new HTTP request is made and if they select a product, click add, only the last product is available in storage. I believe it is being overwritten.

When the user clicks the add button saveItem() is called in additems.ts  which creates a newItem object and calls addItem() which is suppose to push it to the items[] array and save it to storage.

What am I doing wrong?

addItem.ts

```<code>items = [];

// params passed from another page
name: string    = this.navParams.get('name');
desc: string    = this.navParams.get('desc');

// Called once users click on Add button in addItem.html
saveItem() {

  let newItem = {
    name: this.name,
    desc: this.desc
  };

  this.addItem(newItem);
}

addItem(item) {

  this.items.push(item);
  this.dataService.save(this.items);

  // Go back to search page. When the data is reloaded
  // on this page it resets all of the items in storage
  this.navCtrl.pop(Search);
}
</code>```

addItem.html

```<code><button (click)="saveItem()">Add</button>
</code>```

DataService.ts.

```<code>private storage: Storage;

constructor(storage: Storage) {
  this.storage = storage;
}

getData() {
  return this.storage.get('products');
}

save(data){
  let newData = JSON.stringify(data);
  this.storage.set('products', newData);
}
</code>```

// viewProducts.ts (This is where I want to view all current products in storage )
export class ConfirmOrderPage {

```<code>public items = [];

constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public dataService: DataStorage) {

   this.dataService.getData().then((products) => {
      if(products){
        this.items = JSON.parse(products);
        console.log("confirmorder", JSON.parse(products));
      }
    });
}
</code>```

viewProducts.html

```<code>ion-list>
<ion-item text-wrap *ngFor="let item of items">
  <h2>Name: {{ item.name }}</h2>
  <h3>Product Quantity: 3 </h3>
  <p>{{ item.desc }}</p>
</ion-item>
</ion-list>
</code>```

答:
```<code>this.storage.set('products', newData);
</code>```

The above code will persist only one value for one key, if you want to add more items under products key consider newData value as array. Before adding a product to the local storage, retrieve the data from local storage and set it in temporary array and add the new product in that temporary array and save it in local storage. Now the products key will have array of product.

Body:
I'm making an app that can be thought of as a shopping cart. A user searches for a product, they click on the product, and they have the option of adding it to their cart.
After adding the item they are brought back to the search page. However if they go back to the search page, and search for something it refreshes the page in a sense because a new HTTP request is made and if they select a product, click add, only the last product is available in storage. I believe it is being overwritten.

When the user clicks the add button saveItem() is called in additems.ts  which creates a newItem object and calls addItem() which is suppose to push it to the items[] array and save it to storage.

What am I doing wrong?

addItem.ts

items = [];

// params passed from another page
name: string    = this.navParams.get('name');
desc: string    = this.navParams.get('desc');

// Called once users click on Add button in addItem.html
saveItem() {

  let newItem = {
    name: this.name,
    desc: this.desc
  };

  this.addItem(newItem);
}

addItem(item) {

  this.items.push(item);
  this.dataService.save(this.items);

  // Go back to search page. When the data is reloaded
  // on this page it resets all of the items in storage
  this.navCtrl.pop(Search);
}

addItem.html

<button (click)="saveItem()">Add</button>

DataService.ts.

private storage: Storage;

constructor(storage: Storage) {
  this.storage = storage;
}

getData() {
  return this.storage.get('products');
}

save(data){
  let newData = JSON.stringify(data);
  this.storage.set('products', newData);
}

// viewProducts.ts (This is where I want to view all current products in storage )
export class ConfirmOrderPage {

public items = [];

constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public dataService: DataStorage) {

   this.dataService.getData().then((products) => {
      if(products){
        this.items = JSON.parse(products);
        console.log("confirmorder", JSON.parse(products));
      }
    });
}

viewProducts.html

ion-list>
<ion-item text-wrap *ngFor="let item of items">

Name: {{ item.name }}

Product Quantity: 3

{{ item.desc }}

</ion-item>
</ion-list>

Body:
this.storage.set('products', newData);

The above code will persist only one value for one key, if you want to add more items under products key consider newData value as array. Before adding a product to the local storage, retrieve the data from local storage and set it in temporary array and add the new product in that temporary array and save it in local storage. Now the products key will have array of product.