I have a react-bootstrap-table like that:
<div>
<BootstrapTable data={this.state.results} striped hover condensed options={this.options}>
<TableHeaderColumn dataField="VERSION" isKey={true} dataSort={true}>Version</TableHeaderColumn>
<TableHeaderColumn dataField="DATASTAMP">Data</TableHeaderColumn>
</BootstrapTable>
</div>
When I load data to my table and my rows get a long sentence or more info than row expected my table got horizontal scrollbar. I haven't problem with that, I will handle it later, but my headers are still the same size and do not fit to my table. Maybe you know solution for that?
Did you add react bootstrap table styles?
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
Related
I am trying to add perfect-scrollbar to vuetify's data tables. So I have to wrap the data table inside the perfect-scrollbar component like this -
<perfect-scrollbar>
<v-data-table :headers="headers" :items="data" />
</perfect-scrollbar>
The problem is that its also wrapping the data-table footer. I want to wrap only the data of table within perfect-scrollbar component. So that only data is scrollable and footer remains there.
Now it looks like this -
Actually no need to use perfect-scrollbar here.
You just set the height to v-data-table. Then the component automatically sets the scroll bar.
As the example,
<v-data-table :headers="headers" :items="data" height="200px"/>
Try with it.
Hello I am making a multi-select in Vue and my problem is I don't get the exact data from the selected items
Here is my code
<multiselect v-model="itemValue"
:show-labels="false"
:options="itemObj"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:hide-selected="true"
:preserve-search="true"
label="itemName" track-by="itemName"
:preselect-first="true"
placeholder="List of Items"
#select="selectItem($event)">
<template slot="selection" slot-scope="itemValue"></template>
</multiselect>
<!---- TO SHOW THE CURRENT SELECTED ITEM ID --->
<pre>{{itemValue.map(a => a.id)}}</pre>
when I try to select an Item in the selection, right in the <pre> I'm able to see the selected Item ID but when I try to console.log(itemValue) it will not show anything but if I will select another item, there must 2 selected items now which is being shown in <pre> but in my console.log(itemValue) it will just show the first selected Item.
Does anyone know how can I get the exact selected items so I can able to search using this kind of filter because basically, I will use this as a search filter.
THANK YOU!
see this codesandbox for a working sample: https://codesandbox.io/s/1yml74p9xj
there were some issue's in your code, but you can see the sample how to get it working. 3 files to look at:
App.vue (were the multi select is added to vue globally)
index.html (import of css for style)
HelloWorld.vue (for the code)
in my sample, the selectedItems contains the items that were selected/unselected from the vue multi select
Never had this issue before. Go to this website. As you can see, "sss" and "sssss" are put in two divs with class "col-xs-*". They should appear on same row, not sure why it's not working.
your "menuDiv" has float: left and that ruins the flow
either remove that, or add a float to the "mainDiv" as well
as You are using XS-Xtra small , column type it will display as column on XS-devices for general use Use
<div class="col-7">your content
</div>
<div class="col-5">your content
</div>
I'm using the
VuetifyJs
for VueJS and I'm trying to display checkbox in table format from an array of objects.
Desired Output shown below :
When 'All Users' is checked all the checkboxes should be checked.
I created a row layout and divided this row into two flex boxes so I have the structure of row with two columns. I loop using 'v-for' and for every row display the value of the current index and the next index. But the last entry is repeated the next time the loop is iterated. The closest I could reach is as shown below:
CodePen Url: https://codepen.io/dhnsh/pen/ZRMgoE
I also tried to use table instead of layout and flex but could not make it. In the codepen I use the function 'checkLength' to get the next index because incrementing the 'index' with pre-increment operator gives error(probably due to array goes out of bounds).
I am struggling with the below queries :
1) How can we display the desired output in Vuetify ?
2) Is there anyway to iterate 'v-for' with increment of "2" like we can do in Javascript ?
ex:
for(var i=0;i<array.length();i += 2)
You should put v-layout outside of v-for
<div class="mr-4 ml-4 whiteback userGroupHeight">
<v-layout row wrap>
<v-flex v-for="(category,index) in types" :key="types[index].text" xs6>
<v-checkbox light :label="category.text" v-model="category.selected">
</v-checkbox>
</v-flex>
</v-layout>
</div>
then you don't need to use checkLength method.
Demo: https://codepen.io/ittus/pen/ZRqYME
I am using bootstrap in a fairly straightforward way, and I have a color specified in my row divs, e.g. which colors the entire row with the danger color, but on the desktop, I am only populating about 6 col-md's worth of data, and the extra color extending past where the actual data is displayed, looks funny.
On mobiles its fine, because the actual data is taking up the full row.
So, I want to be able to apply the background color to only col-md-8 of my rows when the web page is displayed on a desktop.
I tried adding the background to the individual cells, but since each of the cells is not a uniform height that didn't work either.
I tried specifying the row as being only col-md-8, but then that affects the size of all the other columns.
Do I just have to accept that I will have to change the md column sizes to take into account that they are now in a col-md-8 row?
Is there an easy to accomplish what I want?
Here is a sample of the code:
<div class="container">
<div class="row bg-danger">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
There are only 7 columns of data, but the danger background is on the whole row.
Ah, now I see what you are after. Just take the target row and make it display:table; then you can get the equal height columns with display:table-cell;
jsFiddle here
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
Note: You can put this inside a media query if you only want the effect to happen at a certain screen size. (see this fiddle)
You could use your own CSS classes, to accomplish what you need.
Also, you could add the col-lg-6 class to the row.
Post your HTML code, otherwise it's really hard to help