Consider this Grid (this is from the Preview window in Config Tool)
1) Panel Operation - Add button in the Panel Toolbox @@@@@@@@@@@
2) Panel Operation - Add button in the Top Panel Toolbar @@@@@@@@@@@
In my opinion, #1 has drawbacks of being overlooked (way to the right), and you cannot add text to it.
#2, while used frequently, annoys me because I lose 1 inch of screen space for a button thats only 80px wide and the rest of that line is wasted. Vertical screen space is at a premium.
So I discovered an extremely easy technique to achieve the following.
This is in the regular caption area so it utilizes un-used space.
The cursor changes to a pointer on Hover and the button "brightens" on hover like a real button.
*** One additional benefit of this is that you get to keep the built-in Panel Toolbox operations (export CSV, PDF, etc.). A Custom Header loses those icons.
And for the more adventurous, this Custom Header uses toggle buttons to perform filtering behind the scenes. An Add button could easily be placed here, but again its taking away Vertical screen space. So Why Custom Header in the first place? Because I would have needed to write [at least] 3 Queries "Show Active ROs", "Show Inactive ROs", "Show ALL ROs" and then I have a lot of redundancy so if 1 Query needs to have a field added, I have to update it in 3 places.
When you want to provide a mechanism to allow a user to Add a New Record from a Grid, there are [at least] two ways to do it.Easy CSS Mod - custom Add/New button on Grids
Easy CSS Mod - custom Add/New button on Grids
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL
-
- Posts: 297
- Joined: Wed Apr 22, 2015 11:44 pm
Re: Easy CSS Mod - custom Add/New button on Grids
Jaymer, I just saw this and wondered if it might help with the current issue I am having with my buttons disappearing.
You show the picture of what it looks like in your post, but I don't see where you explain how you did it. Am I missing something in your post.
Jim
You show the picture of what it looks like in your post, but I don't see where you explain how you did it. Am I missing something in your post.
Jim
Re: Easy CSS Mod - custom Add/New button on Grids
Since you already have Panel Operations defined, there's 1 simple change to those settings - every thing else stays the same:
I already use "addrec" sometimes as a css tag in that field to turn my [+ Add] button green WHEN i want to use a normal Top Panel Toolbar button.
For this button I made it "addrec-caption". (for the green "addrec" button, but with a caption)
For this Add button, its location is Panel Toolbox already. And it normally shows only a + in the upper right.
The CSS adds:
1) the +
2) the green box
3) the next (ie. New)
extra:
This is more CSS, for a "New" button, and a 2nd button that says "Multi-Add" from the pic in that other post.
Obviously, the 1st part is just for FA , and the "addrec-caption" is the main CSS.I already use "addrec" sometimes as a css tag in that field to turn my [+ Add] button green WHEN i want to use a normal Top Panel Toolbar button.
For this button I made it "addrec-caption". (for the green "addrec" button, but with a caption)
For this Add button, its location is Panel Toolbox already. And it normally shows only a + in the upper right.
The CSS adds:
1) the +
2) the green box
3) the next (ie. New)
Code: Select all
.addrec-caption,.addrec-caption:hover{
font-family: "Fira Sans Extra Condensed";
color:#fff!important;
background-color:#4CAF50!important;
border: 2px solid #4CAF50;
padding: 2px 4px;
margin-left: 10px;
cursor: pointer;
}
.addrec-caption:after {
font-family: "Fira Sans Extra Condensed";
font-weight: 400;
content: "New";
color:#fff!important;
background-color:#4CAF50!important;
border: 2px solid #4CAF50;
margin-left: 4px;
}
extra:
This is more CSS, for a "New" button, and a 2nd button that says "Multi-Add" from the pic in that other post.
Code: Select all
.addrec,.addrec-hover:hover{
color:#fff!important;
background-color:#4CAF50!important;
border: 2px solid #4CAF50;
}
.addrec-caption,.addrec-caption:hover{
font-family: "Fira Sans Extra Condensed";
color:#fff!important;
background-color:#4CAF50!important;
border: 2px solid #4CAF50;
padding: 2px 4px;
margin-left: 10px;
cursor: pointer;
}
.addrec-caption:after {
font-family: "Fira Sans Extra Condensed";
font-weight: 400;
content: "New";
color:#fff!important;
background-color:#4CAF50!important;
border: 2px solid #4CAF50;
margin-left: 4px;
}
.addrec-caption-many,.addrec-caption-many:hover{
font-family: "Fira Sans Extra Condensed";
color:#fff!important;
background-color:#4CAF50!important;
border: 2px solid #4CAF50;
padding: 2px 4px;
margin-left: 10px;
cursor: pointer;
}
.addrec-caption-many:after {
font-family: "Fira Sans Extra Condensed";
font-weight: 400;
content: "Multi-Add";
color:#fff!important;
background-color:#4CAF50!important;
border: 2px solid #4CAF50;
margin-left: 4px;
}
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL