I'm trying to create a print stylesheet for a web form that users fill out by hand and then copy to the web version. Unfortunately, I can't figure out how to print my select list options. It only prints whichever option is currently selected.
Is it possible with CSS (JavaScript isn't an option) to extract the content from the select options and place them in a parent element? I'm thinking something like this:
HTML:
<div id="parentDiv">
<select>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
and CSS:
#media print{
#parentDiv:before {
content: child.attr(value);
}
}
That's obviously not correct, but is there a way to actually do this? Or any other JavaScript-free way to print out the options?
NOTE: The page is dynamically rendered, and I am not able to render additional "hidden" <div> elements to unhide in the print css, so that solution won't work for me.
THANKS!
Related
I want to hide one of the dropdown options from a form I'm using. I want to keep the element in the form, as the form is doing some calculations based on user inputs and if I take out the option from the form it breaks the calculation, so I'd just like to hide it from users so it's still in the form but not visible to users.
I have inspected the area on the form and this is the code. I want to hide the word Liverpool.
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="Liverpool">Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
If you are working in an environment that supports HTML5, you can use the hidden attribute on the option to hide it.
Note that in order for that to work, it can't be the first option (otherwise it will default to that one).
See this working snippet:
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="-">Choose an option</option>
<option value="Liverpool" hidden>Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
Following OP Comment About Editing Existing HTML
OP has stated:
The issue I will probably face is that the html is generated by a
plugin that creates the form, so I can't add that attribute. I was
hoping to add a css rule to stop it displaying
Given this circumstance, the CSS property visibility could be used to control whether the option is visible, as per the following snippet:
select > option:nth-of-type(2) {
visibility: hidden;
}
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="-">Choose an option</option>
<option value="Liverpool">Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
However, this has the unfortunate side-effect of leaving a hole in the select list as opposed to hiding it completely. It does, however, prevent that option from being displayed or chosen.
I'm using a CMS to try and alter a fundraising form so the text is bigger.
I've managed to alter the paragraph and <h> easily enough but there are some stubborn labels that i cant get to go bigger - here is one - I'd like the words "Payment Frequency" to be 20px or so....
<div class="field select required">
<label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_LabelForDropDownList">***Payment Frequency***</label>
<select name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder234$FormControl1$DonationSection$DropDownPaymentFrequency$DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList">
<option value="">Please Select...</option>
<option selected="selected" value="Monthly">Monthly</option>
<option value="Annually">Annually</option>
</select>
</div>
I have been able to style these individually but there must be a better way, there are loads of them, here is another example:
<div class="field text date required">
<label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_CollectionDate_DropDownListDay" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_CollectionDate_LabelTextBoxCollectionDate">Collection date </label>
I tried styling all "labels" but only the first one changed. the rest stayed the same.
There could be another CSS rule which is overwriting your new CSS rule. You can use the !important to overwrite an already existing CSS rule. See the following:
div.field label {
font-size:20px !important;
}
<div class="field select required">
<label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_LabelForDropDownList">***Payment Frequency***</label>
<select name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder234$FormControl1$DonationSection$DropDownPaymentFrequency$DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList">
<option value="">Please Select...</option>
<option selected="selected" value="Monthly">Monthly</option>
<option value="Annually">Annually</option>
</select>
</div>
Hint: Make sure your CSS rules are included after the CSS files of Frameworks (like Bootstrap or Foundation). This way or using a selector with a higher specificity. These ways should be tried before using !important because using !important is not recommended.
Only using CSS, is there a way to determine if a select box is dropped down or closed?
I know that there are pseudo classes such as :checked and :indeterminate, but I haven't seen one that will work in conjunction with the select element the way I want.
Here's an example of my select box - with an id of "field-action" :
<select id="field-action" name="" class=" " data-validation-required="true">
<option value="" selected="selected">—</option>
<option value="1" id="field-action-lock">Lock</option>
<option value="2" id="field-action-unlock">Unlock</option>
<option value="3" id="field-action-pin">Pin</option>
<option value="4" id="field-action-unpin">Unpin</option>
<option value="5" id="field-action-delete">Delete</option>
<option value="6" id="field-action-undelete">Undelete</option>
<option value="7" id="field-action-move">Move</option>
<option value="8" id="field-action-merge">Merge</option>
<option value="9" id="field-action-spam">Spam</option>
<option value="10" id="field-action-notspam">Not Spam</option>
</select>
The goal - using pure CSS or SASS - is to determine if the select list is dropped down, and if so, give it a bottom margin of about 50px. When the box is dropped, it overlays some content that cannot be covered under any circumstances.
Any input is appreciated - thanks!
SELECT elements are not rendered using HTML, they are part of the browser/operating system. When opened they do not take up any space within the DOM, therefore CSS cannot detect this.
Although this appears to be the only way to manipulate the select box via CSS, it is not acceptable as tabbing into the select box triggers the focus but does open the select box. The user must click to open it.
Why not :focus?
select:focus {
}
Fiddle: http://jsfiddle.net/ewqSA/
There might be an alternative way of showing your options. Instead of a drop down list, you could use a select list like is in this jsfiddle http://jsfiddle.net/cSSjF/ linked in this answer https://stackoverflow.com/a/8788381/1804496
<select size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
This still allows only one option to be selected, and lets you control how many options you want to be visible. I'm assuming you could show just enough options that your important content isn't pushed off the viewable area.
I need to set a bigger height for the option tags inside my select.
<select name="forms" id="forms">
<option value="1">Row 1</option>
<option value="1">Row 1</option>
<option value="1">Row 1</option>
</select>
I used the CSS code below for this purpose, but it did not work.
option {
padding-top:5px;
padding-bottom:5px;
}
Also I have tested this one, and again, anything happened.
option {
height:20px;
}
What is your suggestions ?
The implementation of select often uses built-in routines that are immune to CSS. This is why both methods fail on many browsers. On Firefox, they both work. The same seems to apply to any indirect methods one might try (line-height, font-size).
I could set a certain height for it using a style for the select tag:
<select name="" style="height:25px">
I have a dropdown list box which has a few itens as coded below in an aspx file:
<asp:ListItem Value="1"> Chairs</asp:ListItem>
As you can see, I tried to put a few blank characters before the word Chairs BUT they are removed when Chairs is displayed in the dropdown list box.
How do I force the indentation of Chairs with spaces or with a tab character in a aspx file? \t for TAB doesn't work. Thanks.
<asp:ListItem Value="1"> Chairs</asp:ListItem>
Try the for the spaces which is the html representation of a space.
How about adding CSS styles to indent the text? You can set the text-indent: 10px CSS style on the <option> tag. Mind you, it won't work in IE, which sucks pretty bad.
Also don't forget the <optgroup> tag, which you can use to group elements in a dropdown. It's a very overlooked tag, probably because the ASP.NET list and dropdown controls doesn't support it.
Try this in your page, and see what happens:
<select>
<optgroup label="Group 1">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
</optgroup>
<optgroup label="Group X">
<option value="1">Item A</option>
<option value="2">Item B</option>
</optgroup>
</select>
:)