I would like to make a multiple selection listbox in HTML that can have it's values spread across multiple columns.
I do NOT want multiple columns for each option, I would like all the options to spread across the combo box, so it looks something like a grid of options, perhaps 4 high by 5 wide.
Is this at all possible?
It's not possible using a listbox control.
For this kind of thing I would use individual checkboxes instead. Use the <label for> tag to attach the checkbox to a label. You can arrange the items any way you like.
If you want to get fancy, you can use the JQueryUI Selectable control.
Related
I have 2 different form engines that share a common over-driven "Question" directive with different input types (select, calendar, multi-line, etc) based on a question type and then I want to display it in one engine like:
QuestionName InputField
and another
QuestionName
InputField
The goal is to share code with minimum duplication. Is there a good way to setup the html so it can switch back and forth or do I just move the InputField into it's own directive that can be placed twice in the question directive and show/hide as appropriate.
Thanks,
Scott
I decided on just creating an inner directive for the field portion displayed twice on the question directive using ng-if based on if it should be vertical or horizontal set at the form level.
<tr><td>questionname <span ng-if="direction==='vertical'><br /><field-directive /></span></td>
I need a list where for some items, there should be a checkbox available and user should be able to check multiple checkboxes i.e select multiple items.
So I made use of toolkit: "LongListMultiselector".
But I cannot figure out a way to hide the checkboxes for some element? Is there actually a way while using "LongListMultiselector" or should I change the control element.
Here I have a manually created table using textboxes inside of a list object:
The problem with this is that if one of the textboxes has too much text only it will grow while the others will remain the same height.
Now the other issue is you can't merge two cells in the same column (vertical merge). Is there a way using a combination of controls that I could replicate what is in the picture such that if the Release Description textbox has too much text in it and it grows the other controls will grow along with it?
Two suggestions:
1) If you want to keep your current workaround, and wish to avoid the growing of your textboxes you can set the CanGrow property to False.
A UI solution for the long text will be using ToolTip: Lets say that your textbox can contain only 60 chars, in the textbox expression use the following:
=iif(Len(Fields!YourField.Value)>60, Left(Fields!YourField.Value,57) + "...",Fields!YourField.Value)
means that only 57 charecters will be displayed in the text box, the full text should be display will hovering the textbox (using tooltip).
2) If you want to merge cells vertically you can do some workarounds.
You can place a table inside another table's cell, that way using several tables you can perform your desired output.
Attaching sample of using table within another table (I use 3 tables):
I am looking for a way where multi select list box should display as normal single select combobox but on click it should work as list box allowing multi selct like show below as in spreadsheet. I am looking for solution in CSS HTML and javascript rather than in Jquery.
You can't make an element behave like that, but you can make something that looks like a dropdown list, and when the user clicks on it, display a popup/popout with a select that allows multiselect (has the size property set).
you can do this by jQuery MultiSelect and here is the demo
I have several Radio Button lists on my page, each lists items under different categories, so they are listed under different headings.
I only want one item to be selected across all the lists however.
Is it possible to "group" the lists so that the affectively behave as one RadioButton Lists?
I want to avoid using jQuery/Javascript if possible
Not using the standard ASP.Net radio button list control I believe. The best thing to do would be to render out your radio buttons one-by-one in their individual lists and of course, set the "name" property so they all belong to the same group.
You could also (depending on the structure of your data) just render all options in one radio button list control and then use the css nth child selectors to insert divs/line breaks/etc. But you would probably need jQuery for this unless your targeting only browsers that supports CSS3.