EDIT: when I load my page on local with no CSS files, the date picker works just fine. How do I doctor my css / bootstrap less files to get them to leave the date picker alone???
Im running this on up to date chrome desktop with some bootstrap styling thrown in. Chrome desktop supposedly has date picker support, and the chrome date picker input UI displaying, and the arrows are working, however the drop down carrot that displays the calendar is really buggy (doesnt always display). Some days it drops down, other days it doesnt. Any idea what could be going on? I've tried removing all of the bootstrap and other css, divs etc, till buggy. This is a backend part of the site, and as such it doesnt need cross browser support, and I'd rather not further pollute my javascript with more jquery...
<div class="col-sm-3">
<div class=form-group><label>Created After</label>
<input class="form-control" type="date" name="created" style="color: #000000;">
</div>
</div>
You could use a datepicker for bootstrap: Bootstrap Datepicker
I used it for a project I worked on, didn't cause any problems. Documentation is provided, if you're not using bower, you can just add the Javascript and CSS file to get it working.
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 am working on adding custom CSS styling for my checkboxes via Awesome Bootstrap Checkboxes and have them actually showing up in the grids with them initially being checked or unchecked properly via JSON data being read...
the issue is when I go to change the value. The values are updating properly from when shown to when hidden.
However, instead of just the checkmark disappearing in the checkbox, the entire checkbox disappears and the only way for me to get it back is to change the value of the back to ui-grid-cell-focus manually through F12 debugger in the browser.
It appears something is not set up right with them, but I haven't been able to pinpoint exactly what he issue is yet...any help would be appreciated.
Cell Template:
cellTemplate:
`<!-- .blueCheckbox --> <div class="checkbox checkbox-primary"> <input type="checkbox" class="ng-scope" value="true" name="select_item" ng-model="row.entity.Name" /> <label></label> </div> <!-- end .blueCheckbox -->,`
Got them working...Had to enable the checkboxes and move them underneath the overlay and they worked fine...weird because its totally different from how it normally works...
I'm using Chrome 41 on OS X. A live example will illustrate much more easily my issue: http://mathieumarques.herokuapp.com/.
If you scroll down to the Experiences section, you can see a leading space in front of each paragraph, even if I force text-indent: 0;. I can however add a negative value for the text-indent property.
I don't have this issue on Firefox.
The tabs/spaces/character in the markup are causing it.
Removing them fixes the issue.
Old:
<div class="lead timeline-body ng-scope" ng-transclude="" ng-bind-html="item.description"><p>
Web development with Django and jQuery.
Porting of a desktop C++ application to the
Web. Realization of a single page
application, with vectorial drawing on
mouse events.
</p>
New:
<div class="lead timeline-body ng-scope" ng-transclude="" ng-bind-html="item.description"><p>Web development with Django and jQuery. Porting of a desktop C++ application to the Web. Realization of a single page application, with vectorial drawing on mouse events.</p>
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
I've got an ASP.NET 4 app being developed and tested against http:// localhost/mysite - I spent a while looking into a problem with Twitter Bootstrap buttons in Firefox (v12.0) where they looked weird.
However I noted that, when testing, if I swapped the URL and changed 'localhost' for my machine's FQDN (e.g. http://mymachine.mydomain.com/mysite) then it worked normally and as expected.
This is kinda good news because it means that there isn't a "bug" as such that I have to fix but I'm curious about why it's happened in the first place.
The weird behaviour is as follows:
The 'button' is marked up as follows (in this case, a <a> to look like a button):
<p><a class="btn btn-success" href="checkout.aspx"><i class="icon-shopping-cart icon-white"></i> Checkout</a></p>
I also have the same behaviour when using a 'real' button, marked up as follows:
<p><input type="submit" name="ctl00$cphMainContent$btnProceedToCustomerDetails" value="Next: Your details" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphMainContent$btnProceedToCustomerDetails", "", true, "", "", false, false))" id="cphMainContent_btnProceedToCustomerDetails" class="btn btn-primary" /></p>
In both cases, the buttons render in a grey, unreadable state and then sort of 'fill up' in green colour when you hover over, until it is about 75% filled up and then stops filling up.
Here's some images
The <a class="btn btn-success">
On load (before mouseover)
When you put your mouse over it, it fills up with colour from the bottom up in about 0.5 seconds, finishing up looking like this:
The <input type="submit" class="btn btn-primary">
On load (before mouseover)
After mouseover, again it fills up with colour from bottom up, in about 0.5 seconds, and looks like this:
Like I say, this only happens when using Firefox, and only when looking at localhost. Other browsers are fine. I am using a freshly downloaded copy of bootstrap.js (downloaded today) with no amendments, I only include one other css file, and even when I don't include it, it's the same behaviour.
I ran into this problem earlier today. This link: twitter bootstrap button changes rendering oddly in firefox and chrome helped me.
In my css, I applied the following:
.btn-primary, .btn-danger, .btn-success { background-image: none; filter: none;}
It worked. My pages now render correctly in firefox. Chrome worked fine for me.
After lots of efforts, I was finally able to pin down this issue to a specific CSS-Hack in Twitter Bootstrap.
Removing * (asterisk) from *background-image of btn-primary and other similar classes resolves this issue.
But the problem itself is not in the CSS. It has got to do with the implementation.
For example, I was using AjaxMin to minify and combine CSS and since *property is not a valid CSS, Ajaxmin was ignoring it rendering the final CSS without those properties. Buggy button effects being one such side-effect.