[SOLVED] Align edit row "pencil" icon.

Scriptcase 8 Discussion
#1

Hi

Does anyone know how to re-align the pencil (and other) grid editing icons?

I have rows with multiline data (so can be quite “thick”) - to make things look balanced I have the data aligned vertically, but the icons in question are at the top each row, and I cannot see a way to make them central (vertically) too? Attached pic illustrates what I mean (note the rows could end up much thicker than shown)

Any ideas?

Thanks

Capture1.JPG

#2

Search to align vertically in CSS

#3

Thanks Giu - will try that

#4

Giu

Had a look around but couldn’t see anything that would help. Also looked in the CSS Button options (under Layout Menu) too and can see the “Pencil” icons, but very limited what I can do to them - basically can just change the image?

Any samples anywhere?

Thanks

#5

informative post, i will try to use

#6

Use Web Console to see what CSS use the pencil or the cell, and on your onSCriptIni do an echo with a CSS modifiying the rule to align vertiucally. Sorry, but right now I don’t have any project with this problem to take a look.

#7

Thanks Giu - that does make more sense. I’ll experiment and update later when I get a chance.

#8

Ok - I have added this code on the onScriptInit:

echo '<style type="text/css">';
echo '.scGridFieldEvenFont { valign: middle; }';
echo '.scGridFieldOddFont { valign: center; }';
echo '</style>';

Looks like there are settings for alternate rows - so added for both (not sure if it should be “middle” or “center”, so used both as a test).

Neither work - but suspect it’s my poort HTML / CSS knowledge more at fault.

After inspecting the element in question (e.g. pencil icon) I get (see pic):

I have higlighted in yellow what I think the relevant bits are. Certainly, scGridFieldEvenFont and .scGridFieldOddFont don’t seem to offer vertical alignment attributes. This is how the form looks - you’ll see the rest of the row is vertically aligned in the center:

I’m clearly getting my attributes / styles muddles up :frowning:

Any thoughts please?

Capture.jpg

Capture2.JPG

#9

Try adding !important

http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

#10

Thanks Giu

Tried the following first (in onScriptInit in the grid) and it worked! I didn’t need the !important in the end (but a good shout), it was simply a matter of picking the right attribute at the right time.

// makes "pencil" etc align vertically in the middle

echo '<style type="text/css">';
echo '.scGridFieldEvenFont { vertical-align: middle; }';
echo '.scGridFieldOddFont  { vertical-align: middle; }';
echo '</style>';

Thanks for your help!

Capture3.JPG

#11

Glad to hear it’s solved :wink: