I am having a hard time finding out how to fix the column size in only one column of my CSS grid.
The item inside is a 60px x 60px clickable icon and I want the description (next columns) to be 1fr.
But I want the fist column to remain 60px width.
any help would be appreciated
`
.wrapper-portfolio {
margin-top: 5px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
grid-template-rows: 1fr min-content;
}
And I don't know what to search to fix individual columns`
Try grid-template-columns: 60px repeat(6, 1fr);
Basically means "from left to right", it is 60px width, followed by 6 of 1fr.
Related
I am developing a React Native app using Expo and I am using Styled Components.
At boot, it downloads a list of languages via an API and the flags of those languages are displayed on a selection screen.
I'm using flex-wrap so, right now, I have 6 languages, three rows, 2 flags in each row.
I am trying to figure out how to use flexbox so that the flags are spaced evenly in both directions.
I'm using flex-wrap and get even-spacing on the row.
How do I do the same column-wise, bearing in mind that the quantity of flags is dynamic?
I'd like the screen of languages to have even-spacing around the flags, both vertically and horizontally.
Ill suggest you doing that via Dimensions,
const screenWidth = Dimensions.get("window").width
Suppose you want to render 3 flags in a row and column can be N
so each Flag suppose takes up const eachWidth = (screenWidth-(gutterSpace+marginHorizontal))/3
Now so basically your marginHorizontal can be used as marginVertical so that all things are properly spaced.
const marginHorizontal = 20;
const gutterSpace = 10;
//Flag view
<View style={{width:eachWidth, margin:marginHorizontal}}/>
Hope it works, feel free for doubts
Could adding align-items: center work? Perhaps also setting height: 100vh if you're making a selection screen.
section {
display: flex;
flex-wrap: wrap;
height: 100vh;
align-items: center;
}
div {
box-sizing: border-box;
padding: 8px;
width: 50%;
border: 1px solid black;
text-align: center;
}
<section>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
</section>
I understand if I use v-badge, I get a circle badge but I want a triangle badge instead like below.
Could anyone give an advice of how to make it?
Thank you.
You could use the v-badge's badge slot to insert a div with 1, and style that div
In the template, apply a class to v-badge (named "triangle"), and insert a div in the badge slot to contain the number along with a class (named "my-badge"):
<v-badge class="triangle">
<template v-slot:badge>
<div class="my-badge">1</div>
</template>
</v-badge>
Add CSS styles for the .triangle .v-badge__badge and .my-badge:
.triangle .v-badge__badge {
/* remove border radius to allow icon to fill space */
border-radius: 0;
/* use a clip-path to form a quirky triangle */
clip-path: polygon(100% 51%, 0 0, 3% 100%);
height: 30px;
width: 30px;
}
.my-badge {
display: flex;
justify-content: center;
align-items: center;
padding-right: 0.9em;
font-size: 14px;
height: 100%;
color: #fff;
background: green;
}
demo
The green nav bar behind the parent element is positioned as fixed .
And the fixed elements are suppose to break out from the document flow .
But when I am assigning position:fixed; [withot any top,left,right,bottom], then it should be starting from the top-left pixel of screen.
But no it is starting from a very odd position [it's taking margin-top:100px]
[why it is not breaking off from document flow]
Yes parent block [block not element] is having margin of 100px [all sides] Then also
first -> it[green nav] should not care about margins because it should not be in document flow.
Second -> even if its considering the margin from top [of another element], then why it is not considering margin from the left ?
CSS For the Green nav Block -
div.nav{
background-color: green;
text-align: center;
height: auto;
width: 50%;
margin:0 auto;
position: fixed;
}
position fixed is not breaking out of document flow
as it is considering margin-top of the parent element! When
positioned as relative working expected [within document flow]
CSS for Another block parent whose margin the above navbar is taking -
div.parent{
margin: 100px;
height: 400px;
width: 400px;
border: 3px solid red;
background-color: skyblue;
position: relative;
}
Green Navbar with position fixed, not breaking off document flow
Green Navbar with position relative, staying in document flow as expected
So the real question is why the navbar is not starting from top,left most corner ?
Try this css for stick green navbar on top
div.nav{
background-color: green;
text-align: center;
height: auto;
width: 50%;
margin:0 auto;
position: fixed;
top:0px;
left:50%;
transform:translateX(-50%);
}
Bump. Any idea? Thank you!
-
Displaying 3 slides/images per view, looped, centered.
With a clean cache, Swiper starts with the last slide and misses the first to the right. Browser refresh seems to fix it: swiper starts/initializes with first slide, no blank slides remain.
The amount of images is dynamic.
UPDATE:
The issue is with the CSS we added:
.swiper-container {
width: 100%; height: 100%;
margin-left: auto; margin-right: auto;
}
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
}
.swiper-slide img {
height: 550px;
width: auto;
}
.swiper-slide:nth-child(1n) {
height: 550px;
width: auto;
}
Removing the very last bit (nth-child) resets the slider to always start with the first slide. But the images stop sitting next to each other, but instead are spread apart.
Created this to demonstrate a little quicker:
http://jsfiddle.net/L3b1fzh9/13/
You can remove the last few lines of CSS, because .swiper-slide:nth-child(1n) matches every single .swiper-slide element, so this selector doesn't actually do anything (n is a set of all integers, so when you multiply by 1 you just get 0, 1, 2, etc.).
The reason why the images stop sitting next to each other is that their parent container .swiper-slide has width: 100%. You need to change that to width: auto and add margin: 0 auto to center the slides.
So your .swiper-slide CSS becomes:
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
width: auto !important;
margin: 0 auto;
}
And just remove the .swiper-slide:nth-child(1n) CSS.
Updated fiddle
I have an <input /> with a placeholder. The input is custom-designed, i. e. it has no borders, no outline, a custom height, custom width, custom background color, custom text color, and a custom font with a specific font-size and line-height. That font is imported using #font-face referencing a *.ttf-file.
The problem is that when focussing on the input field, the placeholder text jumps about 2-3px higher, only to jump back on blur.
Here the definition of the input field:
#font-face{
font-family: SourceSansProExtraLight;
src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf');
}
#search_input{
background-color: #f0f0f0;
outline: none;
border: none;
padding: 0;
margin: 0;
width: 236px;
padding-left: 12px;
width: 224px; /* width (236) - padding-left */
font-family: SourceSansProExtraLight;
font-size: 30px;
line-height: 30px;
color: #5e5e5e;
height: 52px;
}
Here's a GIF demonstrating the issue:
Please check that you have write any css for input:focus Selector that may cause the issue. if you don't write any css for input:focus, write css for that to fix the problem.
With input[type="text"] there is no Problem.
I have the Problem only with input[type="number"] if the height and line height is equal:
input[type="number"] {
height: 30px;
line-height: 30px;
}
but if I reduce the line height the effect disapears:
input[type="number"] {
height: 30px;
line-height: 28px;
}
Chrome reserve space for caret.
The height of the line must be greater than the height of the font at 1.11 units (on my system).
Example:
font-size = 30px
line-height = 30px * 1.11 = round(33,3px) = 33px
Try setting outline-offset: 0 when the input has :focus. That fixed the jumping placeholder bug for me on WebKit. I was also setting outline: none and showing a custom box-shadow, which may be the cause.