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...
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 attempting to modify the width of the ninja form text inputs on my wordpress site. I am able to call each individually by id with:
#ninja_forms_field_6 {width:25%; min-width:250px;}
However, I would like to do so by class. However, I can't seem to figure out the correct class to call. I have looked at the source code and it displays:
<input id="ninja_forms_field_6" data-mask="" data-input-limit="" data-input-limit-type="char" data-input-limit-msg="character(s) left" name="ninja_forms_field_6" type="text" placeholder="First Last" class="ninja-forms-field ninja-forms-req " value="" rel="6" />
<div id="ninja_forms_field_6_error" style="display:none;" class="ninja-forms-field-error">
</div>
When I've tried to use:
.ninja-field ninja-forms-req {width:25%; min-width:250px;}
Nothing seems to happen. In particular, my css editor doesn't seem to like the space between ninja-field and ninja-forms-req. I've found some other answers that indidcate these are two separate tags, but I still can't seem to get the text inputs to respond to my inputs. I should note that I am using the "Simple Custom CSS" plug-in to make changes to CSS. Any help in advance would be appreciated. Thanks.
Try .ninja-field.ninja-forms-req.
When targetting multiple CSS classes on the same element you need to separate them with periods.
I found this to work really well with ninja forms and their issue with the width of buttons in some themes. This also solved my problem using the custom css plugin. Just use the height according to your theme button height.
.ninja-forms-field {
width:100%!important;
height:50px!important;
}
This question already has answers here:
Turn off iPhone/Safari input element rounding
(11 answers)
Closed 9 years ago.
I'm using Twitter Bootstrap.
Here's a fiddle with my code. And here's the opened Github Issue
I have implemented a search input with an appended button, per the Bootstrap docs. My HTML for the form is shown here
<form class="form-search text-center" method="get" action="#">
<div class="input-append">
<input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1">
<button type="submit" class="btn"><i class="icon-search icon-large"></i> </button>
</div>
</form>
For some reason, when viewing the form on mobile (i.e. iPhone 5) the search box appears as displayed in the screenshot below:
When I view the search form in a desktop browser and resize it to "mobile size," the search box appears correctly as shown in this second screenshot (disregard the lighter border and size difference):
--------- QUESTION ---------
How can I prevent the search input from displaying incorrectly as in the first screenshot? And what could be causing this? I've looked at the source and computed styles for both search inputs, and everything appears to be the same. Help?
If I change the input type="search" to type="text" the problem does not exist, so it's got to be somewhere in the CSS, but I can't figure it out. What CSS actually applies this effect?
--------- UPDATE ---------
If I switch <div class="input-append"> to <div class="input-prepend"> the search input displays correctly. Also, when the field has focus, the rounded corner on the right turns "square" and appears correctly.
Looks like you can not. See this link
webkit html5 search inputs
quote:
WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit "no matter what", as in, you can't even fight against it with !important rules.
In others words, Safari will ignore your styles, and apply the standard look.
I am using bootstrap 2.0 within my rails app (using the bootstrap-sass gem) and am having trouble getting a submit button aligned with a cancel button.
Here's the code snippet from the form in the html.erb file:
<div class="span3">
<%= f.submit class: "btn btn-primary" %>
<button type="button" class="btn">Cancel</button>
</div>
Here's the HTML it produces:
<input class="btn btn-primary" type="submit" value="Add Person" name="commit">
<button class="btn" type="button">Cancel</button>
And here's what it looks like in firefox 14.0.1. When I look at the
Note: Adding input-append to the div gets me close (see pic below) but is still off a bit--note that cancel is still a bit lower and that the rounded corners on the right side of the add person button are cut off.
How can I get these two buttons to align properly?
Update
I am using Firefox 14.0.1. When I look at the jsfiddle created by #Vestride to duplicate this problem here's what I see:
I am happy with the first result, but when I add the exact same code to my site, I don't get the same result. Instead I get the messed up alignment above. I wonder what this means? Maybe that my CSS for bootstrap is messed up?
Update 7/27
In response to Vestride's latest suggestion, here are the buttons as they show in my Firefox from the fiddle Vestride put together. Note, there's no improvement with changing from input to submit.
I made a jsfiddle http://jsfiddle.net/Vestride/YT3sq but was unable to duplicate your problem. They align perfectly for me (Chrome 21). What browser are you using? In the second example I added a btn-group class to the container element. That might also solve your problem.
Edit:
Try making your <input /> a <button type="submit">. Worked in Firefox for me. I updated the fiddle too.
I know it's an old issue, but using Bootstrap 4 I had the same problem. What solved it for me is adding margin-bottom: 0 or mb-0 class using bootstrap classes on the submit button.
I have a search textbox and two image buttons on a page I created with ASP.NET.
When I look at the page with either IE8, Google Chrome or Opera, the textbox does not align with the two image buttons. The buttons appear higher than the textbox and I can't tell why.
Here is the key markup:
<div id=searchbar>
<div id=Panel1
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
<input id=txtSearch type=text name=ctl00$txtSearch>
<input id=btnSearch title=Search src="Test_files/search.png"
type=image name=ctl00$btnSearch>
<input id=btnAdvanced title="Advanced Search" src="Test_files/adv.png"
type=image name=ctl00$btnAdvanced>
</div>
</div>
NOTE: I realize there are a few strange things here such as no quotes around the ids. But there ARE quotes around them in my source. The above snippet is from saving the content from IE and it made a number of changes to the markup.
I also posted the same code at http://www.blackbeltcoder.com/Test/Test.htm if anyone would be willing to take a look. The issue is with the search controls to the right of the black bar near the top.
Thanks.
Try
vertical-align:text-bottom;
on the elements that are too high. It's a common problem. You can try out other options for that CSS property too if that isn't quite right. Have a look here
just add
vertical-align: middle;
to the the input tags css and that should solve the issue