I'm having a graphical problem with a select box in a page of my website.
The problem is that the option elements of the select is showing inline instead as a drop-down selection. This strange behaviour becomes only if I render the select element inside a form element. (??I don't know why??)
The HTML output produces:
<form name="add-user-form" method="POST" action="/index.php/admin/happen/add"><p><select name="day" required><option value>d</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</p>
</form>
is a valid html5 markup, checked on w3c website.
this is an image showing the problem..
I omit the php code for now, somebody know this problem?
As we said in the comment, the issue is due to a CSS class using the following :
form[name] * {
display: inline-block;
}
Related
I have a weird styling problem that does not seem be resolved no matter what I do. When I inspect the page and look at the elements I can see the 'width' of the div is correct but the actual select does not go to the correct width even tho I have data-width set and you can see it in the inspect tool also.
Here is the code:
<div class="search-box search-box-dark">
<form asp-action="post">
<div class="select-default">
<select
name="scale"
id="scaleID"
class="selectpicker"
data-width="100%"
asp-for="scaleId"
asp-items="Model.scl"
data-live-search="true">
<option value="">Choose Scale</option>
</select>
</div>
Adding form-control to the class also makes the div go to the correct width with a background but the 'button' that is visible in the inspect tool is not wide engough.
Try removing
'''class="select-default"'''
from div and see if select width property works!
Dudes, I have a bootstrap file on my mvc with tons of styling and it's working, but when I try to add a custom styling to a custom class, it just doesn't work. Here is an example:
<div>
<form onsubmit="return false;">
<select id="themeDropdown" name="themeDropdown" class="themeDropdown"
#*style="border-radius: 4px;
background: white url('../Content/themes/base/images/dropdown_arrow2.png') right no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
padding-right:35px;
margin-bottom:2px;
border:none"*#>
<option value="Ugly_Default">Orangered & Gray</option>
<option value="Redmond">W & B</option>
.
.
.
</select>
<input id="submitTheme" type="submit" value="Change theme" class="btn btn-default" onClick="return false;">
</form>
</div>
So when I apply my style directly (currently commented), it works. When i do .themeDropdown in the bootstrap (example below), it doesn't recognize it in "Inspect element". Even when I type it as a class intellisense shows up! What the ...?! Same goes for all my other styles (code is Razor) - scaffolded classes are working fine, and my custom classes are not.
.themeDropdown{
.
.
.
}
I know there are many topics about that, but most of them have "class starts with number" problem, which is obviously not the issue. Please assist!
FOR THE PEOPLE WITH THE SAME PROBLEM: Your source isn't updated. Switch its folder to app_data for example, then return it in its original folder. That should help.
We found the solution - check next-to-last comment under my question.
marcias comment
You should check if the stylesheet you are referring to is attached to the document and if so, it is up to date. I recently had a problem, when the browser cached the linked CSS and it had used an old version of the file. If you are using Google Chrome, use the "Sources" tab.
I have a multiple selector in my view which works as expected except when I reset the list using JavaScript.
Before the list is reset there is no vertical scrollbar and after it has been reset lots of empty space is added below the views footer creating a vertical scrollbar and I don't know why this empty space is appearing.
Here is a before screenshot of my view:
And this is the after screenshot when the reset list button has been clicked:
The steps I take when causing this issue are:
Select one or more items in the list
Click reset list button
Chosen multiselect refreshes correctly, but the CSS issue occurs
My code decleration, which works fine minus the unexpected CSS behaviour, is as follows:
<select id="chosenMultiSelect" multiple="multiple" >
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
<option>Item 6</option>
<option>Item 7</option>
<option>Item 8</option>
<option>Item 9</option>
</select>
<button id="btnClear" class="btn btn-default">Reset list</button>
<script type="text/javascript">
$(document).ready(function () {
$('#chosenMultiSelect').chosen({ width: '100%' });
$('#btnClear').click(function () {
$('#chosenMultiSelect').val('').trigger('chosen:updated');
});
});
</script>
Other information:
I have tested this in IE, Chrome, and Firefox, and it only seems to happen in IE's browser (versions 9, 10, and 11).
This issue doesn't occur if I click the reset list button BEFORE items are selected in the multi selector.
Update 02/11/2015
I have experienced this in other situations now. For example using it as a single select inside a Bootstrap Modal which would (not always but sometimes) result in loads of overflow being added to the page.
Has nobody else experienced this and do you know what is causing it? could it be other CSS defined somewhere etc.
Decided to have another look at this and found that somebody had reported a similar issue on the GitHub page.
I tried updating the version I was using from 1.0 to 1.5.1 and this didn't work, however the issue raiser did provide a CSS work around which doesn't completely resolve the problem but provides a much better solution but is dependent on different screen sizes.
Here is the CSS code that needs including...
.chosen-container .chosen-drop {
overflow-y: auto;
max-height: 400px;
}
bharos who raised the issue and provided the work around also provides the following comment
This is a workaround, as I understood that the chosen dropdown, when
in hidden state is having a large size, when it has large number of
options. So when we restrict the max-height this doesn't happen. Make
this max-height to a comfortable value according to your requirements.
But this is an issue which needs to be addressed from chosen, this is
just a workaround.
I have strange IE behavior on cursor property css?
Here is the code, this is just simple inline style to show what is the problem?
<div style="width:100%;">
<select>
<option value="">Select</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
</select>
</div>
<textarea style="cursor:not-allowed;"></textarea>
All i working OK in Firefox and Google Chrome, only in IE is the problem, when option get over textarea cursor change style to not allowed? Please take a look at fiddle here but only in IE?
Working fiddle
http://jsfiddle.net/f6paL8sc/
It seems this is a IE related Bug. I've made a solution and it works *(*IE required a .cur file to work ); but lets check the DEMO first.
In this example I used disabled attribute to disabled the textarea because you are using cursor:not-allowed which gives a impresson of that field is disabled.
Download this PNG image and convert it into (.cur) using this Online tool
Here is the CSS used.
textarea[disabled]
{
display:block;
cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute25.gif'), url('cute25.cur'), wait;
background:gold;
}
In HTML code I disabled the textarea which makes more sense here.
<textarea disabled>This TextArea is disabled</textarea>
NOTE: I haven't got chance to test on IE but it must work.
On my site css file i have it so all form input backgrounds (textareas, dropdowns etc) have a background color black attribute.
However on one page I'm trying to do a color section dropdown, with the background of each option a different color, eg: blue
This works, when the dropdown is opened, but when i select it, it doesnt show the background color in the currently selected field. Im not sure if the CSS is overriding it or what.
Anyone know how to bypass this?
(Tried to explain best I could)
This is in my css file:
input,textarea,input,select,input,checkbox {
font-size:12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#98925C;
background-color:#000;
border:1px solid #413E22
}
and the code im using on my html page to make the form:
<select size="1" name="color">
<option value=blue style='background-color:blue'>blue</option>
<option value=red style='background-color:red'>red</option>
</select>
etc
When the <select> is open, you are seeing the <option> elements and their respective background colors. When you select an option, the <select> element closes its options, leaving you looking at only the <select> element. It makes sense that the <option> background-color does not affect the closed <select> element.
That being said, this looks like a solution:
<select onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">