Height of query rows with an Edit icon

tford

When I don't have an Edit icon in a query Operation with Record, the height of the query row is about 26 pixels:
no icon 26 height.PNG

When I add a FA icon (or an external icon from a file), the height of the row jumps to 36 pixels:
FA 36 high.PNG

When I was building BSVs back in V6, the query row height didn't jump like that.

Is there a way not to loose screen real estate when adding an icon?

aware_support

You will need to override the default CSS settings in your custom CSS file.

tford

I was afraid that would be answer.

I have zero CSS experience and have not implemented a Custom CSS file.

BLOMASKY

I just "stumble" through CSS, but I added this to mine to solve that problem:

.aw-link.k-button.aw-link-no-text {
height: 1.5em!important;
}

tford

Do I have to put that in the CSS file described on page 28 of the "How To" Guide?

If so, how to I reference it in the query?

BLOMASKY

In your Aware/Tomcat/WebApps/Aware/Custom/CSS folder create a file that ends in .css (yes, you can create a SUB folder with your application name and put it in that instead). There is no need to reference anything, since this will override the default behavior for the buttons in a table. (maybe... possibly...)

Bruce

tford

That was a HUGE help. Thanks Bruce.

Now does anyone know if CSS can removed the box around the icon?

I have some shadowless icons I've used for a long time & they look a bit odd with the button box around them:

PointsWell

Just playing with the Web Console and switching things on and off suggests that the following items highlighted green should be overridden in your custom CSS

But be careful with background colours as they will affect the main buttons (save close etc)

Screen Shot 2020-07-28 at 13.45.43.png

Changes this
Screen Shot 2020-07-28 at 13.48.06.png

To this
Screen Shot 2020-07-28 at 13.47.29.png

Jhstephenson

tford wrote
[attachment=1]Icon_row_height.PNG[/attachment]

That was a HUGE help. Thanks Bruce.

Now does anyone know if CSS can removed the box around the icon?

I have some shadowless icons I've used for a long time & they look a bit odd with the button box around them:

[attachment=0]Shadowless_pencil_icon.PNG[/attachment]

We put the following in our custom CSS file to remove the borders around buttons:

.buttons_no_borders{
    height: 15px !important;
    border-width: 0px !important;
    border-style: none !important;
    background-color:transparent !important;
    margin: 0px !important;
    padding: 0px !important;
    vertical-align: middle;
    align-content: center;
}

Then just put that in the CSS Class properties for the button.

tford

Thanks!

Once I put the code from the box info my CSS file, how do I do this part:

Then just put that in the CSS Class properties for the button.

Jaymer

sorry, tom, been out a lot.
gimme a shout on Skype and I'll walk you through this stuff.
skype: jaymerjaymer