css adjustments

Scriptcase 8 Discussion
#1

hi guys

we all know the css of the themes are not 100%

many times we need to do some adjustments to make like vertical-alignment, right to left, and such stuff… first thing I look at is the field settings, if not available, i go to css applications (themes) advanced, then finally when stuck i try to add manual css stuff to menu application, that is if I could manage to write the correct code :frowning:

i’m now stuck in 2 tiny things of these:

1- in grid, the small pencil icon (the edit icon to application link to edit the grid record) - does not align in middle… when the grid data is thick lines (like 50 or 60 px each line) the pencil icon really goes ugly in vertical alignment=top i never could do it go middle to be in the middle of the grid record…

2- the grid > search (advanced) field “integer” input never aligns left to right… it is by default going RTL which makes it odd and annoying, tried all possible ways… no use

did anyone manage to adjust those? is there anyway better than "inspect elements of Google Chrome then find the css related to that and then hit head with walls because is not working!?

please advise

#2

Welcome to the world of css :wink:

No as in all apps and cms’s I worked on the search for the correct css class and stylesheet file is one of the most hated operations. The only problem with sc is that these files can (and sometimes will) be overwritten on new SC editions. So you need to keep track of your changes so that you are able to restore them. Other option is to overrule the standard classes by your own css but then you still have to apply the correct include after update.

#3

oh! thanks for confirming this, and for welcoming me in this sh****y environment, i was doubting it actually and keep blaming myself that i’m doing something wrong, when i do change those “internal” css files i keep a copy in a special folder to cover my *** when upgrading sc version :smiley: but mostly i’ve the corrected css code in the menu app onLoad event as Mr Dave advised thankfully before, so it does the job, and even if you upgrade SC, the code you put in the menu app stays there… no issues…

in summary: first is if can’t be modified from field settings->go css themes and update there-> if didn’t work, check for additional css that can be added… and if it is in (usually is here) style.min thing in jQuery plugin (“third” folder" then need to keep the file after change to replace later when new SC version is up…

problem is still can’t know where that small pencil icon is from the css!? and also want to change the RTL to LTR in search field (integer) and don’t know what css div or style or even class i should update/add anyone have done anyone of those please let s know

#4

On the onAppInit try with an echo of <style/> using !important in your css modifications.

Another option is to to this <style/> inside your HTML templates, and with this apply to all apps using this headers

#5

[QUOTE=Giu;31980]On the onAppInit try with an echo of <style/> using !important in your css modifications.

Another option is to to this <style/> inside your HTML templates, and with this apply to all apps using this headers[/QUOTE]

Hi Giu, long time didn’t see your shiny name bro! :slight_smile:

Okay that is what Dave advise and works ok, but again, how to know the correct CSS class? and what to write between the <style> tags is not an easy thing! I usually right-click and select inspect element… any other idea or something more direct/accurate?

#6

For example:

<input type="text" alt="{datatype: 'integer', maxLength: 11, thousandsSep: '.', allowNegative: false, onlyNegative: false, enterTab: false}" value="" size="11" name="id_autocomp" id="id_ac_id" style="text-align: right;" class="sc-js-input scFilterObjectOdd ui-autocomplete-input" maxlength="14" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

This is the HTML for the ID field on advanced search.

try to echo :

.sc-js-input.scFilterObjectOdd.ui-autocomplete-input {
    text-align: left !important;
}

I’m not a CSS expert either.

#7

Mike,

For the pencil - in the Grid’s OnSciptInit (I had same issue and this fixed it):

// 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>';

Don’t know regarding the other one - but the principal should be the same. Use the element inspector in Chrome / FF to determine what css classes are in play…

#8

Thanks again adz, that works ok for the small pencil and also for the details icon

Thanks also Giu dear, however, that integer field insist to be RTL i tried all possible ways of adding the provided code and tried many other possibilities, no way, it is stuck as RTL which is annoying, so I may change the filed type to text, it will still can search integer numbers, and that is dirty workaround until we see if SC guys will ever care about these small important things… although i don’t think so because it is since releasing v8

#9

[QUOTE=MikeDE;32060]Thanks again adz, that works ok for the small pencil and also for the details icon

Thanks also Giu dear, however, that integer field insist to be RTL i tried all possible ways of adding the provided code and tried many other possibilities, no way, it is stuck as RTL which is annoying, so I may change the filed type to text, it will still can search integer numbers, and that is dirty workaround until we see if SC guys will ever care about these small important things… although i don’t think so because it is since releasing v8[/QUOTE]

Are you using Adv. Search on new page? or in the same page? in new page my advice will not work.

#10

no, it is in the same page, didn’t change anything extra, displayes the search as inital module, then the results are in grid

however, what is interesting now i added this echo to the inSciptInit of the saerch!!! i found bunch of events in the search itself, not only in the grid!

echo ‘.sc-js-input.scFilterObjectOdd {text-align: left !important;}’;

and it worked :slight_smile: Thanks Giu dude, your code works, i just removed the auto complete part because i’m not using auto complete and it was not in the element which i inspected in my browser

cheers

#11

I’m glad it worked :wink: