I want to do the exact same thing of what this CSS styling suggests in react native
So how can I convert this CSS to React -native
.grid {
display: flex;
flex-direction: row;
list-style: none;
padding-left: 0;
flex-wrap: wrap;
margin-top: 0;
margin-bottom: 20px;
width: 400px;
}
.grid-item {
flex-grow: 0;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
height: 100px;
background: rgba(0,0,0,0.1);
width: 33%;
}
.grid-item:nth-last-child(-n+3) {
border-bottom: none;
}
.grid-item:nth-child(3n+0) {
border-right: none;
}
.list {
display: flex;
flex-direction: column;
list-style: none;
padding-left: 0;
width: 400px;
}
.list-item {
flex-grow: 0;
border-bottom: 1px solid #000;
height: 60px;
background: rgba(0,0,0,0.1);
flex: 1;
}
.list-item:last-child {
border-bottom: none;
}
<ul class="grid">
<li class="grid-item">
</li>
<li class="grid-item">
</li>
<li class="grid-item">
</li>
<li class="grid-item">
</li>
<li class="grid-item">
</li>
<li class="grid-item">
</li>
<li class="grid-item">
</li>
<li class="grid-item">
</li>
<li class="grid-item">
</li>
</ul>
<ul class="list">
<li class="list-item">
</li>
<li class="list-item">
</li>
<li class="list-item">
</li>
<li class="list-item">
</li>
</ul>
I want to make a Modal which looks like this:
<Modal>
<BrandsGrid />
</Modal>
<Modal>
<ModelsList />
</Modal>
I need to define BrandsGrid and ModelsList and do something exactly similar to that CSS styling in React-native
So example codes will be more helpful for understanding I have referred the docs but couldn't get much help from that
You can use different modules for converting css components to react native. For example:
https://www.npmjs.com/package/css-to-react-native-transform
Another great example:
https://github.com/kristerkari/react-native-css-transformer
Related
I'm trying to make a drop-down menu that opens by click. I am trying to use the target property how below for this, but in vain. Could someone suggest how to fix the code?
:target + .parent > ul {
display:block;
position:absolute;
z-index:9999;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: black;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
:target + .parent > ul {
display:block;
position:absolute;
z-index:9999;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
background-color: black;
}
.child li a {
color: #FFF;
color: red;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
/* left: 100%;
top: 0;
margin-left:1px;
*/
}
li:hover {
background-color: red;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
color: red;
}
nav {
margin: 0 auto;
display: table;
text-align: center;
}
nav ul {
text-align: center;
}
<nav>
<ul id="menu">
<li class="parent">
CAT 1
<ul class="child">
<li class="parent">
<a href="#">Video Games <span class="expand">
▼</span></a>
<ul class="child">
<li>Car</li>
<li class="parent">
<a href="#">Bike Race<span class="expand">
▼</span></a>
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
</ul>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">
CAT 2
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">
<a href="#">Fun Puzzle<span class="expand">
▼</span></a>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">CAT 3
<li class="parent">CAT 4
<li class="parent">CAT 5
<li class="parent">CAT 6
<li class="parent">
CAT 7
<ul class="child">
<li>Battery Toys</li>
<li class="parent">
<a href="#">Remote Toys <span class="expand">
▼</span></a>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
</nav>
You need to reference your child element, which should be displayed on click, in your anchor by setting an ID like #child-1: CAT 1
Add child-1 as ID to your child element, so that your anchor and your child are "connected". <ul class="child" id="child-1">. Now this child element will be addressed by the :target selector, when the anchor is clicked
Since the target selector addresses the child-element, your CSS can look like this ul:target { ... }.
Note: Keep in mind that IDs must be unique for each anchor/child pair.
Source with an executable example: https://www.w3schools.com/cssref/sel_target.asp
Additional: You want to implement a nested dropdown in your code. I'm not sure if this nested behavior is possible to be implemented in pure CSS, because you can not address the parent element in CSS, and therefore you have no chance to keep the parent(s) displayed, while the child is shown. If someone has any idea, please let me know!
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: black;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
ul:target {
display:block;
position:absolute;
z-index:9999;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
background-color: black;
}
.child li a {
color: #FFF;
color: red;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
/* left: 100%;
top: 0;
margin-left:1px;
*/
}
li:hover {
background-color: red;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
color: red;
}
nav {
margin: 0 auto;
display: table;
text-align: center;
}
nav ul {
text-align: center;
}
<nav>
<ul id="menu">
<li class="parent">
CAT 1
<ul class="child" id="child-1">
<li class="parent">
<a href="#child-1-1">Video Games <span class="expand">
▼</span></a>
<ul class="child" id="child-1-1">
<li>Car</li>
<li class="parent">
<a href="#child-1-1-1">Bike Race<span class="expand">
▼</span></a>
<ul class="child" id="child-1-1-1">
<li>Yoyo</li>
<li>Doctor Kit</li>
</ul>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">
CAT 2
<ul class="child" id="child-2">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">
<a href="#child-2-1">Fun Puzzle<span class="expand">
▼</span></a>
<ul class="child" id="child-2-1">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">CAT 3
<li class="parent">CAT 4
<li class="parent">CAT 5
<li class="parent">CAT 6
<li class="parent">
CAT 7
<ul class="child" id="child-7">
<li>Battery Toys</li>
<li class="parent">
<a href="#child-7-1">Remote Toys <span class="expand">
▼</span></a>
<ul class="child" id="child-7-1">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
</nav>
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 1 year ago.
I am trying to create a flexbox container that contains a list of items in a row format and then each of those items will be a flexbox with items in a wrapping column format. However, it seems that the first containers rows do not expand to fit the contents of the wrapping columns and end up overlapping each other.
Demo
I want the end result to look like this:
.flex-group {
display: flex;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
.red li {
background: red;
}
.gold li {
background: gold;
}
.blue li {
background: deepskyblue;
}
.flex-item {
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-group">
<ul class="flex-container blue">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>
<ul class="flex-container red">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
</ul>
<ul class="flex-container gold">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<div>
So at the end of the day, I'm looking to have a non-wrapping row where each of the child elements (dynamic amount) can contain a set of column wrapping elements (dynamic amount). Note: You can almost get the solution if you make the .flex-container have flex-direction: row but I need flex-direction: column since order does matter in this scenario. The main container needs to have a fixed height and each child container can have a dynamic width (due to wrapping elements causing them to grow horizontally).
If you will use grid, you can use this:
.flex-group {
display: flex;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
display: grid;
grid-template-rows: repeat(3, auto);
gap: 10px;
grid-auto-flow: column;
height: 500px;
}
.red li {
background: red;
}
.gold li {
background: gold;
}
.blue li {
background: deepskyblue;
}
.flex-item {
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-group">
<ul class="flex-container blue">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>
<ul class="flex-container red">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
</ul>
<ul class="flex-container gold">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<div>
There are a lot of similar question but no answers. I think a workaround can satisfy your needs. Include a script to calculate the width depending on the height you assign to each flex-container and the flex-item height:
check it out here
I had to fix the height to 400px to get the same output as yours but this script will calculate number of cols and lines needed. Couldn't get the padding properly though so I set a variable that will get me the desired output
document.querySelectorAll('.flex-container').forEach((e)=>{
let p = 10 ;
let childCount = e.childElementCount;
let childHeight = e.children[0].clientHeight ;
let childWidth = e.children[0].clientWidth ;
let lines = Math.round((e.clientHeight / (e.children[0].clientHeight + 2*p))) ;
let cols = Math.round(childCount / lines) ;
let width = cols * ( 2*p + childWidth );
e.style.width = width+"px";
});
Still if you want a column based display for your items similar to Pinterest then you need to specify in advance the number of columns and use Masonry Layout :
.masonry-container {
column-count: 3;
column-gap: 15px;
}
.masonry-item {
display: inline-block;
width: 100%;
}
I'm not sure I got this, but it sounds like you don't want your columns to be in 'wrap' mode.
You may try to change those values:
.flex-container {
/* leave the rest of what was here*/
flex-wrap: nowrap;
height: 100%;
}
This is what I thought you want to achieve:
I am creating a menu using an unordered list that mixes list items of different sizes, some are half the height and width of others. They all float left. What I'm getting is this:
If I add clear:left to the third small item I get this:
What I want is for the second and fourth (or third and forth) small items to float below the other two, like this:
Is there a way to do this with css? The menu is created dynamically so forcing a particular position won't work, it needs to be able to flow into the proper position.
Would having multiple <ul/> work for you ? If so, the following Codepen would work : https://codepen.io/anon/pen/qPaVar
Same code as an embedded code snippet :
ul {
list-style : none;
padding: 0;
margin: 0;
text-align: center
}
li {
margin: 0
}
li.left {
float: left
}
div.small {
background-color: blue;
width: 20px;
height: 20px
}
div.large {
background-color: yellow;
width: 40px;
height: 40px;
}
<ul>
<li class="left">
<div class="large">A</div>
</li>
<li class="left">
<ul>
<li class="left">
<div class="small">1</div>
</li>
<li class="left">
<div class="small">2</div>
</li>
</ul>
<ul>
<li class="left">
<div class="small">3</div>
</li>
<li class="left">
<div class="small">4</div>
</li>
</ul>
</li>
<li class="left">
<div class="large">B</div>
</li>
</ul>
Hope this helps!
Try the grid-auto-flow: dense
https://developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow
try this
.main li {
display: inline-block;
vertical-align: middle !important;
width: 200px;
height: 200px;
border: 1px solid;
}
.inner-div li {
width: 99px;
height: 89px;
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
float: left;
text-align: center;
}
ul.inner-div {
list-style: none;
padding: 0;
}
<div class="container">
<ul class="main">
<li>div 1</li>
<li>div 2
<ul class="inner-div">
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
</ul>
</li>
<li>div 3</li>
</ul>
</div>
I want to style my unordered list like this one below
Link to what i want to achive
My structure looks like:
<div class="tabs">
<ul class="tabs__labels">
<li class="0">
<a class="active" href="#">
<img/>
<div>something</div>
</a>
</li>
<li class="1">
<a class="" href="#">
<img/>
<div>something1</div>
</a>
</li>
...
</ul>
</div>
Is it a good idea to name the list classes like 0,1 etc. and style them separately to somehow achive this effect? How to use flexbox to get similar effect? Should i group them into rows?
Would this be a start?
.tabs__labels {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
.tabs__labels li {
flex-basis: 45%;
margin: 20px 0;
padding: 0;
}
.tabs__labels li:nth-child(odd) {
display: flex;
justify-content: flex-end;
}
.tabs__labels li:nth-child(even) {
display: flex;
}
.tabs__labels li:nth-child(3),
.tabs__labels li:nth-child(4) {
flex-basis: 35%;
}
.tabs__labels li a {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid red;
text-decoration: none;
}
.tabs__labels li:nth-child(1)::before {
content: 'some text';
text-decoration: underline;
margin-right: 10px;
}
.tabs__labels li:nth-child(2)::after {
content: 'some text';
text-decoration: underline;
margin-left: 10px;
}
<div class="tabs">
<ul class="tabs__labels">
<li>
<a class="active" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
</ul>
</div>
I'm completely stuck and have been struggling with this for days because I'm not a developer and just learn from forums.
I cannot modify the li classes with the price and table, restriction on code blocks to generate this from my ecommerce platform. I would like to get the results displayed in two rows, qty on top and price on bottom.
96 150 300 450 600
8.06 7.66 7.26 6.86 5.97
li.QtyTabQty {
display: inline-block;
/* text-align: right; */
border-right: 1px solid #fff;
/* width: 100%; */
/* float: right; */
/* width: 100%; */
}
li.QtyTabPrc {
display: inline-block;
text-align: right;
border-right: 1px solid #fff;
/* width: 100%; */
float: right;
}
<ul class="none">
<li class="QtyTabQty">96</li>
<li class="QtyTabPrc">$8.06</li>
<li class="QtyTabQty">150</li>
<li class="QtyTabPrc">$7.66</li>
<li class="QtyTabQty">300</li>
<li class="QtyTabPrc">$7.26</li>
<li class="QtyTabQty">450</li>
<li class="QtyTabPrc">$6.86</li>
<li class="QtyTabQty">600</li>
<li class="QtyTabPrc">$5.97</li>
</ul>
if you want use lists you can do with flexbox:
.none {
display: flex;
flex-flow: column wrap;
/* height is required */
height: 50px;
}
.none li {
list-style: none;
flex: 1;
/* Modify padding as required */
padding: 0 7px;
}
<ul class="none">
<li class="QtyTabQty">96</li>
<li class="QtyTabPrc">$8.06</li>
<li class="QtyTabQty">150</li>
<li class="QtyTabPrc">$7.66</li>
<li class="QtyTabQty">300</li>
<li class="QtyTabPrc">$7.26</li>
<li class="QtyTabQty">450</li>
<li class="QtyTabPrc">$6.86</li>
<li class="QtyTabQty">600</li>
<li class="QtyTabPrc">$5.97</li>
</ul>
Another option...pretty close to what you already have.
li.QtyTabQty {
display: inline-block;
position:absolute;
}
li.QtyTabPrc {
display: inline-block;
float:left;
margin-top:30px;
margin-right:10px;
}
<ul class="none">
<li class="QtyTabQty">96</li>
<li class="QtyTabPrc">$8.06</li>
<li class="QtyTabQty">150</li>
<li class="QtyTabPrc">$7.66</li>
<li class="QtyTabQty">300</li>
<li class="QtyTabPrc">$7.26</li>
<li class="QtyTabQty">450</li>
<li class="QtyTabPrc">$6.86</li>
<li class="QtyTabQty">600</li>
<li class="QtyTabPrc">$5.97</li>
</ul>