I am using some features of Boostrap 4 that are not supported or planned to be supported in ng-boostrap--namely a card layout.
I tried including the bootstrap .css per normal, but now a button group I am using loses its styling. Can these coexist, and if so, how?
The top is using the normal styles: class="btn btn-light active". The bottom is a straight cut-and-paste from the Button Group reactive sample on the ng-bootstrap site. As you can see it is pretty mangled.
Ok; got it all sorted:
As JB Nizet mentioned, you still need to include the .css.
I had included NgbModule in my root AppComponent,
but not my other component. That is why it wasn't working. Once I
made that change it all started working, including the what seemed like a missing class attribute.
Related
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I have a problem when using md-buttons, md-select or md-field in a vue project created by the vue CLI from the webpack template.
I have a MWE of the situation here, featuring the three introduction examples from the vue material website on each type of form item combined with the vue-cli template. It doesn't look very nice, but if you run it it breaks down as follows:
The first row are a set of radio buttons; however, the buttons are invisible (yet you can click on them, get a ripple effect and the correct value is recorded by vue)
Next is a select box; however, the background of the box is transparent.
Finally there are a few text boxes; however, the outlines seem to be transparent.
I can solve the issue with the select boxes by inserting a style block
<style>
.md-menu-content-container {
background-color: white;
}
</style>
and that will make md-select work as expected. I still decided to include it here, because it seems related to the other issues and may have a common origin.
Unfortunately, I have not figured out how to solve the other issues yet or which attribute to modify to "patch" the problem. So any help or pointers are highly appreciated.
It appears that when using he latest version of vue-material, the default template has to be loaded explicitly. Hence adding
import 'vue-material/dist/theme/default.css'
to the main.js file from vue-cli seems to fix this issue.
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
I am using Primefaces 5.0.I want to use or bootstrap css to Primefaces custom components like List, table, selectOneListbox.
I am to apply css to normal component like button, link etc.
It's possible, but due to reason that a internal structure of Primefaces's components are different from a plain HTML components with which Bootstrap supposed to work you will need to make hard job to accomplish that. You will need to debug every Primefaces component to see its internal structure and change Bootstrap's css file that it will correspond to internal classes of Primefaces's component.
Actually you have three alternatives (maybe more):
Like BalusC mentioned, Primefaces has its own implementation of Bootstrap theme: you can see it here: http://www.primefaces.org/themes IMHO, best option
Use Bootfaces JSF library: http://www.bootsfaces.net/ Pay attention that it's pretty new library and possible buggy. There isn't big community support like for Primefaces library.
Make you own Composite (or Custom) Components with desired structure and styling.
I been trying to loose the style that the custom jqueryui.css uses for Tabs, but I can't find the piece of code that just get it working, and not style it. Anybody knows what exactly the css is, removing everything but the css to get it working?
The jQuery UI CSS theming are built up around the classes named ui-*. For example:
ui-widget
ui-widget-content
ui-corner-all
And for tabs you get: ui-tabs
Open up the .css to see what they do.
I don't think you can remove all the classes and just have the functionality, since most of them are needed for tabs to work.
If I were you and wanted to remove all the styling, I would edit the .css and make small changes and see what happens. For example, remove the default font, background-color etc. When you are pleased with the result I would keep the remaining classes as they are and build your application around them.
I hope this helps.
I had a similar question once, and a user was kind enough to provide me with a minimal example. See the comments on Vertical "tab" component on jQuery UI site (JSfiddle here)