I am using bootstrap-select to add the search function to my selects in my bootstrap project. It works great but what I can't stand about it is that it transforms the select from the default styling and basically applies the 'btn-light' style to it. So it looks completely different than the rest of the inputs and I HATE IT and I can't figure out how to change it.
Does anyone have any ideas? The easiest the best =)
This looks terrible!
Add data-style='' and data-style-base='form-control' to the select element.
Related
I'm using this package
https://reactdatepicker.com/#example-select-time-only
Which style look like this originally:
And I'm trying to customize the select dropdown for time, and want it to look like this:
I only modified the style in the browser to show my desired style, but I can't apply it in my actual style since that style is coming from the node_modules folder. And I guess we don't want to directly modify anything inside the package's own files.
Is there some CSS trick to do this change? On the the documentation, I don't think there is a prop available to pass to the datepicker component in order to achieve the look that I need.
You can add your styles in your main CSS file and try using !important - it's going to work.
H ello, everyone!
I have a problem with styling md-tab
It looks like this by default:
This is what it should look like:
What I am trying to achieve is:
use styles from material theme or colors from it (ng-colors)
update background of active/inactive elements (as in the second picture)
Here are some thoughts:
CSS modifying doesn't seem to be right in this case because I want to rely on theme colors.
md-primary class assignment doesn't work on md-tab for some reason (don't understand why)
md-colors assignment doesn't work for the same reason, I suppose.
probably, I will have to create some custom tab components instead of these and then style them. I am not sure if it is right in my case.
Question. Is it possible to style md-tab the way I described?
Thanks!
The fastest and easiest way to do this is via updating css like this
md-tabs .md-tab {background:white; margin-left:20px}
md-tabs .md-tab.md-active {background:#006E7B; color:white !important}
md-ink-bar {display:none}
I think the title is a bit vague but my vocabulary is limited in english. I'll try to explain what I want to do.
I have two CSS files from products I have no control ( are not mine ). Lets say AdminLTE bootstrap and a JQuery plugin.
The problem is the Box class is in both styles.
and messing my flight indicators from the JQuery plugin. I know I have to choose the order of CSS style files or add important to one of them but I'm afraid of start to mess with my bootstrap interface.
Is there any other way to solve this?
I know I have to choose the order of CSS style files or add important to one of them
you don't, you could simply write a selector with higher specificity which would override the jQuery plugin styles, like body div.instrument .box
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 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)