Hiding form drop down options using ONLY CSS - css

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.

Related

Dropdown List Country With CountryFlags

Does asp.net have any classes who represent countryFlag as like CultureInfo who represent country list? I want to show countries with flags in asp.net using C# without using database. Is it possible to do?
İf you ask us yes .
Here is the method for your idea
If you want to use it on client side, I would recommend you to use semantic-ui.
Use dropdown element with flags. Here is example
Best way try image sprite. Refer https://www.flag-sprites.com/ . Simple example given below.
<select>
<option value="1">Albania<img src="blank.gif" class="flag flag-in" alt="India" /></option>
<option value="2">Albania<img src="blank.gif" class="flag flag-usa" alt="United States" /></option>
</select>

How to show indicator inside select dropdown menu with Angular JS?

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!

How to make list items in DropDownList to be colors instead of text in mvc 3

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.

ASP.NET ListBox - Condense generated html

I have an ASP.NET page that has multiple (11) ListBox controls on. Some of these ListBoxes can have many options (100 or more).
The issue I have is that the response size of the page is 106kb which is down to the html generated from all of the ListBox options.
At present it is being padded out in the source like:
<option value="1">
Test1
</option><option value="2">
Test2
</option><option value="3">
Test3
</option>
Would it not be smaller in size if condensed? Such as:
<option value="1">Test1</option><option value="2">Test2</option><option value="3">Test3</option>
Firstly, is whitespace actually a contributing factor here?
Secondly, if whitespace is an issue, what would be the best way to change the way html is generated for ListBox controls?
I appreciate there may be more "global" compression solutions; however for now I'm specifically looking at ListBox controls and their markup.
You would gain almost nothing by getting rid of white spaces (new lines).
You can invest some time in creating your own list box control that would use minimalistic tags to make it look for example like that:
<c1:MyListBox>
<o v="1">
Test1
</o>
<o v="2">
Test2
</o>
<o v="3">
Test3
</o>
</c1:MyListBox>
And of course you can enable IIS compression.
In all cases you will need the options of the select element to exist so there is no way to remove this as per your comments so i will suggest that at page load you render the listboxes with empty options then with the javascript on the page load event, you make an ajax request to get the list of options available for each checkbox and draw them in the html with javascript, this way, the request will be cached so that everytime you will call the ajax request that return the list options, it will be cached so it will be very fast.
Let me know if you want help in this approach.
I would suggest that a listbox with 100 items in it is not particularly usable anyway and would suggest that you look at a different way of displaying these selects (something like the tag selection autocomplete that you see on this site may be appropriate).
Removing the whitespace here will gain you little.

Drupal views - splitting up the exposed form possible?

I need to display part of the exposed form in my page's sidebar, and the rest of the form and content in the $content area. There's really no good way that I can find to do this. I sort of got it to show up in a way by making a "block" view with "exposed form" set and then trying to only show the part that i needed through .tpl files. The problem is that then, when the submit button is clicked (the submit button is in the $content area), then the filters that are in the sidebar are not taken into account.
Some lateral thinking... Why not explore CSS-only options? You can place that form element playing with position:absolute ? Or (considering is a right-sidebar) float:right and then some negative right margin to push it to the sidebar? If you are using 960 grid system, play with pull and push classes.
First I am going to answer your question, then I will explain why you are asking the wrong question:
If you build the form outside of the formapi, you might have some luck. This will get upgly and will require you to take a lot of extra care about attack-vectors such as mass-assignment.
views_some_view.tpl.php:
<form name="input" action="/link/to/view" method="get">
Country: <input type="text" name="country" />
my_custom_exposed_view.module:hook_block()
City:
That would make a form, which in most situations will start with <form>, have some input fields, then have a lot of random HTML, then some more input fields and then the closing .
As you may know, a <input type="submit" value="Submit" /> will only post everything of the form tags it is enclosed in. The submit button in the following HTML:
<form name="input_1" action="/link/to/view" method="get">
Country: <input type="text" name="country" />
</form>
<form name="input_2" action="/link/to/view" method="get">
City: <input type="text" name="city" />
<input type="submit" value="Submit" />
</form>
will only send the City. These are not the droids you are looking for.
It will need to be one, big form, but since everything between form and /form is very dynamic, and contains a large quantity of HTML, including potential other forms, this is really not what you want. Moreover: a blocks appearance (shown/not-shown) is controlled completely independent of the content. You will need a lot of sturdy code to ensure the block a) never shows up when the starting form tag is not present, and b) the block will guaranteed to be shown when that opening form tag is present. Else you have not just invalid HTML, but broken HTML that will truly render your page unusable in most cases.
You simply don't want a part of the form in a block and the other part in the content.
However, you want it visualised as if one part is in the body, the rest in a sidebar.
The good news, is that with HTML presentation structure are independant. That is where your solution lies.
Give your form-fields good ids and classes. You could use a hook_form_alter to change existing forms, but you probably simply just want to create the HTML for that entire form yourself. The theme layer allows that.
Use CSS to pick out either single form-fields by ID and position:absolute them into the correct place. Or pick out classes of fields by CLASS and position:relative them into the correct place.
Make a simple identification-routine that allows adding a class to the body-tag. (see below).
Add some CSS to shift the sidebar lower, making space for the form-fields to be moved in, when that class is in the body-tag.
<body class="<?php print $splitform ?>">
function my_themename_preprocess_page() {
if ($GET['q'] == 'path/to/view') {
$vars['spliform'] = "splitform"
}
}
From the above explanation I am assuming that you are printing same form in block and in content area and you are hiding some part of form in page.tpl , if this is true then you can use hook_form_alter() in your custom module then
Store the value of the form element(present in block) in global variable.
Now use that global variable and set form element(present in content area, this form element is not visible to user).
Provide more information if you implemented other way.
Regards,
Chintan.
There is a related issue here:
https://drupal.stackexchange.com/questions/3827/multiple-copies-of-views-filter-form-exposed-filters
which describes how to duplicate your filters. However it seems like an ugly hack.
A bit cleaner seems this solution mentioned in #6:
http://drupal.org/node/641838#comment-3247748
Haven't tested it out, but it looks good.
It will still give you some overhead (duplicate views) but it might be the easiest way doing this using views.
On the other hand you might write a module and build your own custom filter block which hooks into your view. Here is a blog post about this:
http://www.hashbangcode.com/blog/creating-custom-views-filters-exposed-form-element-drupal-6-561.html
If you use something like context you could get the exposed filters block to display twice in the same page. You could then use CSS to hide the fields you don't want to do display in each form.
The fundamental problem you're having is that to have the two forms in different places, they'll each have their own form element - when a submit is triggered, only the form fields within the same form element are sent. You need to move them into one form, or rely on JavaScript to gather the fields from both forms and construct the post.
You could create the block as an empty div and have javascript from the main page populate it with the secondary filter form and whatever else you need in there. Again, you could use javascript to copy the form values from the block form to hidden fields in the main form on submit. That gives you all the control you need from one place (the node output). Only caveat is that it relies a lot more on javascript to join it all together.

Resources