Since <select> elements don't style in a predictable way, I was thinking about setting up a javascript/html proxy element to manipulate a hidden <asp:dropdownlist> field. The code that populates the select is beyond my control, but I don't want to render the actual field.
Does anyone have any experience or pointers with something like this?
This is a job for jQuery. What you want to do is roughly the following:
Use css to hide the select dropdown
Read out the options/values of the select element into a javascript array. jQuery is good at this.
Use jQuery to generate a ul element with an li element for each of the options
Use the many methods that are around for styling the ul element into a dropdown
Here is an example of someone who has done this: http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/ . You can probably use his code almost as is. The example is a bit confusing because he styles the dropdown to look exactly like a select element. But if you start editing the css you can get it to look any way you want.
Related
I'm going to simplify my problem a bit, because I really want to avoid adding a lot of code, because this is a gigantic project we are working on if I started adding code snippets, there would be a lot of it.
My project has one feature, where you have a list of different div elements in the left column of the page, and they can be individually dragged to the right column, where you can make your own list out of these elements in the order you choose.
These div elements are all the same child component. My task is to add a dropdown to these div elements, but only to the ones that have been dragged to the right column (you can choose additional preferences, once it's in the right column). It shouldn't be there on the divs in the left column.
The only way to differentiate between them is by the class name. The ones on the left have a class="left" and the ones on the right get the class="right".
Now I'm wondering if there's a way where I can write some code to the effect: if the element has the class 'left', hide the dropdown, else show the dropdown?
Yes, this is definitely possible.
Create a Directive that has a #HostBinding() for a specific class and just add the directive to every component.
Inject ChildComponent into the constructor of that Directive. You can also inject ViewContainerRef and then call this.viewContainerRef["_data"].componentView.component This will give you reference to that child element that the directive is put on.
Once the #HostBinding('.left') event handler is triggered this will be the function that gets called when the class you're looking for is added. Here you can then access that ChildComponent and then presumably call a method on that child component to show/hide the mat-select
I haven't actually tested this but thats the approach I would take.
You might also achieve this thru your css. Something like
div[class*="left"] dropdown-element {
display: none;
~or~
visibility: hidden;
}
Is there any way to make the text within an <a> tag selectable, using CSS?
I can't seem to be able to search this query for useful results on the web, "a" just finds the word "a" :)
I don't control the original creation of the document.
Are you trying to do this in a XUL document?
If so, you're probably looking for the following CSS property:
-moz-user-select: text;
I've used that on "description" elements with success but never tried on an "a" element.
You're either literally trying to just select text inside of an anchor element as a user.
OR
You're trying to use JavaScript to select text inside an anchor for the purposes of utilizing that text.
If it's the first simply select the text just at the edge outside of the anchor, if the selected character is 49% of less closer to the anchor then the browser won't select that character.
If you're trying to use JavaScript to get the text of an anchor you'll want to look at my tutorial, try selecting text and then clicking on the anchor below. That should give you some much needed direction...
http://www.jabcreations.com/blog/javascript-parentnode-of-selected-text
If none of that helps it would greatly benefit yourself as well everyone else reading your question to communicate your goal with greater clarity.
The nature of <a> is a link on HTML.So when mouse clicked on the text inside <a> the trigger of the link automatically triggered. I think it could not archive just by CSS alone. JavaScript need here
Run JavaScript Code
may let you select the text and handle click (if necessary )
On a radio button checked event, I hide the div by
document.getElementById("AltYukleniciDiv").style.visibility = 'hidden';
But, when I use it for an aspxTextBox, it doesn't hide it. Or when I use the ClientInstanceName instead of document.getElementById(" ")
UnvanText.SetVisible(false); this didn't work either. UnvanText is ClientInsanceName.
javascript crashes there. I put an allert after that and it never shows it. I have to do it because I hide a div, including everything in it, but it still shows the textboxes that has validation. I don't know how it is possible. Can you tell me a way to hide them all? It used to hide the div with all of its contents before I make some validation settings.
It sounds like asp.net is being 'helpful' and changing the IDs of your elements.
Give the text box the attribute ClientIdMode="Static", and it might fix it.
you can add a CssClass attribute to that text box then use it to find the element and hide it.
You can consider using jQuery, so you need to write a single line of code:
$(".MyHideClass").hide();
or set attribute style display:none
I can advice using Firebug (FF Extension) for debugging javascript
I am trying to style the Select element using http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
the options are starting well above the button.
Am not able to style it. could someone help me how to modify it.
Link: http://bakasura.in/king/forms.html
If you add a height of 30px to the select.styled class, the menu will appear in the correct location.
I have two menus based on someones credentials.
The menu is an UL within a wrapping DIV and I would like to place an If Then within that DIV to set is class dynamically.
Does anyone know if this is possible or if there is a better approach?
Thanks in advance!
Give the element an id and add the runat="server" attribute to it.
You can now access if from your code and set its attributes programmatically.
If its just a div, you can use asp:Panel instead -- asp:Panel will render a Div, and you can set its visibility in your code behind
Scratch that, actually that wont work.
I need to hide a specific list item and so what I will simply do is write that list item dynamically when the correct user is logged in.