CSS fix for webgrid pager method using Razor and MVC3

Question

I use MVC3 with Razor, I use WebGrid to display the grid, and I use the following code to swap for this grid.

My problem: The paging buttons should be the same size both when they are selected / pressed, and when they are absent / pressed.

I have some problems with CSS, I used CSS and javascript to achieve the design my client wanted, I reproduced it on this fiddle link http://fiddle.jshell.net/Z5L4g/

Razor code

@grid.Pager(mode: WebGridPagerModes.All, numericLinksCount: 15, firstText: "<<", lastText: ">>", previousText: "<", nextText: ">") 

My CSS is body {font-family: Calibri; background color: # D8D8D8; margin-top: 0px; text-finish: no; }

  #footer:not([href]) { letter-spacing: 0px; } #footer { text-align: center; margin-top: 10px; } .pagingCss { font-size: 13px; } .whiteBox { background-color: white; color: black; padding-right: 7px; padding-left: 7px; padding-top: 4px; padding-bottom: 4px; text-decoration: none; margin-top: 10px; letter-spacing: 0px; } .blackBox { background-color: black; color: white; padding-right: 7px; padding-left: 7px; padding-top: 4px; padding-bottom: 4px; text-decoration: none; margin-top: 10px; letter-spacing: 0px; } .pagingCss a { font-size: 13px; color: white; text-decoration:none; } 

Javascript Code I used

  var keywords = ['>>', '<<', '<', '>']; function linklabels() { var footerDiv = document.getElementById('footer'); var oldLinks = footerDiv.getElementsByTagName('A'); var oldLinksCount = oldLinks.length; var keywordsCount = keywords.length; for (var i = 0; i < oldLinks.length; i++) { if (oldLinks[i].firstChild.nodeValue == '>>' || oldLinks[i].firstChild.nodeValue == '<<' || oldLinks[i].firstChild.nodeValue == '>' || oldLinks[i].firstChild.nodeValue == '<') { var my_div = null; var newDiv = null; var newDiv = document.createElement("span"); var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue); newDiv.appendChild(newContent); newDiv.className = "whiteBox"; oldLinks[i].firstChild.nodeValue = ""; oldLinks[i].appendChild(newDiv); } else { var my_div = null; var newDiv = null; var newDiv = document.createElement("span"); var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue); newDiv.appendChild(newContent); newDiv.className = "blackBox"; oldLinks[i].firstChild.nodeValue = ""; oldLinks[i].appendChild(newDiv); } } // end of for // footer } window.onload = linklabels; 

This is how my HTML displays after using the above code

and the code is displayed as html below

 <div id="footer" class="pagingCss"> <a href="/CompanySearch/Home/Results?page=1"> <span class="whiteBox">&lt;&lt;</span> </a> <a href="/CompanySearch/Home/Results?page=5"> <span class="whiteBox">&lt;</span> </a> <a href="/CompanySearch/Home/Results?page=1"> <span class="blackBox">1</span> </a> <a href="/CompanySearch/Home/Results?page=2"> <span class="blackBox">2</span> </a> <a href="/CompanySearch/Home/Results?page=3"> <span class="blackBox">3</span> </a> <a href="/CompanySearch/Home/Results?page=4"> <span class="blackBox">4</span> </a> <a href="/CompanySearch/Home/Results?page=5"> <span class="blackBox">5</span> </a> 6 <a href="/CompanySearch/Home/Results?page=7"> <span class="blackBox">7</span> </a> <a href="/CompanySearch/Home/Results?page=8"> <span class="blackBox">8</span> </a> <a href="/CompanySearch/Home/Results?page=9"> <span class="blackBox">9</span> </a> <a href="/CompanySearch/Home/Results?page=10"> <span class="blackBox">10</span> </a> <a href="/CompanySearch/Home/Results?page=7"> <span class="whiteBox">&gt;</span> </a> <a href="/CompanySearch/Home/Results?page=10"> <span class="whiteBox">&gt;&gt;</span> </a> </div>​ 

I know that it should be really easy in some way or trick to do this, which I just can't find ... please help me with this.

Answer 1

As I said in the comments,

Do not try to heal the symptoms. In your case, CSS correction will not do the trick, because there is no selector for text nodes .

a quick jQuery fix might do the trick though:

 $(function() { $("#footer").contents().filter(function() { var $this = $(this); return $this.children().length == 0 && $.trim($this.text()).length > 0; }).wrap("<span class='selectedBox' />"); }); 

This will wrap your single text element with a space with the selectedBox class for which you need to add some css. Here you can see it in action.

UPDATE here is the complete solution. It also replaces your javascript link code:

 function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } $(function() { $("#footer a").contents().wrap("<span class='blackBox' />"); $("#footer").find("a span").each(function(){ var val = $.trim($(this).text()); if (!isNumber(val)) $(this).attr('class', 'whiteBox'); }); $("#footer").contents().filter(function() { var $this = $(this); return $this.children().length == 0 && $.trim($this.text()).length > 0; }).wrap("<span class='whiteBox' />"); }); 

Answer 2

The selected number is displayed without a wrapping element, so it is displayed in a line.

Try wrapping it in a span tag like this: http://jsfiddle.net/Z5L4g/2/

I wrapped the selected number in the range with the selected class, which shares the same rules as the blackbox class, except for the presence of a transparent background and black text.

I would not say that this is a CSS problem, but a markup problem. The selected page indicator has no width and height and cannot be formatted as text.

Suggestion: either change the markup, or split innerHTML #footer into javascript and work from there. I would go with the first option.