I'm trying to create a scrollable list of components inside another component. I'm using a card view to contain my info. When I try the following code, I get a weird result with the scrollable view.
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ContentListController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- Global decleration for the Content Id selected -->
<aura:attribute name="ContenList" type="Content__c[]"/>
<div style="max-height: 400px;overflow-y: auto;">
<aura:iteration items="{!v.ContenList}" var="store">
<c:ContentCard content="{!store}" duration="1" />
</aura:iteration>
</div>
</aura:component>
The result I get is this where the scroll bar is all the way off in no-man's land.
I was looking for this where its an invisible scroll or at least on the left without all that padding.
Your div is taking all available width while your cards (c:ContentCard) are having their widths limited somehow. That's the reason why you have the gap between your cards and the scroll bar.
I would recommend you to:
1) Remove the width limit from the ContentCard component and;
2) Delegate to a higher component the responsibility to organize the distribution of components on the page. You can control the structure of components with slds-grid and slds-col lightning classes.
</lightning:card>
Use the Lightning cads.
For Your Refrence
https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example
Related
I am creating a table with data. Want pagination like this attached image in the footer.
Left-hand side I want the numbers and right-hand side Results per page.
Probably you have to use the combination of Pagination and Table pagination. And hide the unused panels with the CSS.
<div className={classes.root}>
<Pagination count={10} variant="outlined" shape="rounded" />
<TablePagination
component="div"
count={100}
page={page}
onChangePage={handleChangePage}
rowsPerPage={rowsPerPage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</div>;
I have created a sample codesandbox (This is just a workaround) - https://codesandbox.io/s/material-demo-forked-wmm4z?file=/demo.tsx:891-1225
Let me know if you need more help.
As #Tejogol mentioned you can use the Material UI table example pagination and change it.
You can store the current page number in a state variable and add a different style to the corresponding navigation field. The style seems like a simple border with a small border radius (1-3px).
For the results per page you can use React spacers. Don't forget to update the current page number when changing the results per page.
I'm working on fixing some responsive design issues with a sidebar component in React, and one problem with it is that the label text on the tabs gets wicked scrunched up on smaller screens. I want to hide this text but I can't seem to find a good way to do it.
I've tried replacing the label text with a div that is hidden via bootstrap on small/x-small screens, but that doesn't work
<Tab
icon={<Icon className="material-icons geometry">category</Icon>}
label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
Ideally this text should go away on smaller screens but it just acts as though I hadn't put anything there at all. In fact, any bootstrap classes I try to add to that div seem to have no effect. How might I go about fixing this?
If you are using Material UI, you can use Hidden tag to hide label based on mobile viewport. When you use tag 'Hidden' with prop xsDown, the label will be hidden at or below xs breakpoint.
<Tab
icon={<CategoryIcon ></CategoryIcon>}
label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
https://codesandbox.io/s/wispy-bird-vftel?fontsize=14
I have a div with 2 text boxes.
<div>
<input ... />
<input ... />
</div>
Issue is they get displayed below each other.
NOTE: I am not using React-Native, not using Flex.
How can I place them next to each other ?
Answer 1: Use Flexbox (or grid which is even more powerfull). Both of these are very powerful and wonderfully adaptive to the screen.
Answer 2: Use the hack that was used to do this before, using float. Give each of the input elements a style of float: left and add one div after with a css styling of clear: all, which will make it so the parent div has the correct height.
I need to figure out how I can have different views(html+css) for a component. A lot of people say that it's better to have multiple components for each for each of those views and then use a service to interact but my case is as follow:
I have a controller with a view that is basically a layout. Say my layout has 3 panes on top and one pane in the bottom. Now I have button in my view to change the layout to two panes on top and two panes on the bottom. So basically my data does not change. Its just a change in the html and css.
also if the first layout is filled with some data I dont want to change it or reinitialize it when changing the layout since the change is only a change on layout not the data.
I have difficulty figuring out how I can achieve this in angular2. Any ideas?
so you want to add html and css or just change the actual template?
If you just want to change the actual html , i personally suggest that you use states instead of different views. And based on the states move the html around. I had the same issue myself and i solved it by rethinking the layout and ended in finding a simpler layout structure.
Hope this helps.
Enjoy coding.
You can have two views in one template and switch between them by setting a flat:
<div *ngIf="firstLayout">
<!-- first layout -->
</div>
<div *ngIf="!firstLayout">
<!-- first layout -->
</div>
I'm using the Angular.js 'ng-grid' data grid and am trying to make its behavior responsive. When I resize the screen I'd prefer the grid columns to become stackable automatically as opposed to keeping the grid a fixed width.
I've found a few links mentioning a defunct ngGridLayoutPlugin that all lead to a dead end on GitHub. I've also seen other grids like angular-deckgrid but I'm not interested at this point in changing grids.
Is there anyway to make ng-grid responsive?
I found a solution to this that worked nicely. The native Bootstrap table has a class that can be applied named table-responsive (see: http://getbootstrap.com/css/#tables-responsive). The application to a standard Bootstrap table is to wrap it in this class. The responsive nature is one if the screen gets smaller the table itself will get scroll bars but not the entire page.
You can wrap a ng-grid with this same class and achieve the identical behavior:
<div class="table-responsive">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</div>
If you test this with and without the <div> wrapper containing the table-responsive class you can see the difference between the scrollbars wither being just on the table/grid (responsive), or when not using it, the entire page scrolls (not responsive).