Miwa
August 24, 2019, 6:57am
1
Hello,
I am trying to create Bootstrap 4 form like a screenshot.
I would like to make a setting like screenshot for a mobile, and make all these three things in one row for a desktop browser.
Please kindly let me know how to do it.
I could do by this though, I can not go further by myself.
Thanks!
Teodor
August 24, 2019, 7:17am
2
Hello,
Please check the following tutorial:
You can easily build multi-column form layout with Wappler, using the built-in Bootstrap 4 form tools. First, let’s insert the form. We add the form inside a Bootstrap 4 column. Click the Add Inside button: And select Form: Then click the Add Inside...
1 Like
ben
August 24, 2019, 8:36am
3
It’s a pity that we have to insert an extra div.col element for each div.form-group element when the latter could house the col class.
2 Likes
Miwa
August 24, 2019, 9:32am
4
Thank you so much, both of you guys!!
I could solve this one.
However, I’ve got another issue.
Please see the screenshot below.
I’m building SPA though, the first screenshot is inside of the page.
(this is which you gave me the advice)
Then, if I displayed the internal page in the main page, it looks like below.
I don’t know what to do next…
Teodor
August 24, 2019, 10:33am
5
It's not really clear what do you mean by:
Can you explain a little more detailed? If possible also provide a link if there is a problem on the page.
Miwa
August 24, 2019, 12:48pm
6
Hi Teodor,
I am working under local environment.
so please see my reply.
My route properties (left side, under Routes on the left) is like this.
Name:home
Path:/
Url:index.html
Route properties(right side, under App structure)
ID:home
Path:/
Url:home.html
When I see index.html on Wappler, I see this which is not supposed to be.
When I see home.html
I see below
This has to be shown on index.html too.
Do you have any thoughts?
ben
August 24, 2019, 1:19pm
7
Not sure if this ill help, but here is my setup:
Routes:
App Structure:
Miwa
August 24, 2019, 1:23pm
8
Hi Ben,
I deleted route properties’ Url from App structure as you mentioned, then the internal part was gone…
Thanks,
Teodor
August 24, 2019, 1:31pm
9
Sorry, but I am really confused by your explanation.
Is your problem that your page looks differently in the browser and in the Design View of Wappler?
Miwa
August 24, 2019, 1:37pm
10
Hi Teodor,
Structure is like this.
index.html (like parent)
-home.html (child)
when I see the design view of index.html(this is not what I want)
when I see the design view of home.html(this is what I want even if I see design view of index.html)
I don’t know why the design changed even in SPA.
Hope you understand my question…
Teodor
August 24, 2019, 2:33pm
11
How does your page look in your browser? Is it fine there?
Can you also post a screenshot of the whole Wappler window with your page loaded there?
Miwa
August 24, 2019, 3:11pm
12
I attach screenshots here.
I want to see the content of the 2nd one exactly inside of the 1st one.
Thanks,
Teodor
August 24, 2019, 3:13pm
13
How does your page look in your browser. Something is not quite right I think, are you sure there is not some CSS included on the main page which styles the child page? It looks to me that this is the case…
Miwa
August 24, 2019, 3:17pm
14
this is the browser screen shot.
Yes, it is slightly different
I think I use the same style.css though, still can be there any differences between main page and child page?
Teodor
August 24, 2019, 3:18pm
15
I’m sure there is some CSS file included in the index.html page head tags which styles your content like this.
Please check your CSS files and rules.
1 Like