Numbering interferes with fontawesome icon CSS
Numbering interferes with fontawesome icon CSS
Hello friends!
Hello friends! I'd like to ask for your opinion regarding multi-line text editing. This suggestion comes from one of our Russian-speaking customers Dolina Zamkova so here is a translated abstract of our email conversation. Current problem: When you write multi-line text, you must press 'Shift-Enter' first, then use 'Enter' to start a new line, then 'Ctrl-Enter' to submit the text. Wouldn't it be easier to have a setting that will allow using Enter to always write multi-line texts, and always submit on 'Ctrl-Enter', like you do it in text messengers? So we could add a new account-wide setting, on the Settings page: () Finish editing by pressing 'Ctrl-Enter' (convenient for multi-line text) What do you think? Do you write multi-line texts in Checkvist at all? Other thoughts of how we could make it better? :)
Thanks, we'll take a look. Possibly there is an alternative way to add an icon, to avoid a clash with numbering CSS. As a workaround you can use an explicit icon like .
ReplyDeleteKirill Maximov How would I use this ?
ReplyDeleteSorry for the delay. I'd like to ask, have you applied CSS rules from the https://checkvist.com/checklists/486715/tasks/16834507, the part about .numberedList styling?
ReplyDeletebeta.checkvist.com - Checkvist customization (CSS samples) - outlined in Checkvist
Kirill Maximov Better late than never :)
ReplyDeleteNo I haven't applied the numberedList CSS rules ... should I?
Mark Dickens Sorry for the delay again. On the link I posted there is a fragment for custom icon usage when numberedLists are used, please check it out.
ReplyDeleteKirill Maximov thanks for this, it does something :)
ReplyDeleteAlmost there!
Below is a snippet of the CSS I am using for showing an icon.
The snippet also transforms the numbering (see attached screen clip) and I'm not sure how to prevent this. Any ideas?
.fg1 .userContent:before {
content: "\F132";
font-family: FontAwesome;
font-size: 24px;
font-weight: 500;
padding-right: 5px;
color: #cccccc;
display: inline-block;
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
text-shadow: 0.3px 0 0 #000, 0 -0.3px 0 #000, 0 0.3px 0 #000, -0.3px 0 0 #000;
}
/* The following section is required to fix case when icon is used with numbered lists /
.numberedList .fg1 .userContent:before {
* content: counters(section, ".") ". \F132"; /* Same icon code as in previous section */
}
https://lh3.googleusercontent.com/4rxCVe_w5QikBVjABAYzIZCnPgiEQeczR3t1Vp629fj-KJhMKGscXM9NSZgiwi_nigQeBbWNSnOAAZOuWAmjUGRNBOtoDlV-pUUA=s0
Hi Mark Dickens,
ReplyDeleteThis is all tricky stuff :)
Try this code instead:
.fg1.editable:before {
content: "\F132";
font-family: FontAwesome;
font-size: 24px;
font-weight: 500;
padding-right: 5px;
color: #cccccc;
display: inline-block;
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
text-shadow: 0.3px 0 0 #000, 0 -0.3px 0 #000, 0 0.3px 0 #000, -0.3px 0 0 #000;
}
Only one section is needed, no duplication.
HTH,
Kirill Maximov
ReplyDeleteGotcha! That's fab.
Thanks Kirill.
I hope Christmas has been good and have a great New Year!