I'm trying to place a small icon inside the ValidationSummary div (to the left of the bullet list). The image shows up, but with repeat when I use:
background:url(Images/exclamation.png);
The image does not show at all, when I say:
background:url(Images/exclamation.png) no-repeat 12px 30px;
What am I missing here.
CSS:
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 12px 30px;
border:1px solid #b08b38;
width:99%;
}
.validationsummary ul
{
color:#982b12;
background-color:PeachPuff;
}
.validationsummary ul li
{
padding:2px 0px 0px 15px;
font-size:12px;
}
ASPX:
<table width="100%">
<tr>
<td width="100%">
<asp:ValidationSummary ID="vs" runat="server" CssClass="validationsummary"
DisplayMode="BulletList" />
</td>
</tr>
</table>
<table width="100%" cellspacing="10px">
<tr>
<td width="11%" align="left">
* Surname
</td>
<td width="18%" align="left">
<asp:TextBox ID="txtSurname" runat="server" Width="93%"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtSurname" SetFocusOnError="true" Text="*" ForeColor="Red"
Display="Dynamic" ErrorMessage="Surname Is Required"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
Try
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 0 0;
border:1px solid #b08b38;
width:99%;
}
If it is working, position your background accordingly.
background-image:url('Images/exclamation.png');
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
Also define the height of your background image
.validationsummary
{
background:url(Images/exclamation.png) no-repeat 12px 30px;
border:1px solid #b08b38;
width:99%;
height: 200px; /* change it with your requirement */
}
.validationsummary
{
background-image: url('Images/exclamation.png);
background-repeat: no-repeat;
background-position: left top;
background-size: 16px;
padding-left: 20px; /* Depends on the size of the image - 16px + 4px actual padding to indent the text to the right of the image */
}
Related
I want the color to change when the user hovers on datagridview row. I am only able to get the rows that are gray to change to blue when the user hover on them. However, when I try to get it to work for them with rows the footer also becomes blue when the user hovers on it which is not what I want. How can I fix this? Thank you for your help.
Here is my aspx
<asp:GridView ID="editingGrid" runat="server" AutoGenerateColumns="false" ShowFooter="false" DataKeyNames="componente_id"
ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gridView_PageIndexChanging" OnRowDataBound = "OnRowDataBound" OnSelectedIndexChanged = "OnSelectedIndexChanged"
CellPadding="3" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
<PagerSettings Mode="Numeric" />
<Columns>
<asp:TemplateField HeaderText="Familia">
<ItemTemplate>
<asp:Label Text='<%# Eval("familia") %>' runat="server" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtfamilie" Text='<%# Eval("familia") %>' runat="server" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Here is my CSS and HTML:
:root {
--main-color: #1b9bff;
}
.mGrid {
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
.mGrid td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #000;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background: #424242 url(/images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.mGrid th:hover {
color: #1b9bff;
}
.mGrid .alt {
background: #c4c9d2 url(/images/rd_alt.png) repeat-x top;
}
.mGrid .alt:hover {
background-color: #1b9bff;
}
.mGrid .pgr {
background: #424242 url(/images/grd_pgr.png) repeat-x top;
}
.mGrid .pgr table {
margin: 5px 0;
}
.mGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a {
color: #666;
text-decoration: none;
}
.mGrid .pgr a:hover {
color: #000;
text-decoration: none;
}
<table class="mGrid" cellspacing="0" cellpadding="3" id="PageContent_editingGrid" style="border-collapse:collapse;">
<tr>
<th scope="col">Familia</th>
<th scope="col">Marca</th>
<th scope="col">Tipo</th>
<th scope="col">Designacion</th>
<th scope="col">Referencia</th>
</tr>
<tr title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack('ctl00$PageContent$editingGrid','Select$0')">
<td>
<span>circuito integrado</span>
</td>
<td>
<span id="PageContent_editingGrid_myText_0">Kemet</span>
</td>
<td>
<span>electronics</span>
</td>
<td>
<span>capteur</span>
</td>
<td>
<span>calle mayor</span>
</td>
</tr>
<tr class="alt" title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack('ctl00$PageContent$editingGrid','Select$0')">
<td>
<span>circuito integrado</span>
</td>
<td>
<span id="PageContent_editingGrid_myText_0">Kemet</span>
</td>
<td>
<span>electronics</span>
</td>
<td>
<span>capteur</span>
</td>
<td>
<span>calle mayor</span>
</td>
</tr>
<tr class="pgr">
<td colspan="5">
<table>
<tr>
<td><span>1</span></td>
<td>2</td>
</tr>
</table>
</td>
</tr>
</table>
If you want all rows of data (not header row or footer pager row) to turn blue on hover you can add this style to your stylesheet:
.mGrid > tbody > tr:not(.pgr):hover {
background-color: #1b9bff;
}
The .mGrid tbody > tr part will select all rows in the body of the table (so the header column in the <thead> will not be affected), the :not(.pgr) part will exclude the footer/pager row, and the :hover will only style it on hover.
:root {
--main-color: #1b9bff;
}
.mGrid {
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
.mGrid td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #000;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background: #424242 url(/images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.mGrid th:hover {
color: #1b9bff;
}
.mGrid .alt {
background: #c4c9d2 url(/images/rd_alt.png) repeat-x top;
}
.mGrid > tbody > tr:not(.pgr):hover {
background-color: #1b9bff;
}
.mGrid .pgr {
background: #424242 url(/images/grd_pgr.png) repeat-x top;
}
.mGrid .pgr table {
margin: 5px 0;
}
.mGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a {
color: #666;
text-decoration: none;
}
.mGrid .pgr a:hover {
color: #000;
text-decoration: none;
}
<table class="mGrid" cellspacing="0" cellpadding="3" id="PageContent_editingGrid" style="border-collapse:collapse;">
<tr>
<th scope="col">Familia</th>
<th scope="col">Marca</th>
<th scope="col">Tipo</th>
<th scope="col">Designacion</th>
<th scope="col">Referencia</th>
</tr>
<tr title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack('ctl00$PageContent$editingGrid','Select$0')">
<td>
<span>circuito integrado</span>
</td>
<td>
<span id="PageContent_editingGrid_myText_0">Kemet</span>
</td>
<td>
<span>electronics</span>
</td>
<td>
<span>capteur</span>
</td>
<td>
<span>calle mayor</span>
</td>
</tr>
<tr class="alt" title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack('ctl00$PageContent$editingGrid','Select$0')">
<td>
<span>circuito integrado</span>
</td>
<td>
<span id="PageContent_editingGrid_myText_0">Kemet</span>
</td>
<td>
<span>electronics</span>
</td>
<td>
<span>capteur</span>
</td>
<td>
<span>calle mayor</span>
</td>
</tr>
<tr class="pgr">
<td colspan="5">
<table>
<tr>
<td><span>1</span></td>
<td>2</td>
</tr>
</table>
</td>
</tr>
</table>
Right now you are only changing the font color of the individual cell in the header, because you are applying the hover style to:
.mGrid th:hover{...}
if you want the same style to be applied to cells in each row you just need to add td:hover in to the mix:
.mGrid th:hover, .mGrid td:hover {...}
Note: you need to separate them by comma and apply the full css style selector for the td. But this will only apply to the cell of each row, not to the entire row. So only the cell will be affected.
To get the entire row involved you need to add another selector. In this example I am changing the background color:
.mGrid tr:hover {
background-color: #eeeeee;
}
If I try to add font color changes it won't work, even if I add the !important flag - still only the background color changes.
.mGrid tr:hover {
color: #1b9bff !important;
background-color: #eeeeee;
}
This is because the tr has a background color property, but no foreground (font) color.
So what you need to do is to make sure that you apply the style to the nested child elements like when you hover over the row, like this...
.mGrid tr:hover td {
color: #1b9bff;
background-color: #eeeeee;
}
Voila... your row background and font colors should now change on hover. (and you don't even need the !important flag)
i have text box and i want it when i start typing the autocomplete will show the suggestion. this is my html code
<tr>
<td valign="top" align="right">
<asp:Label ID="labelPayableAccount" runat="server" CssClass="ItemTitle" Text="Payable Account"></asp:Label>
</td>
<td valign="top" align="center" class="style2">
<asp:Label ID="labelPayableAccountColon" runat="server" CssClass="ItemTitle" Text=":"></asp:Label>
</td>
<td valign="top" align="left">
<asp:TextBox ID="txtPayableAccount" runat="server" Width="400px" CssClass="textBoxString"></asp:TextBox>
<div id="divwidth1">
</div>
<ajaxToolkit:AutoCompleteExtender ID="autoComplete1" runat="server" EnableCaching="true"
BehaviorID="AutoCompleteEx" MinimumPrefixLength="1" TargetControlID="txtPayableAccount"
CompletionListElementID="divwidth1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight" ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionListPayableAccount" CompletionSetCount="20" CompletionInterval="1"
DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="false">
</ajaxToolkit:AutoCompleteExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidatortxtPayableAccount" runat="server"
ErrorMessage="Required !" ControlToValidate="txtSupplierType">
</asp:RequiredFieldValidator>
</td>
</tr>
and this is the css code for the autocomplete layout
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
border: solid 1px #006699;
line-height: 20px;
padding: 10px;
background-color: White;
margin-left: 10px;
max-height:180px;
}
.AutoExtenderList
{
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
#divwidth1
{
width: auto !important;
height:180px !important;
}
#divwidth1 div
{
width: auto !important;
}
i have design the layout so that the height of autocomplete frame is 180px, but the list wouldn't do the same, here is the snapshot
can anybody help me?
Perhaps try adding the overflow css property?
#divwidth1
{
width: auto !important;
height:180px !important;
**overflow: hidden;**
}
I currently have two divs that are within another div, one is a table with a list of items that is updated by using a textbox that is positioned next to it, I am trying to position the textbox in the bottom right corner, I have tried floating/positioning and it doesn't seem to have any real effect on it, the first image is how it currently is, the second image is how I would like it to be.
ASP.NET code:
<asp:Content ID="Content1" ContentPlaceHolderID="PrimaryContentPlaceHolder" runat="Server">
<%--<div style="margin-bottom: 20px; width: 300px;">--%>
<table class="Grid" style="width:300px;float:left; margin-right:10px;" >
<tr>
<th>
Banned Domains
</th>
<td runat="server" id="bannedDomains">
</td>
</tr>
</table>
<%-- </div>--%>
<div style="position:relative; bottom:0px;">
<asp:TextBox ID="bannedDomainText" runat="server" Rows="5" TextMode="SingleLine"
Width="150px" Height="19px" />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" style="padding: 2px 5px 2px 5px;" PostBackUrl="~/admin/bespoke/Green-FreeShipping.aspx"
Text="Add to List" />
</div>
</asp:Content>
css:
#Content table
{
border-collapse: collapse;
}
#Content table.Grid
{
width: 100%;
clear: both;
margin: 12px 0 12px 0;
}
#Content table.Grid th, #Content table.Grid td
{
background-color: White;
border-top: 1px solid #cccccc;
padding: 2px 6px 2px 6px;
}
#Content table.Grid th
{
background-color: #f5f5f5;
}
#Content table tr:hover td
{
background: #f9f9f9;
}
Here you go, use it like this
Demo
CSS
.Grid {
border: 1px solid #ff0000;
height: 400px;
width:300px;
position: relative;
}
div.wrapper {
position: relative;
display: inline-block;
}
textarea {
position: absolute;
bottom: 0;
right: -200px;
}
HTML
<div class="wrapper">
<table class="Grid">
<tr>
<th>
Banned Domains
</th>
<td runat="server" id="bannedDomains"></td>
</tr>
</table>
<textarea></textarea>
</div>
here's one way to do it: http://jsfiddle.net/5DjM9/
<div class="div1">LEFT</div>
<div class="div2"><div>RIGHT</div></div>
.div1 {
width:200px;
height:200px;
background:#ccc;
float:left;
margin-right:10px;
}
.div2 {
width:200px;
height:200px;
background:#ccc;
float:left;
position:relative;
}
.div2 div {
width:200px;
position:absolute;
bottom:0;
background:red;
}
demo : http://jsfiddle.net/nobuts/WzUjr/
<div class="big_box">
<div class="cols"><div id="table">div/table</div></div>
<div class="cols"><div id="textbox">div/textbox</div></div>
<br style="clear:both">
</div>
.big_box{
background:red;
color:#000;
height:250px;
padding:5px;
}
.cols{
height:240px;
float:left;
margin:5px;
position:relative;
}
#table{
background:#ff9900;
height:100%;
width:250px;
}
#textbox{
background:#ff9900;
bottom:0px;
height:30px;
top:auto;
position:absolute;
width:100px;
}
the problem is that the float:left on the <table> element is "stuck" the solution is:
add a <div style="clear:both;"></div> right after the <table> ( it can be empty ).
remove float from table and play with position.
hope it helped :-)
I have asp.net Button, table and Button as below:
<table style="width: 600px;">
<tr>
<td>
<div style="float: right;">
<asp:Button ID="_btn01" runat="server" Text="GO" />
<table class="IHCommandButtonContainer" cellpadding="0" cellspacing="0">
<tr>
<td class="IHCommandButtonL"><asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/Test/Images/btn_Search.gif" /></td>
<td class="IHCommandButtonM"><span>Search</span></td>
<td class="IHCommandButtonR"><img src="/Test/Images/btn_R.gif" /></td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="GO" />
</div>
</td>
</tr>
</table>
The problem is that I cannot put them in the same line.
They look like as below:
My css is below:
<style type="text/css">
.IHCommandButtonContainer { height: 21px; border: 0px; display: inline-block; cursor: pointer; margin: 0px; padding: 0px; border-spacing: 0px; border-collapse: collapse; }
.IHCommandButtonL { width: 22px; height: 21px; }
.IHCommandButtonL input { width: 22px; height: 21px; }
.IHCommandButtonM { background-image: url(/Test/Images/btn_M.gif); height: 21px; font-size: 9pt; font-family: Sans-serif, Arial, Dotum; }
.IHCommandButtonM span { margin: 0px 2px 0px 0px; }
.IHCommandButtonM_ { background-image: url(/Test/Images/btn_M_.gif); height: 21px; font-size: 9pt; font-family: Sans-serif, Arial, Dotum; }
.IHCommandButtonM_ span { margin: 0px 2px 0px 0px; }
.IHCommandButtonR { width: 3px; height: 21px; }
.IHCommandButtonR img { width: 3px; height: 21px; cursor: pointer; }
</style>
How can I put them in the same line?
Like 2 GO buttons are in the same line, but the table in the middle is upper than them.
User "vertical-align" attribute in your css. Set the value to "middle".
Cheers
Vertical align is the right answer, although I'm against to use the 'Developer Tools'...
The trick is to understand what you are doing...
this would help you: http://phrogz.net/css/vertical-align/index.html
take notice that putting the buttons in "display: inline-block" will help you to fix this problem easy!
I have a product template that looks like this:
The html for it is:
<div id="product">
<div id="cont">
<div class="productPictures">
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
</div>
<div class="productNumber"> #123 </div>
<div class="productDesc">
<table>
<col id="col1" />
<col id="col2" />
<tbody>
<tr>
<td> Body Type: </td>
<td> Stratocaster </td>
</tr>
<tr>
<td> Body Wood Type: </td>
<td> Walnut </td>
</tr>
<tr>
<td> Weight: </td>
<td> 12.7 lbs </td>
</tr>
<tr>
<td> Thickness: </td>
<td> 1 inch </td>
</tr>
<tr>
<td> Routing: </td>
<td> Standard </td>
</tr>
</tbody>
</table>
<div class="productPrice">
$456.00
</div>
</div>
</div>
</div>
</div>
</div>
and the css:
#product {
background-position: left top;
border: 2px solid #2D0000;
background-color: #42533E;
width: 650px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px
}
.productNumber {
padding: 4px;
font-size: 35px;
color: #C9E0D0;
float: right;
text-shadow: 2px 2px 3px #252525;
}
.productPictures
{
float: left;
padding: 0px;
margin: 5px 0px 10px 0px;
width: 200px;
}
.productDesc{
padding: 5px 10px 5px 5px;
color: #FFFFFF;
font-size: large;
float: left;
width: 400px;
height: 100%;
}
.productPrice {
font-size: 25px;
color: #F4D582;
text-align: right;
font-weight: bold;
text-shadow: 2px 2px 3px #252525;
}
.productImage {
border: 2px solid #20281E;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
#col1{
width: 40%;
}
#col2{
width: 60%;
}
table{
width: 100%;
}
So what I would want is for the product description div to end up at the bottom so that the price would also end up at the bottom. I tried to set height to 100% but this did not have any effect.
Thanks
And here is a working example.
relevant code:
#product {
...
position:relative;
}
.productDesc{
...
position:absolute;
bottom:0px;
right:0px;
}
First of all you need to set float:left on the div with the id of cont.
You have elements inside that container floating left, but that container is not, therefore its height is not expanding to its content.
Then you can set the productDesc div to be position:absolute and bottom:0px.
Of course, this will mess with its relative positioning to the photos, which it currently has, but if you want it fixed to the bottom of the parent container, that's the only way. You can then set the right:100px or however much it needs to be horizontally positioned how you would like.
Edit:
Here's a working example: http://jsfiddle.net/citizenconn/hXSmK/
Clear floats for your .productDesc and .productPictures
Use display:inline-block for those 2 DIVs.
And reduce the width of your .productDesc. Say, make it 350px
This will work.