I am having problem in aligning data tables inside a panel grid. Always data table is getting aligned in the center instead of the top. 'vertical-align:text-top;' CSS class also not working.
ya got the answer .panelColumns td { vertical-align: top; } is working fine. :-)
Related
I am struggling to remove the badge count of how many columns are selected in multisort next to the column names 'Leído' and "Fecha de envío"...
The badge is span with class v-data-table-header__sort-badge.
And if I edit the html via Chrome and add 'display: none' it gets removed... However I am unable to override it via css in the code.
Is there any other way to remove the badge?
Thanks in advance!
P.S. I've found the way by using !important modifier but I don't know if there is a better way to achieve that
.v-data-table-header__sort-badge {
display: none !important;
}
i am doing MVC model validation through data annotation and my validation message is showing just at right side of input but i want to show it at the below of input box like the screen shot.
so just tell me what i need to do without touching html. thanks
You can alter field-validation-error and validation-summary-errors classes in CSS to make them reside on a new line. One way is to make them block elements by using display:block style. Here is a sample CSS:
.field-validation-error {
display: block;
}
I am trying to create a grid app with various sections and each section is being fetched to a specific listview however I have encountered a problem where you can only have one listview covering the entire page in order to properly horizontally scroll the objects inside the list which means there's no room for another one. This is the code I am using right now:
WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100}).then(
function (response) {
var json = JSON.parse(response.responseText.toString());
var list = new WinJS.Binding.List(json.result);
gridView1.winControl.itemDataSource = list.dataSource;
//gridView1 is ID of listview
}
With the above code I can easily show grids of objects containing result array and then bind em to the list. However now I want multiple similar listviews for different URLs that are displayed like the one shown as default interface in WinJS grid app.
To be more clear, this is what I want - Twitter usernames in first section of grid by using Twitter API URL1 and then I want twitter search results in adjacent grid so I have to use another listview b using URL2.
How do I find a fix for this. Appreciate your help.
Yeah, coming up with what all of the disparate items from the different lists have in common and projecting your data up to a single grouped list is one option. You might not want to give up on what you were trying to do though. If you put multiple ListViews on a page wrapped in a flexbox, you shouldn't have any trouble with scrolling. If you look at my codeSHOW app at the ListView demo, you'll see that I have the rough equivalent. Windows is actually really smart about the way it handles the panning.
** EDIT **
Here's a rough example of what I'm talking about. Again, you can find a working example of this in the ListView demo of codeSHOW.
<!-- HTML snippet -->
<div class="hub">
<div>
<div id="list1" data-win-control="WinJS.UI.ListView"></div>
</div>
<div>
<div id="list2" data-win-control="WinJS.UI.ListView"></div>
</div>
<div>
<div id="list3" data-win-control="WinJS.UI.ListView"></div>
</div>
</div>
/* CSS snippet */
.hub {
display:-ms-flexbox; /* this will lay the lists out horizontally */
overflow-x:auto; /* set the flexbox to scroll its overflow */
}
/* select each of the sections */
.hub > div {
padding-right:80px; /* 80px of space between "sections" */
}
/* choose whatever sizes you want for your list views. You may want to make them wide
enough that they don't scroll because it can get a little awkward to have scrolling
within scrolling */
[data-win-control=WinJS.UI.ListView] {
width: 640px;
height: 480px;
}
You can solve this by aggregating the result set into a single data source.
You can either do this through splurging your data into a WinJS.Binding.List that's been set up with a grouping function, and attribute your data in such a way that you know how to group them. An example of the grouping of a WinJS.Binding.List can be found in the "Grid" Template that you find in Visual Studio when doing File/New/Project.
Or, you can build your own data VirtualizedDataSource - there is a great tutorial for this on MSDN here.
So I have a page using GalleryView 1.1 here. I like the behaviors just fine except that the left-most item's onclick event won't fire for some reason.
I also grabbed the 2.1 version from the GoogleCode page; the author's page at http://spaceforaname.com/ has gone. So here is a page implementing 2.1.
Since 2.1 has a bunch of behaviors I hate and seems to completely prevent my onclick events I would like to sort out the issue with the left-most item's onclick in the v1 page.
I have read through the code but failed to find what is interfering.
The function looks like this:
$('.myslides').click(function() {
//alert($(this).attr('alt'));
$('#big_pic').attr("src", $(this).attr('alt'));
return false;
});
and the items like this
<li><img src='g/weddings/slides/1.jpg' width='165' height='110' alt='/g/weddings/slides/1_big.jpg' class='myslides'/></li>
I have tried moving the class attribute to the LI, and also adding an anchor around the image and giving it the class but neither of these had a visible effect.
// Edit
The page validates and yes I know the big pics are blurry. Don't have them from GD so did best I could stretching thumbs.
Does anyone have an idea of how I should pursue debugging this?
So when inspecting the elements in question I found that the working thumbnails were all image elements but the non working first thumbnail was a div with id "pointer".
Since the author's site with the docs has evaporated I can say what function #pointer has in my filmstrip slides but in jquery.galleryview-1.1.js on line 319 I changed its width to 1px in the JS CSS and this resolved the issue of the obstructed onclick. #pointer may have a function I am not employing here. At any rate the issue is resolved.
Width was previously set to
'width':opts.frame_width-pointer_width+'px',
Now set to
pointer.attr('id','pointer').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1000',
'cursor':'pointer',
'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
'height':opts.frame_height-pointer_width+'px',
'1px',
'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
});
Also tried adding display:none but this resulted in jerky animation.
I'm trying to using the jQuery cycle plugin (http://www.malsup.com/jquery/cycle/) to create a banner like the one on this page: http://www.epa.gov/. Specifically, I'd like the navigator buttons to lay on top of the images. The way it is done on epa.gov is the nav div is absolutely positioned on the page, so you have to absolutely position that div on every page you want to use it on. The easier solution would be to relatively position the nav div in the div that holds the images I want to scroll. The problem is I don't see how you can do that.
The code for cycling images is:
$('#banner').after('<div id="nav"></div>').cycle({ fx: 'fade', speed: 1000, timeout: 5000, pager: '#nav', autostop: true, autostopCount: 5 });
the "after" function creates the nav div and the pager option makes that div the navigation for the banner div, which holds the images, but the nav div is created either before or after the banner div. I want the nav div to be created inside the banner div so that I can relatively position it in that div, since it is the one that actually holds the images. Is this possible? Is there a different plugin I should be using for this?
There's actually a very similar example right on Malsup's example page here:
http://jquery.malsup.com/cycle/pager-over.html
Go to 'even more demos', and it's the top one (pager on top of slideshow).
It was hard to find, and the only reason that I know it was there was because I've spent hours there!