Boot Strap Container How To??

[ShaneStump]

Howdy All!

I am finally playing with the bootstrap that comes with IW 15+.

I am trying to do a responsive version of my current IW application that uses CGDevTools desktop / mobile components.

I can't seem to figure out how to create a container (region) of regions  that will will automatically fit as screen width allows.

That is, I want to create a page like this with the bootstrap components (see the grid of events):

Existing Reservation System

How do I arrange the regions so I can have n columns of events and have them automatically wrap?


Thanks in advance,

Shane

P.S. I want to implement something like:

https://getbootstrap.com/docs/3.3/compon...om-content

[LorenSzendre]

Shane,

0. Setup your ServerController to add the necessary headers in BaseConfig:
JavaScriptOptions.RenderjQuery := False;
IWBSLibSetCDNS;

Start with an empty form.
1. Add a TIWBSRegion (I set Align => alClient so that it's big enough to hold everything else). Set it BSRegionType property to bsrtContainer.
2. Add a TIWBSRegion inside the previous region, set BSRegionType to bsrtRow. I usually make it's Top about 16 pixels down from the top of its container so that I can see the Bootstrap hints in the upper right.
3. Add (you guessed it) a TIWBSRegion inside the "row", set type to bsrtColumn. Set BSGridOptions.GridXsSpan to 6. Arrange this region so that it takes one third of your horizontal space. Copy and paste it inside the row, put it at the exact same height as the other "column".

Run your app and see what markup is emitted. This should get you started.

[Jose Nilton Pace]

Shane, understand the BootStrap Grid System and you are done to do everything:
https://getbootstrap.com/docs/4.0/layout/grid/

[LorenSzendre]

Shane, understand the BootStrap Grid System and you are done to do everything:
https://getbootstrap.com/docs/4.0/layout/grid/

I think he understands Bootstrap. He just doesn't know how to realize his designs in IW with IWBootstrap.

[ShaneStump]

Howdy Lorenz!
I added the options as you indicated other than adding 'IWBSLibSetCDNS' as  I use C Builder.

Any how, I was pretty close to what you had other than setting the offset.

Any how, I still get the same output: vertical columns no matter what the width of the row is.

I even just started a new empty project and it is doing the same thing.

Obviously I am missing something probably so simple.

Could anyone provide a simple example that demonstrates 3 columns that stack as the window is sized smaller?

Thanks in advance.

All the best,

Shane

---

Shane, understand the BootStrap Grid System and you are done to do everything:
https://getbootstrap.com/docs/4.0/layout/grid/

Howdy Jose!

I have read the Bootstrap layout system (grid).

It seems just like all other layout systems of the past 20 years  !

Any how, I just need to get one example working so I can start asking other questions!

All the best and thanks for the help.

Shane

[LorenSzendre]

Howdy Lorenz!
I added the options as you indicated other than adding 'IWBSLibSetCDNS' as  I use C Builder.

Any how, I was pretty close to what you had other than setting the offset.

Any how, I still get the same output: vertical columns no matter what the width of the row is.

I even just started a new empty project and it is doing the same thing.

Obviously I am missing something probably so simple.

Could anyone provide a simple example that demonstrates 3 columns that stack as the window is sized smaller?

Thanks in advance.

All the best,

Shane

---

Shane, understand the BootStrap Grid System and you are done to do everything:
https://getbootstrap.com/docs/4.0/layout/grid/

Howdy Jose!

I have read the Bootstrap layout system (grid).

It seems just like all other layout systems of the past 20 years  !

Any how, I just need to get one example working so I can start asking other questions!

All the best and thanks for the help.

Shane

Based on what you wrote, your problem is that you set the Offset property. In my description you will notice that I mentioned the xs-col-span.

So do that -- put two IWBSRegions inside the region you set as your "row". And then set their xs-col-span properties to 6 (no offset). It won't hurt to put them side-by-side, so that they appear on your screen roughly as they will be, and make sure their Top properties are equal.

I don't have CPB, but I could write a sample project for you in Delphi, if you wish.

[ShaneStump]

Howdy Lorenz!
I added the options as you indicated other than adding 'IWBSLibSetCDNS' as  I use C Builder.

Any how, I was pretty close to what you had other than setting the offset.

Any how, I still get the same output: vertical columns no matter what the width of the row is.

I even just started a new empty project and it is doing the same thing.

Obviously I am missing something probably so simple.

Could anyone provide a simple example that demonstrates 3 columns that stack as the window is sized smaller?

Thanks in advance.

All the best,

Shane

---

Shane, understand the BootStrap Grid System and you are done to do everything:
https://getbootstrap.com/docs/4.0/layout/grid/

Howdy Jose!

I have read the Bootstrap layout system (grid).

It seems just like all other layout systems of the past 20 years  !

Any how, I just need to get one example working so I can start asking other questions!

All the best and thanks for the help.

Shane

Based on what you wrote, your problem is that you set the Offset property. In my description you will notice that I mentioned the xs-col-span.

So do that -- put two IWBSRegions inside the region you set as your "row". And then set their xs-col-span properties to 6 (no offset). It won't hurt to put them side-by-side, so that they appear on your screen roughly as they will be, and make sure their Top properties are equal.

I don't have CPB, but I could write a sample project for you in Delphi, if you wish.

Howdy Loren,

I am setting the BSGridOptions.GridXsSpan to 6 and it makes no difference.

Am I setting the WRONG property?

A Delphi example app would be fine. While I don't program in Delphi, I don't have a problem digesting it.

Thanks again,

Shane

[LorenSzendre]

[quote pid='1739' dateline='1538857809']

  Shane20181006.zip (Size: 7.66 KB / Downloads: 17)  A Delphi example app would be fine. While I don't program in Delphi, I don't have a problem digesting it.
[/quote]
OK, here is your project
Xs really does mean 2 columns, even on the smallest screen, so I should have said to start with Sm. As you probably know, Xs doesn't even exist in Bootstrap 4.
Also be careful to make sure that the IWBootstrap Layout Mgr is linked on your form.
Loren

[ShaneStump]

[quote pid='1739' dateline='1538857809']
 A Delphi example app would be fine. While I don't program in Delphi, I don't have a problem digesting it.

OK, here is your project
Xs really does mean 2 columns, even on the smallest screen, so I should have said to start with Sm. As you probably know, Xs doesn't even exist in Bootstrap 4.
Also be careful to make sure that the IWBootstrap Layout Mgr is linked on your form.
Loren
[/quote]

Thanks Loren! I really appreciate it.

After I get back from early dinner, I am going to play with it while listening to the Aggie Football (REAL FOOTBALL) game  !

All the best,

Shane

[LorenSzendre]

You're welcome, go A&M))