How to Style Template field in Grid View (aspx page and CSS attached)
Tags: asp.net,css,gridview,styles
Problem :
i am trying to style my second column "mentor name" as i used css it give style to whole Grid i also tried "control styl css class = (some other css file)" and "item styl horizontal align=right" and also change property align = right by using # in css file but template field do not allow "id" to implement css my .aspx page and css ar below,
.mGrid {
width: 100%;
background-color: #fff;
margin: 0px 0 0px 0;
border: 0px #525252;
}
.mGrid table
{
border:0px;
}
.mGrid td {
padding: 2px;
border-width: 0px ;
background-color:#3A3F3E;
color: #fff;
text-align:left;
}
td#Mname {
text-align:left;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background-color:#3A3F3E;
border-width: 0px ;
font-size: 0.9em;
text-align:center;
}
<asp:GridView Width="300px" ID="GridView1" runat="server" AutoGenerateColumns="False"
Font-Size="10pt" OnRowCreated="GridView1_RowCreated" CssClass="mGrid">
<Columns>
<asp:BoundField DataField="mentor_id" HeaderText="Image" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/small_image.png" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mentor Name">
<ItemTemplate>
<asp:Label ID="Label1" Text='<%#Eval("mentor_FirstName")+ "</br> " + "<b>Experience: </b>"+Eval("mentor_experience") %> ' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
hopes for your suggestions thanks in advance
Solution :
use td+td
it will be applied to the Second td
of the grid.
.mGrid td+td {
text-align:left !important;
}
.mGrid td+td+td {
text-align:left !important;
}
Here is a good post on this. styling the last td in a table with css
CSS Howto..
Afraid you cannot achieve this as long as you're using the :hover pseudo class. If can live without using the :hover class, here's how you can do it via jQuery:...
transform: translateY(-100%) And make sure you use WebKit, and moz if needed...
They are using pseudo elements: table th.sort-header:hover:after { visibility: visible; } table th.sort-header:after { content: ''; float: right; margin-top: 7px; border-width: 0 4px 4px; border-style: solid; border-color: #404040 transparent; visibility:...
Use Timeout with JS. I set it as 5 sec. Also the working fiddle. It's a good practice to add/remove class for these kind of activities https://jsfiddle.net/ut3q5z1k/ HTML <div class="bottomdiv...
Very simple, you can create a toggleColors function to change the colors each x time. JavaScript: // Globar vars var timer; var miliseconds = 500; /** * Function to toggle...
Change this style: .sa-answer, .sa-score, .sa-review, .sa-report { display: inline; } … to this: .sa-answer, .sa-score, .sa-review, .sa-report { display: inline-block; } You'll also probably want to add text-align: center;...
You can use attribute starts with selector like following. var colors = ["#42ae18", "#eabc00", "#147cc4", "#FF6EB4", "#ed4329", "#8d33aa", "#00b971", "#e9681b", "#a2b3d4", "#0b863c", "#eabc00", "#7027a5", "#c83131", "#00a1de", "#0bc1b6", "#FF6EB4", "#10a0b6", "#FF6EB4",...
Just specify all of the top, left, bottom, and right properties and the box will expand to be at all of those points. .container { position: relative; width: 400px; height:...
If your theme is responsive you most likely have a custom css file if you don't you can use this code, just declare all your responsive class defs in the...
This seems to work for me: r := strings.NewReader("<value>1,2,3</value><value>,1,3,5</value>") doc, err := html.Parse(r) if err != nil { log.Fatal(err) } var f func(*html.Node) f = func(n *html.Node) { if n.Type...
Java 7 with built-in webkit engine! :)
I suggest you look into localStorage
Copy-paste solution from comments: You have to load font at least once in your code before showing it. Event if you use it in css. Just put load line somewhere...
You can change the keyframes to show animation twice. First from 0% to 20% and next from 20% to 40%, then let it stay like that till 100%. Now change...
The syntax for the transform property is invalid. When transforming multiple values, they should be separated with spaces (i.e., no commas). See MDN for the formal syntax. Therefore you need...
Tweaking your CSS will fix it. Your VB code can remain the same. .redColor, .redColor a { color: #FF0000 !important; } ...
You can do it even using pure CSS: * {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}...
Rails Helper options_for_select absolutely allows you to provide styling information for individual options. This is straight from the documentation of options_for_select options_for_select([ "Denmark", ["USA", {:class=>'bold'}], "Sweden" ], ["USA", "Sweden"]) gives...
You can give position absolute for the input : <input type='text' style="z-index:999;position: absolute;top: 50px;left: 67px;"> Fiddle : http://jsfiddle.net/Cv9DM/3/...
You're not seeing any of the stylesheet styles because you haven't attached your test element to the document. After creating your testElement, doing: document.body.appendChild(testElement); Should suffice. Alternatively, if having the...
The first element in HTML will be positioned by the browser , and only after that has occurred with the second element be positioned. This is called the "flow" of...
Basically you have to check a image position with every other image. You can use Array.some for this: Considering that you store the image position in the image object as...
Add a !: gulp.task('styles', function() { gulp.src([ '!css/ignnore.css', 'css/*.css' ]) .pipe(concat('styles.css')) .pipe(autoprefix('last 2 versions')) .pipe(minifyCss()) .pipe(gulp.dest('local/view/style/base/css/dist/')); }); ...
You are using CSS3, which is not supported by all browsers. To do this in a cross-browser compatible way you need to use alternating class, jQuery, or some other method...
To improve my original comment on the question: In order to fix only the URLs that start with a slash (/), something like the following command should be run: (edited...
You could to the left:0 and right:0 trick. .button { display: inline-block; margin-right: auto; margin-left: auto; width: 60px; height: 50px; cursor: pointer; background-color: #00c1e2; border-bottom: 2px solid #00a8c6; z-index: 100;...
Inner border calculations First, you'll need to remove -vendor-background-clip: padding-box or set them to border-box the default in order to achieve the inner border radius. The inner border radius is...
Ok I might be barking up the wrong tree here... To find clicks inside a circle, you could use the mouse postion, and then find the distance from your circle's...
I have got it working using the full url to link to PIE.htc. behavior: url(http://localhost/human_affairs2/PIE.htc); Found the answer here: http://css3pie.com/forum/viewtopic.php?f=4&t=980...
I'm answering my own question here so that it is removed from the Unanswered questions list. It turns out that you can use CSS pseudo-classes pretty seamlessly in UiBinder; for...