I am currently using bootstrap and bootstrap-select directive for AngularJS. And I want to do something similar to this http://cl.ly/image/301L0B2X2b0r.
Problem is I have no idea how to customize select template if we are using ng-option?
Any help would be really appreciated.
I recommend this way:
Here is the fist:
<select ng-options="i in items"></select>
You can also do it this way ( not the ng-option way ):
<select>
<option ng-repeat='i in items'><option>
<select>
It may be best to handle this outside of an actual <select> tag. Styling this tag is very inconsistent across browsers. Perhaps treat this as a bootstrap dropdown menu? You can create your own directive that wraps the dropdown menu so you can track the state of the model for your custom select control. You can then use ng-repeat on your list item tags and style them as you see fit!
Related
I've got the following site map defined in Boot.scala:
SiteMap(
Menu(S ? "Home") / "index",
Menu(S ? "About") / "about",
Menu(S ? "Work") / "work",
Menu(S ? "Contact") / "contact"
)
With the following markup:
<lift:Menu.builder />
What I'm trying to do is in someway identify the menu items to style each seperatly.
Is there a way to define a unique class for each sitemap entry or perhaps add the name of the menu item to the title attribute which I could also use to style them?
So the markup is rendered like this:
About
Or
About
Thanks in advance, any help much appreciated :)
UPDATE
Until a more robust way of doing this is found, I've opted to style each link in the menu via simple attribute reference, e.g:
a[href="/about"] { color:#000; }
I would take a look at the Menu.item section here: http://exploring.liftweb.net/master/index-7.html#toc-Subsection-7.2.3
That should allow you to add specific classes to particular items of the SiteMap, which sounds like exactly what you want to do.
If your site menu is not really simple, you can consider to hard-code your menu inside the HTML code. Obviously, Lift's simple menu can't handle everything.
You can also create menu groups and render these groups separately.
Suppose I have a ViewModel where there is a string field which contains name of the color. So in my DropDownList I want list items to be colors instead of mere text)) Can it be somehow done? Thanks in advance!
Unfortunately the standard Html.DropDownListFor helper doesn't allow you to define html attributes on the <option> element that it generates. For example your target HTML could be:
<select name="color">
<option style="background-color:Red;"></option>
<option style="background-color:Blue;"></option>
...
</select>
In order to achieve this markup you could write a custom DropDownList helper as shown in this answer.
And to achieve even sleeker UI you could use some of the existing jQuery DropDown plugins such as this one.
In my case, I have an HTML/CSS Menu in the site master.
So, when you hover your mouse over "Graphics", it highlights it (using CSS onHover).
Now what I need to do is that when you actually click on "Graphics" (and it takes you to the graphics page), it remains highlighted, if possible in a different colour.
I'm thinking of modifying the Site.Master style from C# or VB code.
Any ideas? Thanks.
An idea would be to check what page you are in, and apply a css class:
<li class="<%= this.Page.ToString().ToLower().EndsWith("graphics_aspx") ? "selected" : "normal"%>">
Graphics<li>
Hope it helps!
You can either use the CSS active state if the page you are on directly relates to the link, however if the menu points to sections (i.e. multiple pages) you may need to use a bit of server side code to your master page, that gets the requested URL and determines which link is active. Usual convention is to then add the class 'active' or similar to the outputted html.
You can convert the UL/LI with runat = "server" and finally add styles in the code behind
Example
Control.Style.Add("display", "none");
I am definitely a CSS noobie, but have looked everywhere and can't find a solution to my problem (I have found out why my attempts don't work, but no solution).
I am hacking a CSS sheet to modify an advanced search form which is linked to a database. I CANNOT touch the HTML, nor can I use JavaScript or JQuery. The search form allows a user to select which fields they wish search from a drop down form menu. I want to hide a number of field options since they have no data.
The HTML is
<div class="inputs"><div class="search-entry">
<select name="advanced[0][element_id]"
id="advanced-0-element_id">
<option value="" label="Select Below ">Select Below </option>
<optgroup label="Dublin Core">
<option value="88" label="Abstract">Abstract</option>
<option value="98" label="Access Rights">Access Rights</option>
<option value="118" label="Accrual Method">Accrual Method</option>
<option value="119" label="Accrual Periodicity">Accrual Periodicity</option>
<option value="120" label="Accrual Policy">Accrual Policy</option>
and so on
I tried
option [value="88"] {
display: none;}
But this doesn't work b/c each drop down option does not create a block in the first palace. Therefore display: none can't hide a block that doesn't exist.
So now you know what doesn't work, and what I need to do. Any suggestions? Again, I can't access the html code at all b/c it is generated by a PHP program on a server I don't have access to. Even if I did, I don't know any PHP at all.
thanks for your time
At the risk of getting downvoted I am going to say that this isn't possible with CSS alone.
The option tag describes the data model of an HTML element. The style sheet describes the view.
You won't be able to do this with CSS. You would need to use JavaScript to do it at runtime. Otherwise, you'd have to edit the server code and/or data from where it is generated. Do you have access to the database? If so you may be able to just remove the rows it's using.
I'm using jQuery UI with a custom theme, and I have an <input type="submit"> element on my page. Since jQuery is around this button gets the jQuery UI look and feel - it is automagically added the css classes ui-button ui-widget ui-state-default.
How do I get rid of these ?
Want the button to be a plain old button without those classes.
Thanks.
The buttons don't automatically get the classes set - you must be calling something like the following
$("button, input:submit, input:button").button();
you need to remove input:submit
To change your button back to 'normal' style you could either use ManseUK's answer, or if you just want to restyle this button you can remove the three classes by adding $("#yourButtonID").removeClass("ui-button ui-widget ui-state-default")
Another way to solve this problem is that if you look in the jquery-ui.js file there will be a block comment that starts with something like: "jQuery-UI Button", delete that entire block from the start of the comment to the start of the next comment for another widget.
This solved the problem for me.