I am generating a table with the code below. The problem is that some of the text fields are as large as 255 chars. See attached image. Notice 2.2 IUS. In this case the additional cols I want to display are pushed off the screen to the right. I'd prefer the 'dual_use_text' wrapped like you can do in Excel at perhaps 30 chars for the field width.

If this is not possible is it possible have each field display one after the other like this? bus_comp whatever

dual_use_text xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

innovative_text xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

sig_eco_text xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

` Table::create(array(

"dataStore"=>$this->dataStore("ius")->filter("taxyear","=",$_SESSION['last_TY']),
"columns"=>array(
    "bus_comp",
    "dual_use_text",
    "innovative_text",
    "sig_eco_text"),

"class"=>array(
    "table"=>"table table-hover"
)

)); `

what are you using to do your styling for your report?

if you want to limit the size of a column to a specific width like so many characters. I do it by calling my custom.css in my report layout and then in my report.view.php I call the .css class name in the column name array

example name .customer-address I use the style sheet to limit size, nowrap for the column, max-width, overflow

so at your column dual_use_text

"dual_use_text"=>array(
                    "className"=>"dual_use_text"
),


my custom.css entry for that column styling

.dual_use_text {

max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 90%;

}

hope I helped and didnt tell you something you know how to do better but I dont see any examples of your styling in the examples of your setup that is minimal :)

you need to set limits on your containers, cards, rows using bootstrap defaults and then custom styling after that

Thanks. I am half accountant and half software engineer and when i was working in software (in the 80 and 90's) I was really doing back end stuff (mostly voice). So my UI skills are very limited. Here is the style section of my report:

<style>
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-family: inherit;
        font-weight: bold;
        color: inherit;
        text-rendering: optimizelegibility;
    }

    .koolphp-table td {
        font: 13px/20px normal Helvetica, Arial, sans-serif !important;
        color: #4f5155 !important;
    }

    th {background-color:darkred ;
        color:white;}
    tr {color:green;}
    tf {background-color:red ;
        color:white;}

    .box {
        background-color: lightgrey;
        padding: 15px 25px;
        margin: 10px;
    }
</style>

so what I gather is that I would add your example to the style section and then in the following I would add

    "class"=>array(
        "table"=>"table table-hover"
    )
)),
"dual_use_text"=>array(
                    "className"=>"dual_use_text"
),

Sorry for my complete lack of knowledge in this area.

yes thats right. I used the koolreport pro download examples as a start to understand bootstrap better. my entire report is inside a container and it can be called in your css like this .container { styles:example; } then I also put each section of my report tables inside bootstrap cards and rows.

the example reports in the coolreport pro was a good start for me. I added card(containers) they used to be called panels but bootstrap 5 only talks about card not panel. I am new also to this and had to spend a lot of time trying to learn how bootstrap styling works.

anyways whatever you use to wrap your coolreport table like I do with cards allows me to set the style for the coolreport table inside my custom.css or individually if I have several tables on a report. if you dont set some styles in what you use to wrap your koolreport tables it can give you some unexpected results like one of your columns adding space to all the others.

yes add the .dual_use_text { } to your style sheet and play around with the example i gave. hope it helps yes change the dual_use_text className in dual_use_text column so it knows it knows to use the style settings you define

OK. I added the dual_use_text to the <style> section. I then added the following className. I get the same exact result. BTW, I want all the columns in that table to use the same "dual_use_text" format.

Table::create(array(
    "dataStore"=>$this->dataStore("ius")->filter("taxyear","=",$_SESSION['last_TY']),
    "columns"=>array(
        "bus_comp",
        "dual_use_text",
        "innovative_text",
        "sig_eco_text"),


    "class"=>array(
        "table"=>"table table-hover"
    ),
    "dual_use_text"=>array(
        "className"=>"dual_use_text"
    )
));

Thanks for your example. Where does

"dual_use_text"=>array(
                    "className"=>"dual_use_text"
),

go? I have the feeling that I pout it in the wrong place?

I then also tried this directly from the "documentation"

