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.
Related
I'm using Clarity and Bootstrap together in an Angular project, but styling conflicts seem to be popping up, as the styling is not working as intended.
I've tried changing the CSS around in Chrome devtools. I noticed that reboot.scss might be causing some of the problems, but I don't know what to do about that if it is.
Here's the component code.
<h3>New Post</h3>
<form #productEditorForm="ngForm" clrForm>
<clr-select-container>
<label>Location</label>
<select clrSelect name="Location" [(ngModel)]="LocationID">
<option *ngFor="let location of Locations" [value]="location.ID">{{ location.Name }}</option>
</select>
</clr-select-container>
<clr-input-container>
<label>Images</label>
<input clrInput #files type="file"/>
</clr-input-container>
<button class="btn btn-primary" type="submit">Post</button>
</form>
The expected appearance of the selectbox is like the examples found here. The expected appearance for the button is like the primary button found here; the font size of the buttons is supposed to be .5rem, but the actual size is 1. The intended default font is Metropolis, but the actual font is Segoe UI. The page isn't supposed to have flickering scrollbars and jittery contents, but the actual page does. Where do I go from here?
There are many Angular carousel implementations (this one is built upon Bootstrap but is able to be used in an isolated way https://ng-bootstrap.github.io/#/getting-started) and they would be able to provide the necessary functionality.
If you do load Bootstrap, you would want to load it before Clarity so Clarity has the final say on the styling.
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;
}
I'm using twitter bootstrap classes in my angular project. For a dropdown menu the styles work fine in Chrome but when I load it into IE 11, it does not style properly. In particular the dropdown arrow button.
Has anyone else had this issue with IE? How would I resolve this? Please see a comparison photo below of my issue.
My html section below as well, any comments welcome thanks in advance!
<select class=" btn btn-default" ng-options="obj for obj in data.finding"
ng-model="gapSection.finding" >
<option value="">Please select</option>
</select>
I just solved for IE using :
select::-ms-expand {
border:none;
background:#fff;
}
Source
Add this on your css file
select::-ms-expand {
display: none;
}
I think you should use bootstrap class form-control on HTML tag select for it to render correctly:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Bootstrap 3 drops support for Internet Explorer 7, but you can add it back by simply adding conditional CSS called bootstrap-ie7.css.
here is the download link:: https://github.com/coliff/bootstrap-ie7
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.
I am using Twitter Bootstrap for Rails, in a 3.2 app, and am not seeing the checkboxes appear.
If I look at the same page in just straight HTML (with checkboxes hardcoded in, and using the regular Bootstrap assets) it works fine.
The HTML code is produced correctly, I believe...e.g.:
<div class="field">
<div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
</div>
Here is the Rails Code:
<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>
Here is a live example. Right beside the text "List square footage", should be a checkbox. Scroll down to amenities, and there you will see a list that obviously should have checkboxes.
This doesn't work in development either.
Not quite sure why it's not showing up.
Thoughts?
Looks like uniform.js is setting the opacity of the checkbox to 0.
Try disabling uniform.js if you're not using it.
Update: It also looks like you're getting a 404 on a sprite image? Probably a uniform theme sprite image?
GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found)
Another Update: This is definitely the problem. Uniform works by making the opacity of the input 0, so that it's invisible, but still clickable, and changing up the markup a little bit, so it looks like this.
<div class="checker" id="uniform-listing_amenity_ids_4">
<span>
<input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
</span>
</div>
And it sets a css rule on div.checker span:
div.checker span {
background-image: url(../img/sprite.png);
}
That image is missing, so the input appears to be invisible.
actually the problem in you have the check boxes but its hidden, due to the margin property
input[type="checkbox"] {
float: left;
#margin-left: -20px;
}
so remove or change the margin size
see below, FF with firebug
$('input[type="checkbox"]').css("visibility","visible");