Messages

1

Help for ParamQuery Pro / Issue with setting row height

« on: October 10, 2024, 02:53:50 am »

I am facing an issue with setting the row height in PQGrid. Despite multiple attempts, the grid continues to render rows with a height that differs from my defined settings.

Details:

• I have set autoRow: false in the grid configuration and attempted to manually set the row height using both CSS and JavaScript.
• With autoRow: false, the maximum row height I observe is 27px, which is smaller than my desired height of 36px.
• I’ve also tried using autoRow: true, but with this setting, the smallest row height observed is 39px, which is larger than my desired row height of 36px.
• I have used various CSS and JavaScript methods to control the row height, but none seem to take effect as expected.

Here are the steps I have done:

• Set autoRow: false and tried using rowHeight in the grid configuration.
• Added the following CSS rule to control row height: .pq-grid-row { height: 36px !important; } This rule does not seem to apply, and the grid still displays rows with a maximum height of 27px.
• I also tried using the following CSS, based on a suggestion in another support item: .pq-no-wrap > .pq-grid-row > .pq-grid-cell, .pq-no-wrap > .pq-grid-row > .pq-grid-col > .pq-td-div { word-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px; height: 36px; } However, this CSS also had no effect on the row height.
• Additionally, I tried using jQuery to manually adjust the height after the grid rendered: $(".pq-grid-row").css("height", "36px"); Despite these efforts, the grid still renders row heights of 27px with autoRow: false

I need to set the row height to specific value, and I would like guidance on how to achieve this, whether through the configuration, CSS, or JavaScript. 

Could you please advise on how to set the row height?

Thank you in advance for your assistance!

Best regards,

Mark

2

Help for ParamQuery Pro / custom summation?

« on: August 24, 2024, 01:29:31 am »

I am going to try and explain this as best I can and provide an image that I hope will help explain it as well.  In each cell of my grid I have some custom html that actually has two different values in it.  If you look at the image you will see 10 /10% in row 5.  The second value is always static; it is set when the grid is loaded and cannot be changed by the user.  However, the first value can be changed. Using the example above a user could type in 37 and you would see 37/10%.  What I need help with is to sum all of those first values and display that total in another cell.  In the image example, if I have two values on the same row 10/10% and 17/20%, in one column I would sum the first values (27) and in another column I would have the second value sum (30).

3

Help for ParamQuery Pro / Text rotation in row header

« on: August 07, 2024, 05:45:10 pm »

I am having difficulty getting text rotation to work properly. I will try to explain this as best as I can and show some results of what I am seeing.

First, if I rotate the text 90 degrees, it looks like it works, but upon closer inspection, it is not quite right. Here is the CSS I am using:

.rotate .pq-title-span {
    display: inline-flex;
    height: 100px;
    width: 100%;
    text-align: left;
    transform-origin: 50% 20%;
    transform: rotate(90deg);
    font-size: 11px;
    font-family: '3M Circular TT', sans-serif;
    border: 1px solid red; /* Added border for visibility */
    background-color: lightyellow; /* Added background color for visibility */
}


It appears to work as a side effect and not properly. For the header, I am making the area yellow with a red border to show where it is. I don't have a place to put public images to display what I am seeing, so I will attempt to describe it. The header cell is tall and narrow; when it is rotated 90 degrees, the area becomes wide and short. The text then bleeds out of the rotated area. Visually, this looks fine, but if you truncate the text, it typically cuts off the longer header. However, with the current settings, if we leave the background the same color as the container, it visually looks fine.

Now, if we rotate it 270 degrees, we get a similar result, but the text gets truncated because there is no more room in the container that the header is stored in. I am using the exact same CSS, just changing the rotation to 270 degrees. I have also played with the transform-origin, and while it gets somewhat better, I can never get it to use the entire area of the object containing it.

If I do a simple example in a static HTML page with the following CSS:

        .rotate {
            position: relative; /* To contain the absolutely positioned span */
            display: flex;
            align-items: center; /* Center content vertically */
            justify-content: center; /* Center content horizontally */
            width: 50px; /* Example width */
            height: 100px; /* Example height */
            border: 1px solid #ddd; /* Just for visual aid */
        }

            .rotate .pq-title-span {
                display: inline-block;
                white-space: nowrap; /* Prevents text wrapping */
                overflow: hidden; /* Hide overflowing text */
                text-overflow: ellipsis; /* Add ellipsis to truncated text */
                transform-origin: center; /* Pivot point at the center */
                transform: rotate(270deg); /* Rotate text 270 degrees counterclockwise */
                text-align: center; /* Center text horizontally */
                font-size: 10px;
                font-family: '3M Circular TT', sans-serif;
                position: absolute;
                left: 50%; /* Center horizontally */
                top: 50%; /* Center vertically */
                transform: translate(-50%, -50%) rotate(270deg); /* Adjust position after rotation */
            }

It displays as I would expect. However, if I put that same (or similar) CSS in for the grid, I don't get the same behavior.

What can be done to make the 270-degree rotation behave better?

I can provide images or other information if you tell me how to get it to you. I did not see a way to upload a file, just to add links to items on the Internet.

4

Help for ParamQuery Pro / Custom formatting in column header

« on: July 25, 2024, 04:25:10 am »

Is there a way to do custom html/css in a column header in the grid.

                                var row = {
                                    title: studentname ,
                                    align: "center",
                                    colModel: colDT
                                }

This would put the student name in for the colum header.  I would like to put more information in the header.  Put in something like name and then underneath email and so on.

Something like:

Name
email
phone number

and add some custom css to the various values.

I hope that makes sense.