I have select dropdown (non-native), where I may have only one option. The problem occurs when the dropdowns are dependent on each other, because when I have chosen one from a dropdown, I cannot remove it later.
What I want is functionality similar to what one gets when using (again non-native) multiselect dropdown. I have tried placing a button beside the dropdown menu, but without success.
Anyone with experience regarding similar issues?
Thanks!
Edit:
<div data-role="fieldcontain" style="display: none;" id="subSubSubDiv">
<select name="sub_sub_category" id="sub_sub_sub_category" data-native-menu="false" tabindex="-1">
</select>
</div>
Related
Right now, I am using primeng autocomplete dropdown and in this we don't have functionality of clear/reset.
When i selecting a result from droplist, a clear/reset icon (x) should appears in input and click on (x) it will clear the inputbox.
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
[dropdown]="true"></p-autoComplete>
Anyone have any better solution for this.
Just add type=search
<p-autocomplete type="search" ...>
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)" [dropdown]="true"></p-autoComplete>
<i class="fa fa-reset" (click)="onClear()"></i>
onClear(){
this.text='';
}
You can use PrimeNg Chip. When an option is selected from the dropdown you can display the value in a chip which as a close button on it. This is the cleanest and most visually pleasant way to do it.
I am making a facebook like login page. in it im using 2 inline text boxes just like facebook front page. things were going good but automatically the size of both the textbox increases at runtime. i don't know what had happened as i already told you that things were going good
<div class=" form-group form-inline">
<asp:TextBox ID="tbName" runat="server" ForeColor="Black" class="form-control" placeholder="First name"></asp:TextBox>
<asp:TextBox ID="tbSName" runat="server" ForeColor="Black" class="form-control" placeholder="Surname"></asp:TextBox>
<div class="form-group form-inline">
<asp:RequiredFieldValidator ID="rfvName" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid First Name" ForeColor="Red" Style="font-size: small" ControlToValidate="tbName"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvSname" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid Surname" ForeColor="Red" Style="font-size: small; padding:60px;" ControlToValidate="tbSName"></asp:RequiredFieldValidator>
</div>
</div>
also i m using bootstrap to make it responsive and in small screens it's working well but not on large screens
see the image click here to see the image
Please help
your bootstrap css is applied later. when you run the page in browser initially the css is NOT applied but when the css is loaded the textbox sizes increases which is the correct style of the selected class in bootstrap css. Try using ur inspect element of browser and remove the class attribute, you will get back ur initially loaded textboxes style
I have a JQM panel that holds a selectmenu.
When you open the panel and click on the menu, the dialog opens.
Now if you choose an option, you will return to the page and the panel will be closed.
Is there a way to keep the panel open?
Here's the fiddle.
<div id="panel" data-role="panel">
<select id="select" data-native-menu="false">
<option value="1">text</option>
...
<option value="9">text</option>
</select>
</div>
What causes the panel to close is the dialog. Because dialogs are treated like pages, so when you open a dialog you leave the page to another page but with data-rel='dialog'.
Even data-dismissible='false' doesn't force the panel to remain open. However, you can also force panel to open on pageshow or once the dialog disappears pagehide.
Demo
$(document).on('pagehide', '#select-dialog', function () {
$('#panel').panel('open');
});
Following up ot #Omar's suggestion, I had to add a trigger() method to get the panel to open. So: $('#panel').panel('open').trigger();
I am using the bootstrap accordion (collapse) in my project, but unfortunately the result is not the desire one. I have around 8 items in the accordion, some of them having lot of text inside (sometimes more than half a page).
I am trying to collapse/expand items in accordion, but the behavior is totally strange and unpredictable. I just copied the example on their site and added more items.
My expectations was that each time I click on a closed item it will open and the open div will receive focus. Sometimes I see page scrolling very fast and focus is positioned in a wrong place or item is opened but focus is too low on the page and title is not visible.
Any idea on how to handle accordion properly or what's the correct behavior ?
Here's a working example http://jsfiddle.net/panchroma/RdK8t/
It's taken directly from the bootstrap example with extended content added to one of the elements.
The typical code is:
<div class="accordion" id="accordionParent"> <!-- start #accordionParent wrap -->
<!-- start typical content group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
content
</div>
</div>
</div>
<!-- end typical content group -->
</div> <!-- end accordionParent wrap -->
You could validate your page to ensure there isn't a nesting problem, and double check that if your aren't using the full bootstrap js file, make sure you are including the transitions plugin.
Hope this helps!
I started using the jquery ui library to add some enhanced UI elements to the asp.net app. and have run into a minor bug/problem:
I have a jquery UI dialog that is called when a button is clicked..the text for the dialog is all in a and is normaly hidden from the user, and then the jquery UI does its magic and uses that text to display the dialog - all works perfectly.
Here is the code:
<input type="button" value="Cancel This Event" onclick="$('#myCancelEventDialog').dialog('open');" />
and here is the div:
<div id="myCancelEventDialog" title="Cancel an Event or Meeting">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Question is, everytime my form repaints, the "hidden" text actually flashes onto the page for a split second before it becomes hidden again. (i.e. the "are you sre you would like to cancel this event/meeting text actually is visible for a split second)
Is it possible to prevent this?
I set the style on the div to "display: none". The dialog changes this when it displays.
<div id="myCancelEventDialog"
title="Cancel an Event or Meeting"
style="display: none;">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Set the height on the control to zero. This way it renders to the screen at 0 height? This is somewhat of a guess by the way...
Which browser? Also, you can experiment with CSS visibility by setting display:none and undoing that just before you pop up the dialog.