I want to change my website to React. So I am changing the normal bootstrap to React bootstrap. I have just a simple question, what's the equivalent of Bootstrap visible-xs in React bootstrap? Like in simple bootstrap we have 'hidden-xs' and we use xsHidden in Reactboostrap.
Just ran into that today! visible-xs went away in bootstrap 4, and react-bootstrap 1.0 now uses bootstrap 4. The same is true of hidden-xs (and in all of the various sizes... hidden-sm, hidden-md, etc.)
In my case <Row className="visible-xs"> becomes <Row bsPrefix="d-block d-sm-none">
The bootstrap documentation has a nice table on how to convert to the new styles
Related
I am migrating from react-bootstrap v0.32.4 to v1.0.0-beta.5 and it is written in the migration guide that Panel has been replaced by the Card component.
However, I cannot find anything in the new documentation of Card similar to the old Panel.Collapse from v0.32.
How can the following (from v0.32.4) be done with react-bootstrap v1 by not mixing clean JSX code with plain bootstrap css classes (e.g. accordion)?
<Panel>
<Panel.Heading>
<Panel.Title toggle>Click Me</Panel.Title>
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>Collapsible Body</Panel.Body>
</Panel.Collapse>
</Panel>
It took a bit of digging, but I found this link:
https://react-bootstrap.github.io/utilities/transitions/#collapse
where it appears to have extracted the Collapse logic out of Panel and put it into it's own component, managed by boolean state.
I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.
I am working on a angular material application. i have a page where i need to list number of languages. i am using md-grid-list instead of conventional ul and li.
However when the page loads/refreshes the list gets overlapped for a fraction of second before it gets displayed properly.
Code
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
it would be great if anyone can share a solution for this.
Try to put ng-cloack as an attribute of the "md-grid-list".
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
The order in which you are loading your css,js dependencies could be causing this problem.
If you can move your material library dependency closer to the initial loading of the page, it may fix this. You could test this by putting jquery and material libraries inside your html head as one of your first dependencies to load. These dependencies being global to your app or just on your component can also cause this to happen. Again, you can test that with the previously mentioned approach.
I have also fixed a flavor of this problem naturally by using *ngIf in a div container wrapper around my html and that seemed to allow the dependencies for the site to load prior to showing any content. I would still try rearranging my dependencies, though.
I use the Bootstrap Select Plugin to create an extended select with input field and multiple selectable options. I use it in an Angular 1.5.3 application set up with ui-router. It does not work in the view where I need it. The code I include in that view:
<select name="jobdomainTeamId"
class="form-control selectpicker"
data-live-search="true"
multiple=""
style="display: none;"
ng-model="data.detailView.jobDomain.teams"
ng-options="team.id as team.displayName for team in data.detailView.teams"
>
<option value="">No selection</option>
</select>
The attributes 'selectpicker' and 'data-live-search' should trigger Bootstrap to dynamically create a node that provides the extra functionality. But nothing happens when I add this to the Angular view - the select is not visible (style="display: none;").
But when I add the exact same code to index.html, commenting out the ng-view
<!--<div ui-view="body"></div>-->
Here the select works - extra DOM nodes are generated and functionality is as expected.
I included all necessary stuff - Boostrap.css, bootstrap-select.css,jquery-2.1.1.,bootstrap.js and bootstrap.select.js
It occurred to me there might be a conflict between angular dependencies and Bootstrap - I include
angular.module('app',[angular-storage','ui.bootstrap','ui.router','ui.router.modal','xeditable','angular-confirm'])
Does anyone have a clue what might block Bootstrap css / js here??
Turns out that mixing JQuery + Bootstrap.js with Angular.js is asking for trouble.
Bootstrap (via JQuery) works by 'grabbing an element and modifying it'. Angular also modifies the DOM element - is an Angular directive (as well as an browser-native DOM element). What I tried to achieve is impossible this way and i ended up using an Angular library (ui-select) that does what I want.
you defined style='display:none' in your select so it's working as expected. if you want to hide it use the directive ng-hide instead, in some case you should use angular UI for specific actions
I was struggling with the same issue. This methods helped me. Hope it help someone else also
Install jquery on your angular project.
npm i --save-dev #types/jquery
import jquery to the component.
declare var $: any;
run the below code on ngOnInit
ngOnInit(): void {
$('.selectpicker').selectpicker('refresh');
}
Hi I have been using Angular ui bootstrap time picker and its working fine. But, the up and down arrow - chevron icons are missing. Its seen as shown in the screenshot. I inspeacted element and changed "icon-chevron-down" to "glyphicon glyphicon-chevron-down" and its working fine.
But, as I am using bower and dynamic html ("bootstrap-timepicker": "~0.3.0", and "bootstrap-ui-datetime-picker": "~1.2.1"), I am not sure how can I edit this and update glyphicon class?
I am sure, I need to create a custom template to override the following in my html:
From bootstrap-timepicker.js:
templateContent = '<table>'+
'<tr>'+
'<td><i class="icon-chevron-up"></i></td>'+
...
But, I am not sure what id I should be using to create my template?