i am trying to change the distance between the pager numbers appearing in my GridView. i am using a css file in order to control the style of the grid.
.gridViewPager td a
{
color: white;
text-decoration: none;
text-align:justify right;
}
.gridViewPager td a:hover
{
color: white;
text-decoration: underline;
text-align:justify right;
}
.gridViewPager span
{
text-autospace:none;
color: black;
text-align:justify right;
}
Add the following to .gridViewPager td a:
display: block;
padding: 2px 5px;
That will give you 2px on top and bottom, and 5px on either side of the a element.
Just call CssClass="gridViewPager " inside the Grid. The class definition is as follows,
.gridViewPager tr.paging td {
background-color: #FFFFFF;
border-bottom: 0;
color: #000000;
font-size:13px;
padding:0 4px 0 0;
}
.gridViewPager tr.paging {
background-color: #FFFFFF;
border: 0;
color: #000000;
font-size: 12px;
padding:0;
}
.gridViewPager tr.paging td span {
color:#993366;
text-decoration:underline;
font-size:13px;
}
.gridViewPager tr.paging td a {
color:#000000;
text-decoration:none;
}
.gridViewPager tr.paging td a:hover {
color:#993366;
text-decoration:underline;
}
Check the result first and then adjust the padding and other styles as you like.
Hope this helps..
This is a problem when you use table and there is no fixed width set on the table columns.
So your columns will occupy all available space.
May be you can set a max-width on the td and the table and set padding:0 7px; on td as well.
This would limit the space available to the cells.
thanks to everyone
the problem was that each number was on a separate cell in a table which is located in the gridview pager footer, so by changing the column size I was able to get them closer together.
.gridViewPager td
{
padding: 1px;
width:5%;
}
Related
Hey guys,
I am using bootstrap 3 ,i have created a table which is of responsive type .The table is divided into 4 columns and each column is separated by white space.But as per my requirement i dont need the white space after first columns as shown in image with red arrow .
To the table class i have used properties border-collapse: separate and border-spacing: 10px 0;
border spacing here is responsible for column seperation.Please help how to do remove this single white space of the table made by border spacing ... please Find js fiddle link in below comments
You could , fill that white space with a border (giving the relative position and some other extra CSS) :
for instance :
.buynow-product-comparisions table, .table-product-comparision table {
}
.buynow-product-comparisions th, .table-product-comparision th, .buynow-product-comparisions td, .table-product-comparision td {
background-color: #c9e8fa;
text-align: center;
color: #666;
}
.table-product-comparision th.personal-head, .table-product-comparision th.cloudworkgroup-head, .table-product-comparision th.enterprise-head {
background: #ffffff;
color: #ffffff;
}
.buynow-product-comparisions td.bg-white {
background: #ffffff;
padding: 5px 0px;
}
.buynow-product-comparisions td.plan-feature-text, .table-product-comparision td.plan-feature-text {
background-color:#c9e8fa;
color: #666;
text-align: left;
}
.table-product-comparision th.attribute-title {
background-color: #FFF;
text-align: right;
width: 30%;
}
.cloud-personal {
background: none repeat scroll 0 0 #4d4d4d;
padding: 12px 0;
}
.table-product-comparision td.vtypes {
color: #26a2ed;
font-weight: bold;
}
.table-product-comparision td {
background: none repeat scroll 0 0 #dedede;
color: #666;
text-align: center;
}
.table-product-comparision td.plan-feature-text {
background: #ffffff;
}
.table-responsive.buynow-page, .table-responsive.buynow-page {
padding: 0;
}
td + td {
border-right:10px solid white;
border-bottom:1px solid #ccc
}
http://jsfiddle.net/84LXL/4/ (some css removed and mostly added on last lines )
I'm using DOMPDF to build out a download report of database entries for a shopping cart.
Not sure what code to put in here, it's a very typical html page with some foreach loops to display the content, and it creates the pdf just fine, but none of the css from the file is rendered as css, it gets printed as text at the top of the document.
The CSS is inline in the head of the document as any normal inline css would be.
$export_pdf ="<html><head>";
$export_pdf .="<meta http-equiv='Content-Type'
content='text/html; charset=utf-8' />";
$export_pdf .="<style type='text/css'>
.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.list td { border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; }
.list thead td { background-color: #E5E5E5; padding: 3px; font-weight: bold; }
.list tbody a { text-decoration: none; }
.list tbody td { vertical-align: middle; padding: 3px; }
.list .left { text-align: left; padding: 7px; }
.list .right { text-align: right; padding: 7px; }
table .interior,
table .interior td { border: none !important; }
table .interior tr { border-bottom: #DDD 1px solid !important; }
.list tbody .interior thead td { background: #efefef !important; }
</style>";
Then just a basic table etc.
I can't find anyone else having this issue with inline css. I've seen some posts where people have troubles getting linked styles to work, but this is simple inline css, why is it being interpreted as text instead of css?
Thanks.
-Vince
As weird as it appears, it is due to the simple quotes in the <meta> tag.
Replace them by escaped double quotes and it will work. Could you report this issue in the issue tracker please ?
I have a problem some of my links keep moving a couple of pixel on hover does anyone know a fix for this.
Currently me code is like this
<a class="read-more-link" href="/what-to-do-now/week49/flowers-checklist/">See all Flowers jobs</a>
the css
a:hover{
border-bottom:1px solid #000;
}
a{
color: #172D02;
font-weight: bold;
text-decoration: none;
}
.checklist .read-more-link:first-letter {
text-transform: uppercase;
}
.checklist .read-more-link {
clear: both;
display: block;
float: left;
line-height: 1.1;
text-transform: lowercase;
background: url("/images/double_arrow.png") no-repeat scroll left center transparent;
padding-left: 14px;
}
This is because you have border-bottom set on hover.
Therefore this is adding a 1px border underneath your link when it is hovered over. This can affect the position of other relative elements.
Change this to text-decoration:underline; or add a hidden border-bottom to the standard style:
a {
border-bottom:solid 1px transparent;
}
write
a:hover{
text-decoration:underline;
}
in place of
a:hover{
border-bottom:1px solid #000;
}
and remove this there is no need of it
.checklist a, .checklist a:visited {
border-bottom: 0 none;
position: relative;
}
You can add one empty container like below, on top:
<div class="container" style="height:5px"></div>
I have a table which has rows that alternate colors, when I hover over rows they are highlighted yellow.
I would like some of the rows to be highlighted all the time too(not just onhover). I have discovered however that most of the rows that are to be highlighted are right next to each other and it gives the effect that that part of the table is just yellow and it doesn't look that good.
I want to know if it is possible to create a small strip of highlighting through the middle of the row while the outsides remain their natural color.
This is what I have:
.resultTable tbody tr:nth-child(2n+1){
background-color:white;
}
.resultTable tbody tr:nth-child(2n){
background-color:#E6EBEC;
}
.resultTable tbody tr:nth-child(n):hover{
background-color: yellow;
}
.highlightedRow{
background-color:#F2F18D !important;
}
This is what I want:
UPDATE:
I cant seem to get the border method to work.
This is the closest I get but there is space between the borders.
.resultTable{
text-align:center;
width: 100%;
padding: 0px;
margin: 0px;
}
.resultTable thead{
background-color: #000099;
color: white;
font-size:22px;
font-weight:bold;
}
.resultTable caption{
background-color: #000099;
color: white;
font-size:22px;
font-weight:bold;
}
.resultTable tbody tr:nth-child(2n+1){
background-color:white;
border-top:2px solid green;
border-bottom:2px solid green;
}
.resultTable tbody tr:nth-child(2n){
background-color:#E6EBEC;
border-top:2px solid red;
border-bottom:2px solid red;
}
.resultTable td{
border:inherit;
}
.resultTable tbody tr:nth-child(n):hover{
background-color: yellow !important;
}
.highlightedRow{
background-color:#F2F18D !important;
}
Gives me:
By the way: i made them red and green on purpose to easily spot the problem.
Set the border-width: 3px; or something and then set border-color: #FFF; that will do what you want.
In other words, you can't set part of a row to a color, unless you use an image for the background. But you can color the borders.
Why not add a border to your highlighted row ?
.resultTable tbody tr:nth-child(n):hover{
background-color: yellow;
border-top: solid 1px #333;
border-bottom: solid 1px #333;
}
Does anyone have any pointers how to to fix the styling issue presented when using jquery ui's datepicker along side blueprint css framework? Specifically the table with the dates appears larger (wider) than the container it sits in.
I tried the other answers, but they didn't do it for me. After playing around with the problem for a few hours I came up with a solution that works for me (Blueprint 1.0, Jquery UI 1.8.5, tested with Smoothness, Redmond and Dark Hive themes in Chrome and IE):
/* remove blue backgrounds - separate for TH to work in IE */
.ui-datepicker-calendar tbody tr:nth-child(even) td,
.ui-datepicker-calendar tbody tr.even td {
background-color:inherit;
}
.ui-datepicker-calendar thead th {
background-color:inherit;
}
/* set correct line height */
.ui-datepicker-calendar tbody tr td {
line-height: 1.1;
}
/* (optional) make same size as example */
.ui-datepicker { font-size: 0.9em; }
Added the following CSS to solve the problem:
.ui-datepicker-calendar table{
margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
padding: 0; text-align: center; }
Thanks for the help.
I found I had to make a couple more alterations before it looked closer to the default styling:
/*JQUERY-UI + BLUEPRINT CSS CALENDAR FIX*/
.ui-datepicker-calendar table{
margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
padding: 0; text-align: center; background:white; color:#333; }
.ui-datepicker-calendar th{
padding: 5px 0; }
.ui-datepicker-calendar td{
padding:0 2px 2px 0; }
.ui-datepicker-calendar td a{
padding:0 1px 0 0; }
.ui-datepicker {
font-size:0.8em; }
oneBelizean was on the right track, but it wouldn't work for me until I qualified the th and td selectors with table:
.ui-datepicker-calendar table{
margin: 0; }
.ui-datepicker-calendar table th , .ui-datepicker-calendar table td {
padding: 0; text-align: center; }
After doing this, I didn't need any of the extra stuff Simon added.
I found I had to access the elements very specifically and remove some padding.
/* JQUERY-UI + BLUEPRINT CSS CALENDAR FIX */
.ui-datepicker table{
margin: 0; }
.ui-datepicker-calendar thead tr th , .ui-datepicker tbody tr td {
background:white; color:#333; }
.ui-datepicker-calendar thead tr th{
padding: 5px 0; }
.ui-datepicker-calendar tbody td{
padding:0 2px 2px 0; }
.ui-datepicker-calendar tbody td a{
padding:0 1px 0 0; }
.ui-datepicker-calendar {
font-size:0.8em; }