I just start using bootstrap and I have used https://github.com/designmodo/Flat-UI as flat UI design.
Currently I just added https://github.com/Eonasdan/bootstrap-datetimepicker as my datetimepicker. But it seem both css have been fighting with each other.
I able to click on the button of datatimepicker. It straight display the time at the textbox without letting me choose from the dropdown menu (that it should appear). I believe flat UI from designmodo have override the dropdown menu for specific class but too bad I have no idea which part to fix this problem.
Anyone have met the same problem like me? Please guide me from here.
You probably got your answer. But I faced similar issue. I am using https://bootstrap-datepicker.readthedocs.io/en/latest/ and https://github.com/Eonasdan/bootstrap-datetimepicker. Components aren't the same, but I faced same issue. After some analysis, there is a css conflict. Both of them create class .input-group-date. So there's no fight as you mention, but based on css rules(Two css files defining same class), order of css files will define which class will stylize the component and you will have one of components not working properly.
Related
I'm trying to insert a datepicker in my angular 4 app but I've faced some dificulties.
So I tried this kekeh/mydaterangepicker but I need to have this design:
I tried to modify the css of the plugin in my css but without real success. I cant succed to change the color of first selected node and last selected node to follow my design.
My actual state:
If someone can help me.
I can also start from scratch but I don't know how to properly create a datepicker in angular.
The styles of the component can be changed by overriding the existing styles.
Read documentation and follow the instructions. The library documentation also provides you with examples.
Also you you might want to use Angular material datepicker
It is very convinient to work with it and it has bunch of other useful components.
I am looking to add bootstrap or flatui styling to my ExtJS 5 app. Now, i have done some investigation and tried a few things
Just including bootstrap css and js files directly in app index file. This doesn't work well because extjs default styling seems to override the bootstrap styling. And also, the way sencha buttons and other components are created they have multiple nestings so even if bootstrap styling didn't get overridden, it still wouldn't work well.
Picking up extjs-bootstrap-theme from extjs 4 and adapting it to 5. Only issue with this, it will have very limited bootstrap styling as this is built as a sencha theme.
Has anyone had any experience with this? What would be the best way to go about it? Thanks
If you use ExtJS, you should embrace the ExtJS theming system and guidelines.
As per them, the best way would be to derive a new theme from ext-theme-crisp or ext-theme-neptune, for which you overwrite documented CSS variables and create a new iconset to make the new theme match the look of bootstrap/flatui as far as possible. Only then, when this comes to an end and changes are still required, you can add JS code or custom CSS.
While ExtJS has over 500 CSS variables, my guess is that you would have to change between 20 and 100 of them to make it match very closely.
You should start with the most general variables from Global_CSS like $base-color, and then proceed to the more detailed variables, which are often derived from the general variables. So in the best case, you can skip 100 of them because you already changed $base-color to the correct value.
I am trying to use a bootstrap theme (Worthy) as the base for a website. The theme works very well, however I am having problems adding this scrolling timeline feature to it.
Here's what I know:
I can get the demo of the timeline working
I can get the template working
I can get the timeline implemented in the template w/ the .css working
I CANNOT get the animations of the timeline working in the template
I have traced the issue to one of the timeline's required files, namely a customized version of modernizr. (The template uses the standard version of modernizr). When I remove the the reference to the custom modernizr, the site generally works, but the timeline animations do not. When I add the reference to the custom modernizr back in, all of the site's content disappears.
Does anybody have any suggestions of how I can go about diagnosing and debugging the problem? I know that I have not posted any code, as I'm not sure what is and is not relevant. If somebody can please point me in the right direction, then I can follow up with more targeted questions.
UPDATE: I have also tried removing the template's version of modernizr and only using the one from the timeline, but that also results in all of the site's content disappearing.
Thanks a lot!
Modernizr has an build tool that you can customize to be exactly what you need it to be. What you would want to do is get a list of all of the detects that you need, then build a new custom one that contains everything.
right now I'm building a site using Pete R.'s 'onepage-scroll.js' plugin you can find
HERE.
I'm also using Bootstrap and what I want to do is hiding bootraps horizontal nav-bar when on the first 'site' and show it on all the other 'sites' (by sites I mean the different sections this plugin uses). My first idea was to create something like a .hideit css-class and tell jQuery to overwrite it whenever the visible section is not the first, but after trying it for hours I can't find the solution - hope you can help me!
I am developing a search form which displays a number of categories and sub-categories. The client has requested that I do not use cascading dropdowns but to display radiobuttons instead so that the user can see the top level categories at a glance.
I had a bit of a look around for any javascript plugins that might give me a head start and save me from having to write all of the code from scratch but didnt come up with too much.
Can anyone suggest a good plugin that will allow me to display a radio button list in a hierarchical collapsible tree structure?
Cheers,
Tristan
Solution
I ended up using this plugin and adapting it to my own needs -> http://code.google.com/p/checkboxtree/
There is a great jQuery plugin called jsTree.
http://www.jstree.com/
I personalize it for my needs as well.