position style sorting triangles

Resolved

(@idart)

Hello Tobias
I suffered for half a day – I can not set up styles for the headings
please help
what to change to make as there http://sch***1275.ru/profs/
we are talking about triangles – I need to place them on top

/* Sorting */
.dataTables_wrapper .sorting,
.dataTables_wrapper .sorting_asc,
.dataTables_wrapper .sorting_desc {
	padding-right: 20px; /* more right padding for sort arrows */
	cursor: pointer;
	outline: none;
}
.dataTables_wrapper .sorting div,
.dataTables_wrapper .sorting_asc div,
.dataTables_wrapper .sorting_desc div {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.dataTables_wrapper .sorting div:before,
.dataTables_wrapper .sorting div:after,
.dataTables_wrapper .sorting_asc div:before,
.dataTables_wrapper .sorting_asc div:after,
.dataTables_wrapper .sorting_desc div:before,
.dataTables_wrapper .sorting_desc div:after {
	font-family: TablePress;
	font-weight: normal;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	top: 0;
	bottom: 0;
	left: auto;
	right: -14px;
	margin: auto;
	height: 14px;
	line-height: 1;
	padding: 1px 0 0;
}
.dataTables_wrapper .sorting div:after {
	content: "\f0d8";
	color: #E3E3E3;
}
.dataTables_wrapper .sorting_asc div:after {
	content: "\f0d8";
}
.dataTables_wrapper .sorting_desc div:after {
	content: "\f0d7";
}
.dataTables_wrapper .sorting:hover,
.dataTables_wrapper .sorting_asc,
.dataTables_wrapper .sorting_desc {
	background-color: #839A99;
}

PS
Many thanks for Your plugin
Your super quality work inspires

To me, You are a role model – a Great Masetr
Regards, from Russia

http://ww.wp.xz.cn/extend/plugins/tablepress/

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 2 months ago

Hi,

thanks for your post.

After removing the ***, I can access your site, is that right?
Can you explain again what you want to change about the sort arrows? I don’t really understand…

Regards,
Tobias

Thread Starter idart
(@idart)

13 years, 2 months ago

*** yes that’s right
please see
http://sch***1275.ru/should-be-so.png

that you have to change in style?

http://sch***1275.ru/profs/ working on plugin “wp-table-reloaded”
I’m trying to do the same for plugin “tablepress”

Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 2 months ago

Hi,

ah, ok. Now I understand. Unfortunately, I’m not sure if this is easily possible, but I will look into it.

And I’m still unsure why you want to do this, though… Can you maybe explain your reasoning? Why don’t you use the default position of the sorting arrows?

Regards,
Tobias

Thread Starter idart
(@idart)

13 years, 2 months ago

default position of the sorting arrows

default position of the sorting arrows
make wider the column, in the case where the width should be on the content
http://sch***1275.ru/column-minimal.png

when sorting arrows located on the text, it does not affect the width of the column and in this case we adjust the column width only header text (number of characters in the text)

I find this position of the sorting arrows more universal
Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 2 months ago
Hi,

ok, I understand now.

For TablePress, you can achieve this with this “Custom CSS”:
```
.dataTables_wrapper .sorting div:before,
.dataTables_wrapper .sorting div:after,
.dataTables_wrapper .sorting_asc div:before,
.dataTables_wrapper .sorting_asc div:after,
.dataTables_wrapper .sorting_desc div:before,
.dataTables_wrapper .sorting_desc div:after {
	top: -8px;
	bottom: auto;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
}
.dataTables_wrapper .sorting,
.dataTables_wrapper .sorting_asc,
.dataTables_wrapper .sorting_desc {
	padding-right: 8px;
}
.dataTables_wrapper .sorting div:after {
	content: "\f0d8";
	padding: 0 0 1px;
}
```
Just paste that into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Additionally, I suggest to invert the sorting order, so please also add
```
"aoColumnDefs": [ { "asSorting": [ "desc", "asc" ], "aTargets": [ "_all" ] } ]
```
to the “Custom Commands” text field in the “Features of the DataTables JavaScript library” section on the “Edit” screen of the table.

Regards,
Tobias
Thread Starter idart
(@idart)

13 years, 2 months ago
Tobias sorry for the late reply
Thanks for your code, but I expect a bit different result
please see
http://sch***1275.ru/indent.png

In plugin “wp-table-reloaded” this was achieved as follows:
```
. wp-table-reloaded. sorting {
background: # A8B9B8 url (.. / img / bg.gif) no-repeat 50% 5%;
cursor: pointer;
}
. wp-table-reloaded. sorting_asc {
background: # 6784A2 url (.. / img / asc.gif) no-repeat 50% 5%;
}

. wp-table-reloaded. sorting_desc {
background: # 6784A2 url (.. / img / desc.gif) no-repeat 50% 5%;
}
```
Plugin Author Tobias Bäthge
(@tobiasbg)

13 years, 2 months ago

Hi,

hhm, ok, not sure why this happens. To find out what’s going on, I’d need to take a direct look at this page with the table, to be able to inspect it with some debugging tools.
Could you therefore please post a link to the page with the table? Thanks!

Also: Do you want to keep the “old” WP-Table Reloaded styling (colors, borders, …) or to do you want the fresher TablePress styling?

Regards,
Tobias

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘position style sorting triangles’ is closed to new replies.