Can not get widgets positioned in combi of GridLayout and BoxLayout using Kivy - kivy

Question

I am trying to implement a fixed size UI consisting of 4 columns according to the structure below (see link "Wired frame"). At column 3 I got lost after hours of studying, looking at examples and a lot of trial and error. Who can help me? Below the kv content as well.
Thanks in advance.
Wired frame
<IeditHome>:
GridLayout:
cols: 4
# 1st Column
BoxLayout:
orientation: 'vertical'
Label:
canvas.before:
Color:
rgb: .7,.7,.7
Rectangle:
pos: self.pos
size: self.size
BorderImage:
source: 'C:/images/border.png'
border: (2,2,2,2)
size: self.size
pos: self.pos
text: '1'
size_hint: None, None
height: 120
width: 25
halign: 'right'
valign: 'middle'
color: .4,.4,.4,1
# Add 4 Label bloks of the same.
# Re-engineer duplicated stuff later...
# 2nd Column
BoxLayout:
orientation: 'vertical'
Image:
canvas.before:
Color:
rgb: .7,.7,.7
Rectangle:
pos: self.pos
size: self.size
BorderImage:
source: 'C:/images/border.png'
border: (2,1,1,2)
size: self.size
pos: self.pos
size_hint_x: None
size_hint_y: None
size: 240, 120
source: 'C:/temp/Object1.png'
# Add 4 image bloks of the same.
# Re-engineer duplicated stuff later...
# 3rd Column
BoxLayout:
orientation: 'vertical'
Label:
canvas.before:
Color:
rgb: .7,.7,.7
Rectangle:
pos: self.pos
size: self.size
text: 'This is the titel'
Image:
canvas.before:
Color:
rgb: .7,.7,.7
Rectangle:
pos: self.pos
size: self.size
BorderImage:
source: 'C:/images/border.png'
border: (2,1,1,2)
size: self.size
pos: self.pos
size_hint_x: None
size_hint_y: None
size: 300, 200
source: 'C:/temp/MediumImage.png'
Image:
canvas.before:
Color:
rgb: .7,.7,.7
Rectangle:
pos: self.pos
size: self.size
BorderImage:
source: 'C:/images/border.png'
border: (2,1,1,2)
size: self.size
pos: self.pos
size_hint_x: None
size_hint_y: None
size: 500, 300
source: 'C:/temp/LargeImage.png'
ActionBar:
pos: 0, 600
font_size: 16
size: 1200, 40
# background color in Kivy acts as a tint and not just a solid color.
# set a pure white background image first.
background_image: 'C:/images/white-bg.png'
background_color: .2,.6,.7,1
ActionView:
ActionPrevious:
size: 1200, 40
font_size: 16
title: 'Ieditor'
with_previous: False
ActionOverflow:
ActionButton:
icon: 'C:/images/butt_prev.png'
ActionButton:
icon: 'C:/images/butt_next.png'

Answer 1

Here is a small working example of the 3rd column should look like (The A class)
Builder.load_string("""
<InputBar#BoxLayout>:
orientation: 'horizontal'
Label:
text: 'some text'
TextInput:
text: 'input?'
Label:
text: 'some text2'
TextInput:
text: 'input2?'
<A>:
orientation: 'vertical'
Label:
text: 'some title'
InputBar:
id: input1
InputBar:
id: input2
InputBar:
id: input3
InputBar:
id: input4
Label:
text: 'some title2'
InputBar:
id: input5
InputBar:
id: input6
InputBar:
id: input7
InputBar:
id: input8
InputBar:
id: input9
""")
class A(BoxLayout):
pass
class VApp(App):
def build(self):
return A()
if __name__ == '__main__':
VApp().run()
Just place it inside your big example I guess.