I'm a very beginner at react-native. I'm trying to design like the image given below. But can't make the red marked part. Can anyone help me to solve this by saying what CSS property should I use to design this part? I know I have to use border-radius but can't reach out what would be the other property for making the appropriate design like the image given.
Take a look at the box-shadow property (Docs here)
.card {
border-radius: 10px;
height: 100px;
width: 200px;
box-shadow: 0px 5px 6px -1px #58585838;
}
<div class="card">
</div>
Can you put your code so we can see where's the problem?
But you can use these properties to change it:
borderBottomRightRadius:value,
borderBottomLeftRadius:value
Example:
borderBottomRightRadius:10
Related
I'm assuming this happens due to certain components taking longer to render on occasion, causing the browser to scroll to its position when it eventually renders?
I've searched around and tried using a scrollTo(0, 0) function at the end of my app.js, but is this the best way to deal with this issue? It works on most browsers but doesn't solve the problem on Firefox.
Here is the main app function that calls all the react components:
function App() {
return (
<div>
<ParaDiv>
<Nav />
<Fade>
<Splash />
</Fade>
</ParaDiv>
<Section2 />
<Card1></Card1>
<Fade>
<Popular />
</Fade>
</div>
);
}
There are several reasons why that happens, and it could be a symptom of a much bigger problem which can cause serious performance issues down the road. You can use tools like React DevTools/Profiler and see what components are causing unnecessary rendering, and then try and use hooks like useCallback/useMemo to solve that. Using Styled components within the functional component can cause similar behavior, even some css styling can cause that as well. I think it's better to find the root cause rather than look for a quick fix.
I would suggest using skeleton loaders instead, it is better practice.
Simple example found on Google:
https://codepen.io/ishaqzain/pen/yRMQOd
html
<div class="container">
<div class="post">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="post">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="post">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
css
// forked from https://codepen.io/viktorstrate/pen/yoBRLy
$base-color: #F4F4F4
$shine-color: rgba(229,229,229,0.8)
$animation-duration: 2.0s
$avatar-offset: 52 + 16
// this unfortunately uses set px widths for the background-gradient, I never got around to changing it to work with all widths :(
#mixin background-gradient
background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px)
background-size: 600px
body
margin: 0
.container
height: 100vh
display: flex
flex-direction: column
justify-content: center
align-items: center
.post
width: 220px
height: 80px
.avatar
float: left
width: 52px
height: 52px
background-color: #ccc
border-radius: 25%
margin: 8px
#include background-gradient
animation: shine-avatar $animation-duration infinite ease-out
.line
float: left
width: 140px
height: 16px
margin-top: 12px
border-radius: 7px
#include background-gradient
animation: shine-lines $animation-duration infinite ease-out
.avatar + .line
margin-top: 11px
width: 100px
.line ~ .line
background-color: #ddd
#keyframes shine-lines
0%
background-position: -100px
40%, 100%
background-position: 140px
#keyframes shine-avatar
0%
background-position: -100px + $avatar-offset
40%, 100%
background-position: 140px + $avatar-offset
Maybe a few other things to mention, not actually an answer:
The scrollToTop should happen while the content is relatively "fixed", so nothing slides around that can change document height while scrolling up
you have to scroll to the top while loading new content, because if it's there you already want the user to be right there
you don't want the user to look at the "old" content while scrolling up, so you could make it disappear of put a modal layer over it, that prevents the user from clicking around
to show something like the skeleton loader from #Dorwey is a good idea, but that has to happen right after the click and then scrolling up
I am devolping app using angular js and ionic framework. I want to show border right only for odd numbers.
Here is my code:
<div class="media-body" style="padding-bottom:25px;">
<h2 class="align_center">{{services.name}}</h2>
<a href="#job/{{services.id}}">
<h2 class="align_center_des">{{services.description}}</h2>
</div>
</div></div>
Here is the Css
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
border-right: 1px solid #E4E4E4;
margin-bottom: 31px;
height: 144px;
}
Here is fiddle:
https://jsfiddle.net/asetkL0n/
CSS also allows you to target specific odd or even elements. An example to that could be:
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
margin-bottom: 31px;
height: 144px;
}
.col-32-custom:nth-child(odd) {
border-right: 1px solid #E4E4E4;
}
wherein, inside that nth-child, you can pass, "odd","even","2n","2n+1", or any expression in n.
I think the best solution is to use ng-class, so you have to create a class that will only add the border right.
I presume you are in an ng-repeat loop so the code will look like
<div data-ng-class="{border-right: ($index%2)===0}" class="col-32-custom">
Here you have the condition for the even number ($index%2)===0 so the div will have border-right class on event number.
you can use ng-class-odd / ng-class-even within ng-repeat to add specific classes to this items.
example here : ng-class-odd
How can I changed the height of md-toolbar in material design?
http://jsfiddle.net/kostonstyle/gsroofa5/
On the first toolbar I want a height from 30px and tried that:
<md-toolbar style:"height: 30px;">
But it does not work at all. I need a navbar with two bulks, that because of two toolbar.
I try this, but now letter disappear.
http://jsfiddle.net/kostonstyle/r178sp9o/1/
You can use an inline style like this
<md-toolbar style="min-height:30px">
Use min-height to make the toolbar smaller
The height of the toolbar can be changed by adding the classes to the md-toolbar.
For a medium sized toolbar add class="md-medium-tall"
For toolbar bigger than the normal add class="md-tall"
You can also inline style the toolbar style="height:50px;"
The accepted answer did not work for me. Here is how I got it working in my Angular Material app:
<mat-toolbar color="primary"
style="min-height: 30px !important; height: 30px !important;">
This worked for me on Angular 8. Put this code in your scss
.mat-toolbar {
min-height: 50px !important;
height: 50px !important;
}
.mat-toolbar-row {
min-height: 50px !important;
height: 50px !important;
}
Replace 'mat' with 'md'
If just setting the min-height doesn't work, like it didn't work for me, you will also have to add in max-height with the same value:
HTML
<md-toolbar class="toolbar"></md-toolbar>
CSS
.toolbar {
max-height: 30px;
min-height: 30px;
}
I have a website running on a mapping platform called Ushahidi. The default template is quite boxy so I was fiddling with the CSS and rounding everything off using border-radius.
It has helped with other elements but the map is such a square it won't ease up!
It might be that it's not possible, wondered if anyone here had any experience of this. The html using inspect element and view source are different. Not sure what this means exactly but guessing that the html is pulled in by the map provider?
Here is the html on view source:
<div class="map " id="map"></div>
<div style="clear:both;"></div>
<div id="mapStatus">
<div id="mapScale"></div>
<div id="mapMousePosition"></div>
<div id="mapProjection"></div>
<div id="mapOutput"></div>
</div>
I've added a screen of inspect element HTML too. Looks like it's using "Open Layers". I've heard of that but don't fully understand whats going on.
Is it possible to round the edges of my map? Here is the site if that helps: http://tinyurl.com/c8djrvr
Apply the border-radius to two layers.
CSS
div.map {
border: #999 1px solid;
width: 800px;
height: 366px;
position: relative;
height: 650px;
border-radius: 25px; /* ADD THIS */
}
#OpenLayers_Map_11_OpenLayers_ViewPort {
border-radius: 25px; /* ADD THIS */
}
It works. Use however many pixels you want. I used 25px.
I would suggest more general and safer CSS selectors (since ID #OpenLayers_Map_11_OpenLayers_ViewPort is generated by OpenLayers and it's value is unpredictable; and OL 2.12 and older produce ID's, that contain dot and are therefore unsuitable for CSS selectors):
.olMap, .olMapViewport {
border-radius: 25px;
}
I want to implement the multiselect combo box in my program. Means If I will select multiple names through check box then all selected names will be fall in that combo with comma separated... I want a sample example... Could you please help me..
Use this user extension. Examples page.
you can use combobox plugin Ext.ux.Andrie.Select. For demo :
http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm
I have Implemented Checkcombo without using any extra plugin or file.
You just need to add image checkbox image in css
And CSS Reference
.chkbox {
height: 13px;
width: 13px;
background: transparent url(please see checkbox image) no-repeat 0px 0px;
float: left;
margin: 4px 5px 0 0;
}
.x-boundlist-selected .chkbox {
background-position: 0 -13px;
}
See the demo in JSFiddle