screwey viewbox results

[madtowng]

Hi everyone,
I created an UX with a viewbox, but I can't seem to get the css to work as expected with the viewbox layout.
I want the all the data in example one formatted like example 2.

Because I'm still relatively new to css I'm assuming this is something I did wrong.
It would be extremely helpful if someone would steer me in the right direction.


eva21example.png

div {
text-align: left;
padding: 0px;
margin: 0px;
}
body {
margin: 0px;
padding:0px;
}

.categories-container {
display: grid;
grid-template-columns: 10% 90%;
position: fixed;
top:0px;
left:0px;
right:0px;
width:100%;
padding-top:0px;
border: 1px none red;
margin: 0px;
}

.data-left {
text-align: center;
background-color: lightblue;
margin: 0px;
cursor: pointer;
padding-left:5px;
}

.data-right {
text-align: left;
background-color: lightgray;
margin: 0px;
cursor: pointer;
}
.listItemSelected {
color: #000;
background: #659eff;
border-style: solid;
border-width: 2px;
border-color: red;
padding:0px;
}​

[Pat Bremkamp]

data-left should conain a float: left;

[madtowng]

Hi Pat,

I appreciate the fast response.
I adjusted the css as shown in the image below, but all that happened is the ID moved left.

Capture.png

[Lance Gurd]

Hi Gregg,

This is my goto CSS for laying out nice columns in a viewbox

* {
  box-sizing: border-box;
}
.row::after {
  content: "";
  clear: both;
  display: block;
}
[class*="col-"] {
  float: left;
  padding: 1px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.listItem {
    padding:3px;
}​

This gives you up to 12 different column widths, if you ever need more just play around with the percentages. Then for your layout in your viewbox use

<div class="[theme:listBox.base.item.className|{dialog.style}ListItem]"  a5-item="_AARow" a5-value=""><div class="row">
    <div class="col-2">
        {CategoryID}
    </div>
    <div class="col-10">
        {CategoryName}
        <br>
        {Description}
    </div>
</div></div>​

You can, obviously add your own colouring etc

[madtowng]

Lance Gurd It's close, but not quite what I'm looking for.
Your method returns all the data, but I really want the format shown in Example 2
Capture.png

[peteconway]

Example2.zip Example2.zip GreggExample2.png
See how you go with this.
Pete

<div a5-item="_AARow" a5-value="{[count]}">
<div style="display: table; width: 100%;;height:120px; ">
<div style="display: table-cell; width: 200px; vertical-align: middle;background-color: lightblue;padding:30px">
{CategoryID}
</div>
<div style="display: table-cell; width: 100%; vertical-align: middle;height:100px;background-color: lightgray;">
{CategoryName}<br>{Description}
</div>
</div>
</div>

[madtowng]

That works Pete.
Makes me wonder what was wrong with my css/layout combination.

[madtowng]

I figured it out, thanks to Lee Vasic.
For some reason when using sqLite, I needed to put the db file in the <drive>\A5Webroot\LivePreview\Data folder.
Now that I have this part working right, I need to figure out how to get headers to appear just at the top and not
scroll off the page.

Capture.png

<!-- CSS Code -->
.categories-container {
display: grid;
grid-template-columns: 10% 90%;
}
.data-left {
text-align: center;
background-color: lightblue;
}
.data-right {
text-align: left;
background-color: lightgray;
padding-left:5px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:gray;
}
.listItemSelected {
color: #000;
background: #659eff;
border-style: solid;
border-width: 3px;
border-color: red;
padding:0px;
}​

<!-- <div class="header-container">
<div class="header-left">Category ID</div>
<div class="header-right">Category / Product </div>
</div> -->

<div a5-item="_AARow" a5-value="{[count]}">
<div class="categories-container">
<div class="data-left">
<b>{CategoryID}</b>
</div>
<div class="data-right">
{CategoryName}<br>{Description}
</div>
</div>
</div>​

[peteconway]

categories-container -hint don't use inherited stuff - build it yourself - then use it - you will understand it better.

Always avoid using AA style sheet css - I just start by building my own - baby step until it does what I want - the AA generic css does not cut it any more for me.. - have added a developer and user theme builder all in the database and all client-side and all in my Hybrid viewbox's.

Check this out. it's less than 500k. has no field controls at all.

Video: https://www.screencast.com/t/6Di5WMJfXxR

Pete


ThemeBuilder.png

[Lance Gurd]

Hi Gregg,

Instead of using a header in the actual layout, use the wrapper on the viewbox properties tab, insert the sample HTML in the wrapper HTML and start from there. It should look something like this

<div style="display: flex; flex-direction:column; height: 100%;">
    <div class="header-left">Category ID</div>
<div class="header-right">Category / Product </div>
    <div a5-layout-target="true" style="flex: 1 1;"></div>
    <div>put your footer HTML here...</div>
</div>​

Take out the footer <div> if you don't want anything in the footer

Or here is your component using the styling CSS columns that I put up earlier with your colours/alignment northWindLiteVBUX.zip

[peteconway]

I need to figure out how to get headers to appear just at the top and not
scroll off the page.

I have showed you this before - the easiest way (and responsive way) is to just just it in the controlbar of the panel, above the vb.

[peteconway]

What's the relevance of the record ID? Why should anyone see it?

[madtowng]

I'm using this as practice for a warehousing project where the clientID is part of the tracking label
and pull list. I haven't determined the ID number will be displayed, but it's an easy way for me to
know what's going on.

[peteconway]

Cheers

[madtowng]

Hi Pete , Hi Lance,
I really appreciate the time and effort from each of you as I try to understand
concepts I'm not yet comfortable with.
The image below shows 2 headers. The one I can't find the right settings for in the control bar, and the one
that uses the viewbox wrapper.
I keep using CSS grid to display content because even though I haven't mastered it, it appears to accomplish
the most with the least human interaction (less room for human error, and less time to debug when human
error is introduced).

I have one project where I was able to somehow get the header in the control panel to work as expected,
but I look back on it, I get erratic responses from AA.

Capture.png