i got trouble with my gridview, which overlap on its container,
and here's my code for datagridview :
<asp:GridView ID="gvData" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="PayId" Font-Size="11px" ForeColor="Black" PageSize="20"
Width="100%" BorderColor="Black" CssClass="zebra" AlternatingRowStyle-CssClass="even" >
and when i generate the row , on datagridvie bound, i use :
Protected Sub gvData_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvData.RowDataBound
For i As Integer = 0 To e.Row.Cells.Count - 1
e.Row.Cells(i).Attributes.Add("style", "white-space:nowrap;")
Next
End Sub
for the container i already set em on master page, with css class :
for the wholoe page :
#PublicWrapper.width100 {
width: 92%;
padding-left: 2%;
padding-right: 2%;
float:left;
left: 50%;
position:relative;
margin-left: -48%;
}
for the body :
body.modern{
background-image: url(../Images/);
font-family: Arial;
color: rgb(0, 0, 0);
background-color: #353f5b;
line-height: normal;
font-size: 12px;
background-position: 0% 0%;
background-repeat: repeat;
background-attachment: scroll;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
and for the grid container :
body #PublicWrapper .placeholder_5.sf_cols {
background-color: #a2a2a2;
}
i already add display: inline-block; but the container and the body didn't display on center screen, but my problem is resolved. is there any tricks on css should i use to make the body fit on center screen but the grid didint overlap?
Don't use percentage in your width ,use pixel size
can you change the Width="100%" to Width="1000px"
Related
I use ASP.net 4.5.
I have this asp code:
<asp:RadioButtonList ID="rdHeaders" cssClass="radio-inline" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical">
</asp:RadioButtonList>
And this code behind that creates radio buttons list.
private void CreateRadioButtons(List<string> headers)
{
rdHeaders.Items.Add(Properties.ErrorStrings.DefaultHeader);
rdHeaders.SelectedIndex = 0;
foreach (string header in headers)
rdHeaders.Items.Add(header);
XMLHeaders.Visible = true;
}
And here how it looks on the browser:
As you can see I have overlap radiobuttons on the text.
UPDATE
Here is definition radio-inline class:
.radio-inline{
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: 400;
vertical-align: middle;
cursor: pointer;
}
My question is how can I move left text to prevent overlap?
I have a button :
<div class="HeaderBarThreshold">
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
</div>
I am trying to change the color of the button on mouse hover :
Here is my css :
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
}
.HeaderBarThreshold:hover
{
color: Red;
}
It doesnt work somehow. Please let me know.
Try using the CssClass Property of ASP.NET controls. This will directly point the LinkButton itself to the CSS class, instead of having to use the div tag. For example:
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server" CssClass="HeaderBarThreshold">Threshold</asp:LinkButton>
Here is a fiddle http://jsfiddle.net/zpfw7/
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
width:300px;
height:30px;
border:1px solid #000;
text-align:center;
}
.HeaderBarThreshold:hover
{
color: Red;
background:blue;
}
try this thing:
.HeaderBarThreshold a:hover
{
color: Red;
}
Add the CSS class attribute to your web control
<asp:LinkButton CSSClass="HeaderBarThreshold" ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
Also your CSS is wrong anyway because you don't have anything assigned to class "HeaderBarThreshold".
just try this
.HeaderBarThreshold:hover a
{
color: Red !important; // !important may not be necessary
}
.upda_link {
font-size: 15px !important;
color: white;
font-weight: bolder;
}
.upda_link:hover {
text-decoration: none;
color: white;
}
<asp:LinkButton ID="LinkButton1" runat="server" Text="Update" CssClass="upda_link" CausesValidation="false">
</asp:LinkButton>
I have the following situation:
I've got a header, content, and a footer.
Now the header and footer have a fixed height and are always on the screen.
css for footer and header:
#footer {
background-color:#e6e6e6;
width:100%;
height:46px;
bottom:0;
left:0;
position:fixed;
border-top:1px solid #7F8C8D;
z-index:101;
}
#header {
border-bottom:1px solid black;
height:45px;
background-color:#828282;
color:#FFF;
position:absolute;
top:0;
left:0;
right:0;
z-index:105;
width:100%;
box-sizing:border-box;
}
As for the content i have the following:
#content {
background: #9cbbe3 url(../img/backgr.gif) repeat-x;
right:0;
left:0;
background-size:auto;
position: absolute; top: 0px; bottom: 0px;
overflow: auto;
}
Now this works! at first...
But then i go and maximize and minimize the window, and i end up with two scroll-bars.
When i refresh the page the problem is fixed. and re-sizing works as far as I've noticed. but when maximizing and restoring the window i end up with two scroll-bars.
How can i solve this preferably using CSS?
Maybe this works out for you:
html, body { overflow: hidden; }
Try changing your overflow
overflow: auto;
to:
overflow: hidden;
Hi all i applied selectednodestyle for a treeview which works fine when i am not navigating. But on navigating i am unable to see the applied color for the treeview selected node. Here is my design in master page
<asp:TreeView ID="TreeViewCategories" runat="server" ExpandDepth="0" Style="min-height: 200px;
max-height: 500px;" NodeIndent="0" LeafNodeStyle-CssClass="LeafNodesStyle" CssClass="TreeView"
NodeStyle-CssClass="NodeStyle" ParentNodeStyle-CssClass="ParentNodeStyle" RootNodeStyle-CssClass="RootNodeStyle"
SelectedNodeStyle-CssClass="SelectedNodeStyle" LeafNodeStyle-Width="100%" NodeStyle-Width="100%"
ParentNodeStyle-Width="100%" RootNodeStyle-Width="100%" Font-Size="12pt">
<Nodes>
<asp:TreeNode Text="All Items" NavigateUrl="~/Default3.aspx" SelectAction="SelectExpand"
Value="All Items">
<asp:TreeNode Text="Hello" Value="Hello"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
This is my css
<style type="text/css">
.TreeView
{
border-bottom: 1px dotted #B2B2B2 !important;
}
.TreeView div
{
margin-left: 5px;
}
.TreeView table
{
border-top: 1px dotted #B2B2B2 !important;
}
.TreeView div table
{
border-bottom: none !important;
border-top: none !important;
}
.TreeView table td
{
padding: 2px 0;
}
.LeafNodesStyle
{
}
.RootNodeStyle
{
}
/* ALL ELEMENTS */.NodeStyle
{
}
.ParentNodeStyle
{
/*background:yellow;*/
}
.SelectedNodeStyle
{
font-weight: bold;
color: #6799D1;
display: block;
padding: 2px 0 2px 3px;
}
</style>
But i am unable to apply the color for selected node after navigating to a page can any one help me
your codes are working Ok so is the CSS. if you will notice the text of the one youve selected became bold.
If your basis is in change of color of the text, there is some problem. If you would look at the source code, not only SelectedNodeStyle css style is applied on the item, but these also
NodeStyle FooterContent_TreeViewCategories_2 LeafNodesStyle FooterContent_TreeViewCategories_8 SelectedNodeStyle FooterContent_TreeViewCategories_10
so I suggest putting some !important on your css color for the change in color to take effect.
.SelectedNodeStyle
{
font-weight: bold;
color: #6799D1 !important;
display: block;
padding: 2px 0 2px 3px;
}
When I do the following:
<asp:Label CssClass="someField" runat="server">*</asp:Label>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Or:
<span class="someField">*</span>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Css someField:
span.someField {
color: #CC0000;
font-weight: 600;
}
Css for label:
form label {
clear: left;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
margin: 0 3px 4px 0;
padding: 4px 0 4px 5px;
width: 200px;
}
the output I get is
SomeText*
When what I want is
*SomeText
Anyone know why this is happening?
By setting float:left on the label you are taking it out of the flow of the document and causing it to render before the span. You need to either set the span to be a block layout and float it left as well or remove the float from the label.
UPDATE:
There's a good description of what floating does to elements and some considerations here: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Another option
form label:after {
content: "*";
}