Hey guys I don't much experience with RTL Styles and I would really appreciate a help here.
I have this nested .less style. How can I detect if it's RTL and properly change 2 values?
I tried this but it doesn't work. Any tips?
I just need to change the margin-left and margin-right property values for RTL.
Thanks
#backdrop {
width: 100%;
height: 100vh;
display: flex;
background: rgba(0,0,0,.5);
justify-content: center;
align-items: center;
position: fixed;
z-index: 9999;
.content {
padding: 15px;
width: 100%;
max-width: 700px;
height: 400px;
background: #FFF;
border-radius: 10px;
overflow: scroll;
margin-left: -225px;
#media (max-width:768px) {
margin-left: 0;
width: 100%;
height: 90vh;
}
} & {
html {
[dir=rtl] & {
#backdrop {
.content {
margin-left: 0;
margin-right: -255px;
}
}
}
}
}
}
if the RTL style is a separate HTML file from the LTR one, then just add a specific class for the RTL element you want to edit, for example, put class="rtl__style"
on the element, and you can style that the way you want.
Related
I got the following structure:
<header></header>
<main>
<card />
</main>
<footer></footer>
header {
height: 70px;
top: 0;
left: auto;
right: 0;
position: sticky;
width: 100%;
display: flex;
z-index: 1100;
box-sizing: border-box;
flex-shrink: 0;
flex-direction: column;
}
main {
height: calc(100vh - 130px);
display: grid;
place-items: center;
max-width: 600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
card {
width: 100%;
padding: 40px 25px;
}
footer {
top: auto;
width: 100%;
bottom: 0;
height: 60px;
display: flex;
position: fixed;
justify-content: center;
}
The card actually is a login form with two inputs and has to be in the center of the screen. I used the main to wrap and center it. But now the problem is that on horizontal orientation and when the height is reduced to some pxs it is not possible to see the whole card. Part of it is covered by the footer. Any idea how I can center it and scrolling to be possible.
Here is my sandbox: https://codesandbox.io/s/recursing-meitner-ocgz9
add this to you'r body maybe youre problem solve
body {
min-height:100vh;
}
if you place it to a code pen, would be easier to help you.
I can only assume that if you change main to the below it might help:
main {
height: calc(100vh - 130px);
display: flex;
place-items: center;
max-width: 600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
background: red;
}
Also check you have body { margin: 0 }. As browsers adds margin automatically, so your 100% layout does have extra height.
from the main container remove the height and add margin-bottom equals to the height of the footer.
paperContainer: {
display: "grid",
placeItems: "center",
marginBottom:'60px'
}
And to avoid some styling issues regarding height, add min-height if required.
Codesandbox demo
Got a very simple solution!!
paper: {
width: "100%",
borderRadius: "8px",
padding: "40px 25px",
paddingBottom: "100px"
},
just give the paddingBottom to the paper, you can also use it conditionally if the user is using mobile and the width of the view > height of the view. It looks fine without that too.
Check this out!!
sandbox link
let me know if you still have an issue.
So I'm trying to edit this existing widget on a page. I don't have access to edit the source code, so want to be able to do it entirely in CSS, ideally. Rather than trying to explain, I think it's easier just to paste an image of the desired behaviour - i.e. there is a left section (:before) and right section (:after) - as the splitter moves, then the widths of each pseudo element should change accordingly.
desired result
Here is a JSFiddle of a bare-bones version of the widget's code/structure
https://jsfiddle.net/o0zgyut3/
HTML
<div id='wrapper'>
<div id='splitter' style='left: 50%'></div>
</div>
<input id='slider' type='range' min='0' max='100' value='50'/>
CSS
body, html{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #222;
}
input{
margin-top: 10px;
}
#wrapper{
width: 500px;
height: 50px;
background: #444;
position: relative;
display: flex;
}
/*left*/
#wrapper::before{
content:'';
width: 50px;
height: 50px;
background: linear-gradient(0deg,#00be1abf,#5fed00b3);
position: absolute;
left: 0px;
}
/*right*/
#wrapper::after{
content:'';
width: 50px;
height: 50px;
background: linear-gradient(0deg,#9f0000ff,#f10000ff);
position: absolute;
right: 0px;
}
#splitter{
position: relative;
transform: translateX(-50%);
background: #ddd;
height: 50px;
width: 10px;
z-index: 99;
}
JS (note that I wouldn't have access to the JS in the real site - the slider in this example below is just to allow changing the splitter position easily while debugging (without having to add the drag functionality)
document.getElementById("slider").addEventListener("change", function(){
document.getElementById("splitter").style.left = this.value + "%";
})
I have tried various approaches (with flex, inline, grid, floats, margins etc) and could get behaviour that was half-way to what I wanted, but never exactly. Also note, that, if it's easier, the real widths don't have to be accurate - it's a purely visual widget, so it's fine to e.g. make the right section 100% width, then only the left section is dynamic and position it above the right by giving it a higher z-index, if that's easier - i.e. if the right section was hard-coded at 100% width, and the left derived an 80% width from the css, it would give the illusion of an 80:20 split (even though it'd technically be 80:100), which is fine
Anyway, I suspect I'm missing something fairly obvious, so if anyone is able to get this working, that'd be awesome. Thanks
It's not possible that you directly access pseudo-elements with JS as when the page loads they're not part of the DOM.
However, you can do something like this create a new style element which will have new CSS for your wrapper
Run snippet below to see it working.
document.getElementById("slider").addEventListener("change", function() {
document.getElementById("splitter").style.left = this.value + "%";
var sytleElement = document.head.appendChild(document.createElement("style"));
sytleElement.innerHTML = "#wrapper:before {width: " + this.value + '%' + " }";
})
body,
html {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #222;
}
input {
margin-top: 10px;
}
#wrapper {
width: 500px;
height: 50px;
background: #444;
position: relative;
display: flex;
}
/*left*/
#wrapper::before {
content: '';
width: 10%;
height: 50px;
background: linear-gradient(0deg, #00be1abf, #5fed00b3);
position: absolute;
left: 0px;
}
/*right*/
#wrapper::after {
content: '';
width: 50px;
height: 50px;
background: linear-gradient(0deg, #9f0000ff, #f10000ff);
position: absolute;
right: 0px;
}
#splitter {
position: relative;
transform: translateX(-50%);
background: #ddd;
height: 50px;
width: 10px;
z-index: 99;
}
<div id='wrapper'>
<div id='splitter' style='left: 10%'></div>
</div>
<input id='slider' type='range' min='0' max='100' value='10' />
I have a weird problem, I am pretty bad with CSS therefor I come up with this exercise where I want to build a image slider, which is inside a div called slider-div with width of 1000px, from a array, 10 images are loaded into the div and only 5 are visible so the user have to scroll.
To learn more I added two buttons which should scroll 100px (left or right),
I have a problem with those buttons, they stick to the parent slider-div / Background. I hoped they would always stay on the top and don't move. User can decide to scroll to the end or hit the buttons.
I am using display: flex; flex-direction: row; to get the images into a row.
How can I fix button to the visible edge of a div?
Only solution I worked out is:
position: fixed;
right: 33.6%;
but it is very unprofessional :( also bad when I changing the layout somewhere else.
Can you please look over and tell me where the mistake is what is missing?
Here is the link to codepen:
https://codepen.io/miomate/pen/pBQBya
Code:
.div-1 {
max-width: 1000px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
position: absolute;
}
button{
/* position: absolute; */
top:35%;
}
.images {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.x {
position: absolute;
top: 30%;
}
.div-2-1{
}
.div-2-2{
right: 0;
}
The images aren't loaded but the result ist the same.
Thank you very much.
This is my solution using the "bottom" property of css.
body {margin: 0 0 0 0;}
.div-1 {
max-width: 1000px;
height: 300px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.images {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.x {
position: absolute;
bottom: 0;
}
.div-2-1{
left:0;
}
.div-2-2{
right: 0;
}
I've a fixed side bar on the right side of the page (position: fixed)
But it's contents are not fully visible as it's not scrolling with the page scroll. I could have added overflow-y: scroll in the .sidebar{} css settings. But don't want a separate scroll bar for sidebar. Is there an option to make it scroll with the full page scroll.
Here is my css settings for sidebar :
.sidebar {
text-align: center;
padding: 2rem,1rem;
color: rgba(255,255,255,.5);
background-color: #202020;
top: 0;
bottom: 0;
}
If you want to debug to see what went wrong, here is it running live : https://pagefault.me
Thanks
Based on the answer I suggested in my comment, I was able to work in chrome to arrive at the css below.
1) Add some css to the .sidebar-nav component
nav.sidebar-nav {
position: absolute;
overflow-y: scroll;
top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
left: 15px; /* you can make this zero and add `padding-left: 15px` */
bottom: 15px; /* leave some room for copyright section */
right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}
2) The .container class becomes
.sidebar .container{
max-width: 38rem;
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
overflow: hidden;
}
3) Make sure the footer bit remains at the bottom after making .sidebar-nav absolute
.sidebar .container > p:last-of-type {
position: absolute;
bottom: -15px;
}
Of course as mentioned in the original solution, you have to test the scrollbar widths in different browsers to arrive at the right width to use in place of right: -17px in step 1.
Use absolute position instead of fixed as you want it to scroll it along with the page.
body {
margin: 0;
padding: 0;
position: relative;
}
main {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 300vh;
background: beige;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside><aside>
A flex box solution without positioning :
body {
margin: 0;
padding: 0;
display: flex;
}
main {
width: 80%;
height: 300vh;
background: beige;
}
aside {
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside></aside>
I am trying to add borders around flexbox containers on my webpage project when the media query hits a large screen size. I want these borders to connect together to create a table look. However I can not get this to work. I have also tried the <hr> tag. If anyone has a suggestion on how to approach this it would be appreciated. I am wanting the borders to appear around the members section recent activity and settings / message user section.
The code and been seen in this JSfiddle https://jsfiddle.net/TLXL/9wkxts04/
/*********************************
Media Queries For Large Screen Size
***********************************/
#media (min-width: 1280px){
/*************************
New Members Styles
*************************/
.member {
height: 120px;
width: 650px;
position: relative;
}
.container1 {
height: 150px;
}
.member h4 {
position: absolute;
top: 25%;
right: 10%;
}
.member h3 {
margin-top:-5px;
}
.b h4 {
position: absolute;
top: 99%;
right: 3%;
color: #0084b4;
font-size: 1.25em;
}
/*************************
Message User Styles
*************************/
#buttonBox {
justify-content: space-around;
}
#messageUser{
width: 500px;
margin-left: 20px;
margin-bottom: 0;
margin-top: 50px;
}
#messageUser input {
width: 500px;
}
#messageUser textarea {
height: 225px;
width: 500px;
}
#messageUser button {
width: 500px;
}
/*************************
Setings Styles
*************************/
#settings {
width: 500px;
}
#settings h1 {
margin-left: -10px;
}
#settings select {
width: 500px;
}
.settingsButton {
width: 500px;
}
}
Thank you for your help.