my problem is that I want to use an asp Radiobuttonlist.
And i want to have a line between every single of these dynamically added items.
I already tried everything with borders.
And I tried to put every single item in one cell of a table but i failed.
Please help me out.
EDIT:
Hey thank you very much but one Problem left, i add Items to the radiobuttonlist:
<asp:RadioButtonList CssClass="mylist" RepeatLayout="Table" RepeatDirection="Vertical" RepeatColumns="1" Font-Size="100%" ID="rb_Varianten" OnSelectedIndexChanged="rb_Varianten_changed" AutoPostBack="true" runat="server"></asp:RadioButtonList>
and I add items in my VB Code like that:
rb_Varianten.Items.Add(dv.Table.Rows(i - 1)(int_Name).ToString)
so it is not possible for me like your suggestion.
Thank you
EDIT:
The ASP.NET radio button list gets rendered as a table and each radio button gets its own row. If you want to add a solid or dotted line to the bottom of the table you would do so like this:
(Change dotted to solid if you do not want a dotted line)
tr td
{
border-bottom: 1pt dotted black;
}
Here is a JS Fiddle.(Updated)
If you want the dotted/solid line to span across the table add
width: 100%
Related
<asp:ListBox
ID="ddlPA"
ClientIDMode="Static"
runat="server"
AutoPostBack="true"
SkinID="x"
CssClass="ListBoxCssClass"
SelectionMode="Multiple"
OnSelectedIndexChanged="ddlPA_SelectedIndexChanged">
</asp:ListBox>
When i select an item in asp:listbox , the selected item color changes to gray, i want to change the color to blue.
how can i do the same?
Recently searched for this and never found a reasonable solution so I created one with CSS only. I switched from a ListBox to a CheckBoxList and hid the checkbox.
In this example to keep it simple I just made the checkbox invisible for all items (option in CSS), and set the sibling text font-weight to 600 for the selected item (label in CSS) - you can CSS to your heart's desire once you have the selector setup correctly - background, pseudo :before image or border, etc. Keep in mind if you go with something before the item you can create spacing issues - I will include a CSS sample (after the first sample) for the "not checked" items so you can add padding/margin to make up for this offset. Lots of ways to do this but this will get you there until you feel like exploring other options.
ASPX:
<asp:CheckBoxList ID="chkList" CssClass="someclassname" runat="server" </asp:CheckBoxList>
CSS:
.someclassname input {display: none;}
.someclasssname input:checked + label {font-weight: 600;}
Personally I prefer line breaks and indents for CSS but easier reading here without.
Here is a CSS selector for the other non-checked items.
CSS:
.someclass input:not(:checked) + label {font-weight: 400;}
Again, we are hiding the checkbox and then formatting the text to the right of the checkbox. One additional nice feature here is that now a user can select multiple items with a touch based input device - no need for a ctrl or space key.
Also, unlike the ListBox, the CheckBoxList does not allow you to restrict the user to one selection. If you need this behavior then you can switch to a RadioButtonList.
You can set background colors from the .aspx page by specifying either the CssClass, or the BackColor property.. it looks like:
<asp:ListBox CssClass="MyListBox" BackColor="#e0e0e0"></asp:ListBox>
Setting the selected item is a little trickier... I don't believe there is an attribute for this directly. You can set it in javascript, or jQuery, something like:
<script type="text/javascript">
$(document).ready(function() {
$('#MyListBox').click(function() {
$("#MyListBox option:selected").css("background-color", "#e0e0e0");
});
});
</script>
I have a nice working grid view but I want to have a <hr> tag between every row.
My GridView has 2 columns, so it will be rendered as:
<table>
<tr><td>x</td><td>y>/td></tr>
<tr><td>x</td><td>y>/td></tr>
</table>
I want to have:
<table>
<tr><td>x</td><td>y</td></tr>
<tr><td colspan="2"><hr></td></tr>
<tr><td>x</td><td>y</td></tr>
</table>
try to use AlternatingRowStyle intelligently to acheive this. IMHO there no straightforward way of doing it.
If i understand your question, you are expecting a line for each TR.
Why dont you try with CSS
tr { border-bottom:2px solid #eee;}
or
tr td { border-bottom:2px solid #eee;} /* border for all tds and not tr */
The GridView does a lot, but when you want finer-grained control over the layout, a Repeater can offer more.
The linked page includes an example showing how you can create the entire HTML table within the Repeater, starting with the header template, continuing in item templates, and ending in the footer template. It doesn't take much to set up and can be very powerful.
I'm using GWT 2.4 and uiBinder.
I'm trying to get a grouping of widgets in the center of a page aligned vertically with a single outside border. I thought it would be fairly easy, but I need to use a vertical layout in the center of the page to align the widgets.
The widgets are lined up the way I wanted using Vertical Panels, but there isn't a border option available, unless I want to put borders around each of the elements using the borderwidth property.
Here is the uiBinder code:
<g:HTMLPanel ui:field="mainPanel">
<g:VerticalPanel ui:field="verticalPanel" styleName="{style.center}">
<g:Label ui:field="titleLabel"></g:Label>
<g:Label ui:field="loggedInUserLabel" text="You are logged in as: "> </g:Label>
<g:Label ui:field="userNameLabel" styleName="{style.spacer-bottom}"></g:Label>
<g:FormPanel ui:field="formPanel" styleName="{style.spacer-bottom}">
<g:FileUpload ui:field="fileUpload"></g:FileUpload>
</g:FormPanel>
<g:Label ui:field="Label" text="Please select:"></g:Label>
<g:ListBox ui:field="ListBox" styleName="{style.spacer-bottom}" visibleItemCount='5'>
<g:item value="-1">-- Please select item(s) below: --</g:item>
</g:ListBox>
<g:Button ui:field="Button" styleName="{style.button}" text="Calculate"></g:Button>
<g:HorizontalPanel ui:field="horizontalPanel" styleName="{style.spacer-top}">
<g:cell width='5em' horizontalAlignment="ALIGN_LEFT">
<g:Button ui:field="cancelButton" styleName="{style.exitcancelbutton}" text="Cancel"></g:Button>
</g:cell>
<g:cell width='5em' horizontalAlignment="ALIGN_RIGHT">
<g:Button ui:field="exitButton" styleName="{style.exitcancelbutton}" text="Exit"></g:Button>
</g:cell>
</g:HorizontalPanel>
</g:VerticalPanel>
</g:HTMLPanel>
Did I design this wrong, I mean using the wrong panel, for what I'm trying to do?
you can set the border for borderwidth of the verticalpanel so that all the widgets added to it will be shown as if it had a border.
Okay, I figured this one out on my own. Being a java dev I need to lean more on the CSS solutions, but after doing some thinking, CSS is the correct way to do this. I put this into my CSS:
.mainPanel {
width: 400px ;
margin-left: auto ;
margin-right: auto ;
border: 1px solid black;
padding: 2px;
margin-bottom:6px;
}
and then I leverage the topmost panel, which is my main container, (the HTMLPanel) and apply the style to it:
<g:HTMLPanel ui:field="mainPanel" styleName="{style.mainPanel}">
<table width="30%" align="center">
<tr> etc...
It's centered in the page and has a border like I wanted. I generally lean towards the table layouts out of habit, but it seems to work well for what I want here.
I have the following code<asp:RadioButton runat="server" Text="Male"></asp:RadioButton>
I want a gap between the radio button and the radio button text, I made the following changes in the text field(prefixed a space) Text=" Male". However, I don't feel this is the most efficient way. A better way out?
Using CSS:
input[type="radio"] { margin-right: 5px; }
I want to add an image, instead of the default button.
I already have a CSS class for the image, will this work?
<asp:Button ID="..." CssClass=""/>
I am trying it now, and the image is all scrunched up. Maybe it's a CSS issue?
Why not use an ImageButton control?
Although you can "replace" a button with an image using the following CSS...
.className {
background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
border: 0;
height: 61px;
width: 250px
}
...the best thing to do here is use an ImageButton control because it will allow you to use alternate text (for accessibility).
I actually prefer to use the html button form element and make it runat=server. The button element can hold other elements inside it. You can even add formatting inside it with span's or strong's. Here is an example:
<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
I dont know if I quite get what the issue is. You can add an image into the ASP button but it depends how its set up as to whether it fits in properly. putting in a background images to asp buttons regularly gives you a dodgy shaped button or a background image with a text overlay because its missing an image tag. such as the image with "SUBMIT QUERY" over the top of it.
As an easy way of doing it I use a "blankspace.gif" file across my website. its a 1x1 pixel blank gif file and I resize it to replace an image on the website.
as I dont use CSS to replace an image I use CSS Sprites to reduce queries. My website was originally 150kb for the homepage and had about 140-150 requests to load the home page. By creating a sprite I killed off the requests compressed the image size to a fraction of the size and it works perfect and any of the areas you need an image file to size it up properly just use the same blankspace.gif image.
<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /
If you see the above the class loads the background image in the css but this leaves the button with the "submit Query" text over it as it needs an image so replacing it with a preloaded image means you got rid of the request and still have the image in the css.
Done.
Assuming a Css class of "image" :
input.image {
background: url(/i/bg.png) no-repeat top left;
width: /* img-width */;
height: /* img-height */
}
If you don't know what the image width and height are, you can set this dynamically with javascript.
.my_btn{
font-family:Arial;
font-size:10pt;
font-weight:normal;
height:30px;
line-height:30px;
width:98px;
border:0px;
background-image:url('../Images/menu_image.png');
cursor:pointer;
}
<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
You can add image to asp.net button. you dont need to use only image button or link button. When displaying button on browser, it is converting to html button as default. So you can use its "Style" properties for adding image. My example is below. I hope it works for you.
Style="background-image:url('Image/1.png');"
You can change image location with using
background-repeat
properties. So you can write a button like below:
<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>