Table::create(array(
    "dataStore"=>$this->dataStore("ius")->filter("taxyear","=",$_SESSION['last_TY']),
    "columns"=>array(
        "bus_comp",
        "dual_use_text"=>array(
            "cssStyle"=>array(
                "th"=>"font-weight:bold;text-align:center",
                "tr"=>"text-align:center",
                "tf"=>"text-align:center",
            )
        ),
        "innovative_text",
        "sig_eco_text"),


    "class"=>array(
        "table"=>"table table-hover"
    ),
    "dual_use_text"=>array(
        "className"=>"dual_use_text"
    )
));

Still doesn't work.

things are in the wrong place. dual_use_text is a column so it needs to be in the column array only and the "cssStyle" call needs to be outside the column array and in the Table::create(array( just like dataStore and columns are. like below. are you using the report example code as a reference? you need to know how bootstrap works if you are going to understand how to style everything. hope this gets you moving also what IDE are you using. It will help with formatting phpStorm or intellij idea is what I use.

Table::create(array(
    "dataStore"=>$this->dataStore("ius")->filter("taxyear","=",$_SESSION['last_TY']),
    "cssStyle"=>array(
                 "table"=>"table table-striped table-bordered",
                "th"=>"font-weight:bold;text-align:center",
                "tr"=>"text-align:center",
                "tf"=>"text-align:center",
            ),
    "columns"=>array(
        "bus_comp",
         "dual_use_text"=>array(
                    "className"=>"dual_use_text"
          ),
        "innovative_text",
        "sig_eco_text"),
    ),
));

I use phpStorm. I modified it to this:

able::create(array(
"dataStore"=>$this->dataStore("ius")->filter("taxyear","=",$_SESSION['last_TY']),
"cssStyle"=>array(
"table"=>"table table-striped table-bordered",
"th"=>"font-weight:bold;text-align:center",
"tr"=>"text-align:center",
"tf"=>"text-align:center",
),
"columns"=>array(
"bus_comp",
"dual_use_text"=>array(
"className"=>"dual_use_text"
),
"innovative_text",
"sig_eco_text"),

    "class"=>array(
        "table"=>"table table-hover"
    ),
));

I get the same output.

I guess my thought behind getting koolreport initially was that I was that since I didn't know bootstrap, I thought I was going to get the support needed to create a report from koolreport. They have been helpful, mostly.

what does your css look like now?

show what the html code looks like you have your table wrapped in maybe.

the only way to make your styling look the way you want it is by knowing how bootstap works. thats what koolreports uses to do its styling. I think you will get good support for how to bring data into a report but when it comes to styling thats all done by knowing bootstrap

This site is great or has been for me https://www.w3schools.com/bootstrap4/

My report is large with many different sections. here is the style now:

<style>
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-family: inherit;
        font-weight: bold;
        color: inherit;
        text-rendering: optimizelegibility;
    }

    .koolphp-table td {
        font: 13px/20px normal Helvetica, Arial, sans-serif !important;
        color: #4f5155 !important;
    }

    th {background-color:darkred ;
        color:white;}
    tr {color:green;}
    tf {background-color:red ;
        color:white;}

    .box {
        background-color: lightgrey;
        padding: 15px 25px;
        margin: 10px;
    }

    .dual_use_text {

        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        line-height: 90%;

    }
</style>

What I really don't get is the arrays in Koolreport and how to use the dual_use_text above to style the columns. I'll read the bootstrap training you cited. But I dont think it will mention how to use the style in koolreport.

Well I am back at it. I used your recommended style and now I get this which is a significant improvement. Thanks.

Now I need to have a number of lines, not just one. I took a look at wrapping the text and I surely don't want it overflowing. I can do this by making the "box" big enough. But where do i specify the size of the box? I do see this in my style: .box {

    background-color: lightgrey;
    padding: 15px 25px;
    margin: 10px;
}

I am assuming this is the default box. Can I make another box up there that is larger and use it just for this table?

If you want to know what kind of html container things are in, right click on your browser and inspect the code in the inspection window you can test style settings out and you will see the names of things. Tables have th for headers, tr for table rows and td for table data. You are trying to style a box but that’s not what the container your data is in.

Additionally Tables are surrounded by div and div are in rows. And everything in a container and it all has to follow an order for you to get things to style correctly. You have to take an html course and a bootstrap course. Take them on Udemy. I cant really begin to really help you without you knowing that stuff. Take a few days on those topics and you will save yourself a ton of frustration.

The answer is overflow-wrap: break-word; and then changing the row height with height: 200px;.