I am dynamically creating radio button within code behind in ASP.Net, how do I add the controls so they appear vertically instead of horizontally?
RadioButtonList rbl = new RadioButtonList();
rbl.RepeatDirection = RepeatDirection.Vertical;
You can use RadioButtonList Control with RepeatDirection set to Vertical.
If that is not possible then....
Add them to a ordered list(OL element) or an unordered list(UL).
Possible two ways:
Give some CSS class, and in your css give that class some style like
display:block;
Use RadioButtonList control as container to those radio buttons. Set the "RepeatDirection" property to "Vertical".
Related
I am using a radio button because it makes binding the items and controlling dynamic events very easy.
My problem is hiding the RadioButtonList ListItem "circles" that are to the left or right of the ListItem.Text.
I set each ListItem.Text property to be an HTML <img>.
I would like the RadioButtonList to display just the ListItem.Text property in the RadioButtonList list, without the radio-button circle beside it. After some research, I realize I do not think it is possible to hide the radio-button's ListItem circle's, without hiding the entire radio button list.
So my second option, would be to place the ListItem.Text on-top of the RadioButtonList ListItem "circles" via CSS. Here is what I have tried to far, but I'm afraid my CSS skills are slack :(
noPizzaMod.Text = "<img src=\"image.png \" />";
noPizzaMod.Attributes.CssStyle.Add("float", "left");
noPizzaMod.Attributes.CssStyle.Add("padding","0 1em");
noPizzaMod.Attributes.CssStyle.Add("text-align", "center");
rdo_pizzamods.Items.Add(noPizzaMod);
Results: Just added padding to the left of the radio-button ListItem Circle.
Again, the task at hand is to float the ListItem.Text (the picture element) on-top of the RadioButtonList ListItem "circle"
Thank you for your time!
PS: Another thing I have tried was using JQuery to display:none the radio-button listitems but of course that hides the text, as well as the entire radio-button list :(
As a last resort, I could switch to the togglebuttonextender for the checkbox, but this would include a redesign of our display mechanism. Was hoping there was a simple solution and one of the guru's could point me there!
EDIT:
I simply have an asp:Panel which I dynamically add the RadioButtonList to in the code behind.
<asp:Panel ID="pnl_pizzamods" runat="server"></asp:Panel>
Like so
ListItem PizzaMod = new ListItem();
noPizzaMod.Text = "<img src=\"image.png \" />";
noPizzaMod.Attributes.CssStyle.Add("float", "left");
noPizzaMod.Attributes.CssStyle.Add("padding","0 1em");
noPizzaMod.Attributes.CssStyle.Add("text-align", "center");
rdo_pizzamods.Items.Add(noPizzaMod);
pnl_pizzamods.Controls.Add(rdo_pizzamods);
I also add custom dynamic event handlers and a lot of other mojo in the background which makes the RadioButtonList data binding easy for me to control. I'm sure it does not effect the visual layout though! Again, thanks for the help!
Have you tried simply hiding the radio button?
input[type='radio'] { visibility: hidden; }
Fiddle: http://jsfiddle.net/kboucher/8GaV5/
I need to place an Add button and a Remove button next to an ExtJS ComboBox. It's critical for these three elements to be in a single line because I have to apply this to all other ComboBoxes in the fieldset too.
Please notice that the given ComboBoxes are items of a fieldset. Replacing the buttons with context menu items is not the desired solution.
Can you give me some ideas? Thanks in advance.
For this, you can place all the three elements - combobox and the two buttons - in a container with layout hbox. This will place all of them in the same line.
Hope this helps.
Ext.form.FieldContainer is the class you need.
It has a label and will layout nicely with your form, but can contain multiple fields and controls.
I have a dropdown list and a button. When you click the button it will set all the dropdowns to a value using JQuery. The drop down is inside a div with a unique id. Is there any way I can get JQuery to set a drop down list value that is in a div without giving it a div class or id?
I've attached the html, its just three drop downs each one inside a div class.
http://pastebin.com/ne6x43QC
thanks!
$('input:submit').click(function(){
$('div > select').val(1);
})
See fiddle example.
http://www.codetoad.com/asp.net/aspnetcontrols11.asp
Is it possible to have radiobutton control list in one row. Now it is in 3 rows.
You need to use the RepeatDirection and RepeatLayout properties of the RedioButtonList control.
There are several ways of getting the layout you want - I suggest reading the documentation of both properties in order to make an informed decision on which one is most suitable for your situation.
In your RadioButtonList set the property of RepeatLayout="Flow" and RepeatDirection="Horizontial". This will make items in a radio button list horizontal instead of vertical.
Why dont you try adding each radio button to <div> or <li> tag and then set float:left in Css for each <li>. That way i think it will render in one line. Just make sure to set width:__ style to accommodate all radio buttons
I am using linkButtons with a background skin inside a linkBar with a dataProvider. A couple of the labels from the linkButtons are too long and distort the linkButton skin. How can I make all of the linkButtons labels the same width?
You can use an item renderer to render a set of data the way you wish.
You can include most of the components in custom renderers.
Check out the following articles
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
and
http://www.switchonthecode.com/tutorials/flex-using-item-renderers
Hope that helps!
Cheers,
Ernani
If you want the width to be based on the text then you have to pre-measure your text to figure out the max width and then pass that width into the itemRenderers.