i hava a placed a select statement inside a table cell. The ui was looking good till certain inputs. the inputs to the dropdown are fetched dynamically from the database.certain input text are big and it can be wrapped up and that table width has increased.. is there a solution to wrap up the text after certain size or i can resrtict the size of select or can i restrict the table size to be fixed..
You can set the width of the selectbox using CSS:
<select style="width: 200px;">...</select>
This will fix the width and cut off any text that does not fit.
You can set the width of the Select with a width attribute or with styles
<select name="fd" width="230" STYLE="width: 230px" size="0">
Why not just truncate the results before they're displayed in the input? Make sure the value attribute of the option is the full text, and just truncate the internal text node of the option.
It's hard to give a more specific answer (e.g. an implementation) without knowing how the elements of the dropdown are fetched.
Or you could do it in CSS:
<select style="width:50px;">
<option value="foo">really really really really long text</option>
</select>
OK so here is the solution I figured out after quite some time. It will automatically increase the size of the select box based on the maximum width of the child options.
window.onload = function()
{
var elem = document.getElementById('test');
var values = elem.length;
var biggest_value = 0;
var biggest_option = '';
for(var i = 0; i <= values; i++)
{
if (elem.options[i])
{
var len = elem.options[i].value.length;
}
if (biggest_value < len)
{
biggest_value = len;
biggest_option = elem.options[i];
}
}
document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';
};
The Select Box:
<select id="test">
<option value="Hello">Hello</option>
<option value="Hello Again">Hello Again</option>
<option value="Hello Yet Again">Hello Yet Again</option>
</select>
Related
I'm trying to define the width of my outer span (.bar-1) element by using the value of my inner span element.
<span class="bar bar-1">
<span name="PERCENTAGE" id="PERCENTAGE" disabled="" title="Total Percentage" maxlength="255" value="66" tabindex="-1" sectionid="MODE_TOOL">
<span class="Text">66</span>
</span>
I have no possibility of changing the content, I'm just trying to figure out a way how I can make my outer span width = 66%.
I believe you would need Javascript for something like that.
Using jQuery:
var tmp = $(".Text").text();
And than use that value to set a style on .bar1 like:
$(".bar1").width(tmp);
If I understand your question, you can do that in JavaScript. Spans don't have width though, unless you use display: inline-block;.
With basic JavaScript:
<script>
var elem = document.getElementsByClassName('bar-1');
for(i = 0; i <elem.length; i++) {
elem[i].style.width = document.getElementById('PERCENTAGE').innerText + "%";
elem[i].style.display = "inline-block";
}
</script>
Thank you both. Unfortunately the admins didn't allow me of adding JavaScript code.
In the end, I used the following css solution:
span[value="66"] {width:66%};
Obviously, I needed to add this for each number between 0 and 100.
Im trying to make a dropdown. U have to search on the package number and you will get the detailed information so you can immediately see the correct price or sizes for that package.
<div class="choosePackage">
<label>
<span>Package nr</span>
<span>m3</span>
<span>Size LxWxH</span>
<span>Price</span>
<span>Discount</span>
</label>
<select>
<option value="">
<span class="optPackage"><strong>5528</strong></span>
<span class="optM3">9m3</span>
<span class="optLWH">1.00x2.00x3.40m</span>
<span class="optPrice">€70,00</span>
<span class="optDiscount">€280,00</span>
</option>
</select>
</div>
I made something like this, but you can't split the option.
This is what I want to achieve
I was working on a solution, but have to run into a meeting. This should give you a basic idea however. Basically, you need to use JS to overlay a styled dropdown which will be linked to the actual drop down. Then you can style things to be different with in each option.
Start by creating your drop down select
You will want to make all the text as a single drop down
<select id="selectbox1">
<option value="">Select an option…</option>
<option value="basic">$100 Basic Package 3 Months</option>
<option value="upgraded">$500 Upgraded Package 6 Months</option>
<option value="expert">$1000 Expert Package 12 Months</option>
</select>
Then you theoretically, jump through hoops using Javascript
Here you will need to cache your options, then hide the select to show your styled div.
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
Now you will want to cache your styled div, and append some child elements into your div
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
html: $this.children('option').eq(i).text()
.split(' ').join(' <span style="color: red; font-weight:100;">'),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
You will want to use your for loop to append styling onto certain parts of your drop down. I have a basic mock up for you to check out as well.
I don't know if this is possible but I would like to have an input field where I would have a value that is not editable by the user.
However, I don't want the input field to be "readonly" because I still want the user to be able to add text after the value.
If you have any idea on how to do this, let me know please that would help me a lot.
EDIT: I use html forms.
You can position the text on top of the input field to make it look as if it is inside it. Something like this:
<input type="text" name="year" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">19</span>
This way your input field will start with "19" which can not be edited, and the user can add information behind this.
Basically what you do is set the input field to a fixed width, so that you know how much negative margin-left to give the span with your text in it in order for it to be positioned exactly at the start of the input field.
You might need to fiddle with the margin-left of the span depending on the rest of your css.
Then also adding pedding-left to the input field, to make sure the user starts typing after your text and not under it.
font:inherit should make sure both your text and the text typed by the user are in the same font.
And if you want to put anything to the right of this input field, do add margin-right to the span with your text, as otherwise other content might start running over your input field as well.
seems a little weird to me ..why not just use a text output and afterwards the input field?
like sometimes used for the birthdate (although, maybe not anymore..)
birthyear: 19[input field]
edit:
with some javascript stuff you could realise something like that you asked for, though
an input field with text and catching keystrokes within that field while only allowing some after what you want to be always there - but, well, you would need to use js ..and if its just for that, Id rather say its not necessary
edit:
if you want to use a trick just for the viewer you could use a background-image/border-style that surrounds a text and the input field, thus making it look like text and input are the same input-box.
Sounds like you want placeholder text. In HTML5 you can set the placeholder attribute on any input element. This will work in modern browsers.
<input type="email" placeholder="jappleseed#appletree.com" name="reg_email" />
Now, for older browsers this won't work. You'll need a JavaScript alternative to provide the same UI value.
This can work for all browsers:
<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">
but it's not recommended because there is a better way (really, it's a combination of the first two approaches): Use HTML5 markup for new browsers; jQuery and modernizr for old browsers. This way you can have only one set of code that will support all user cases.
Taken directly from webdesignerwall.com:
<script src="jquery.js"></script>
<script src="modernizr.js"></script>
<script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
</script>
[You'll need both jquery.js and modernizr.js installed in the same folder as your webpage.]
Note: I have a feeling that a little more research might reveal that modernizr isn't needed for this at all, though I could be wrong about that particular point.
Perhaps, then, you want a select menu?
<select name="mySelectMenu">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Sorry if this isn't what you want either. I'm grasping at straws because what you are asking for is very vague. Maybe you should give an example of what one of these 'editable but not editable' inputs would be used for.
Also, you could use a select and a text input.
The main problem is to determine the position of the cursor. This can be done e.g. using the following function:
function getCaret(el) {
var pos = -1;
if (el.selectionStart) {
pos = el.selectionStart;
}
else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r != null) {
var re = el.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
pos = rc.text.length;
}
}
return pos;
}
Now you can install an event handler for the key press and check whether the pressed key was inside the immutable part of the value of the textarea. If it was there the event handler returns false, otherwise true. This behavior can be wrapped into a simple object:
function Input(id, immutableText) {
this.el = document.getElementById(id);
this.el.value = immutableText;
this.immutableText = immutableText;
this.el.onkeypress = keyPress(this);
}
function keyPress(el) {
return function() {
var self = el;
return getCaret(self.el) >= self.immutableText.length;
}
}
Input.prototype.getUserText = function() {
return this.el.value.substring(this.immutableText.length);
};
var input = new Input("ta", "Enter your name: ");
var userText = input.getUserText();
You can check it on jsFiddle (use Firefox or Chrome).
I came up with this:
```
if (e.target.value == '' || e.target.value.length <= 3) {
e.target.value = '+91-';
}
```
Is it possible to set the selected attribute of an option tag via a CSS class?
I'm wondering if something like the following is possible in a stylesheet:
option.selected {
selected: true;
}
Then in HTML:
<option class="selected">
Which would have the same effect as setting the selected attribute. Is this technique possible?
Nope, CSS only alters the presentation, not the content (although CSS3 does support some modification of content, but not the selection of values.) You'll need to use JavaScript if you can't modify the HTML directly.
option[selected] {background-color:skyblue;color:white;}
in case you want to show the previous marked selection - independend of the changes from the user after displaying a result, the old selected remain sykblue, the new changes are in darkblue.
Not via CSS, but it can be accomplished via javascript.
function setSelects() {
var allSelects = document.getElementsByTagName("select");
for (var i = 0; i < allSelects.length; i++) {
for (var j = 0; j < allSelects[i].options.length; j++) {
if (allSelects[i].options[j].className == "selected") {
allSelects[i].selectedIndex = j;
}
}
}
}
window.onload = setSelects;
As other people have pointed out, I'm not sure why you'd want to do it via a CSS class in the first place.
If you use JQuery then you can do something very much along those lines, but not CSS on its own.
Yes it is possible, but I am not sure about IE
Below code will change style for default selected item.
<style>
option[selected="selected"] {
color:red;
font-weight:bold
}
</style>
<select>
<option value="1">Txt</option>
<option value="2" selected="selected">Another Txt</option>
</select>
Selected is not a CSS property. See the spec at http://www.w3.org/TR/CSS2/propidx.html.
I have three select boxes.
<div style='float: left; padding-right: 10px;'>
<select size="10" name="company_id">
// a lot of options here
</select>
</div>
<div style='float: left; padding-right: 10px;'>
<select size="10" name="department_id" id="department_id">
// a lot of options here
</select>
</div>
<div style='float: left; padding-right: 10px;'>
<select size="10" name="user_id[]" id="user_id" multiple>
// a lot of options here
</select>
</div>
They are floated next to each other. When you select an item in the 1st one, an ajax query updates the values of the 2nd one.
What happens in Firefox and most other browsers is that it changes in size and pushes the 3rd one away. But in IE (6.0 and 7) the 2nd one changes size but it does not push the 3rd one away.
What i had done is to fix the size of the boxes but i want to fix this correctly, so anyone know how?
Here's the JQuery code i use to add the data to the departments select.
$.get("ajax/fetchDepartment.php?sec=departments&company_id="+company_id,
function(data){
$("#department_id").html(data);
});
data contains the <option>Stuff</option>'s needed
EDIT to add: The select boxes always have some value within them.
Here's a picture of what happens (i had to remove the items in the boxes via photoshop but you get my point)
selcet bug http://cznp.com/select_bug.jpg
IE and select options have certain 'quirks' (some, regarding select boxes and innerHTML are detailed here) about them that I've never really fully understood, but I can at least provide you with a workaround.
The trick is to add the options exlicitly to the select box, not just change the entire html of the select element wholesale. So the following works:
function changeval() {
var option = document.createElement("option");
option.text = 'my long text value to change stuff';
option.value = 'test';
$('#department_id')[0].options.add(option);
}
While this does not:
function changeval() {
var data = '<option value="test">my long test string with wide stuff</option>';
$("#department_id").html(data);
}
You might find this page helpful -apparently he fixed it by just retouching the innerHTML, so that might be a simpler option. Up to you.
The solution from the second link would look like:
function changeval() {
var data = '<option value="test">my long test string with wide stuff</option>';
$("#department_id").html(data);
$("#department_id").parent()[0].innerHTML += '';
}
try putting an option inside the selects on start. I guess u only start filling the second and third select when u selected something from the first.
I've had problems with empty selects in IE so just put an
<option value="-1">-</option>
in the 2nd and third select to start with.