I have a fab-menu that I want it to be on top of data table buttons see screenshot (relative position):
CSS:
.fab-menu {
position: relative;
display: inline-block;
white-space: nowrap;
padding: 0;
margin: 0;
list-style: none;
z-index: 999;
}
I have tried position absolute which worked but the fab-menu buttons are misplaced. See screenshot (absolute position):
CSS of data table scroll wrap:
.datatable-scroll-wrap {
width: 100%;
min-height: .01%;
overflow-x: auto;
}
PS : if i remove overflow-x: auto; the buttons will appear on top but the table scroll bar will not show up if i resize the page
under
.datatable-scroll-wrap {
width: 100%;
min-height: .01%;
overflow-x: auto;
}
add the following :
#media (max-width: 767px) {
.datatable-scroll-wrap .dropdown-menu {
position: absolute!important;
}
}
#media (min-width: 768px) {
.datatable-scroll-wrap {
overflow: visible;
}
}
Related
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;
}
My site is responsive. When I change my window size, the content size scales to fit the window. On mobile it's fine, and on desktop it also scales up and down-according to window size.
My content won't, however, span the whole width of the screen on desktop. Height is fine but width it doesn't stretch right across. It sort of sits between the menu bar and logo.
I tried
html, body{height: 100%; width: 100%;}
.container{
width:100%; height: 100%; max-width: 100%; max-height:
100%;position: relative;}
#media screen and (min-width: 48em)
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-
header
{
display: none;
}
.content {position: relative;}
#body {height: 100%; width: 100%;}
With
.container
It did move it, but not across the whole width, just to the left, slightly outside of logo parameter.
Any ideas?
div#primary {
margin: 0 auto;
float: unset; height: 100%; width: 100%;
}
.container{width:100%; height: 100%; max-width: 100%; max-width:
100%;position: relative;}
the position: relative; take it out :) hope that works.
also 2 max-width's, you can take 1 out as well
you can add in your css
#media (min-width: 875px) {
div#primary {
margin: 0 auto;
float: unset;
}
#masthead .flex-row
{
max-width: 66%;
margin: 0 auto;
}
}
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.
I would like position:fixed to only work when I'm displaying the app on a large screen. If I am in mobile, I don't want position:fixed. What is wrong with my scss? I actually just took the idea from another stackoverflow post.
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
position: fixed;
#media #{$small} {
position: relative;
}
}
}
I figured it out and it's working great!
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
#media only screen and (min-width: 400px) {
position: fixed;
}
}
}
according to zurb foundation
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
position: relative;
#media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
position: fixed;
}
}
}
i am trying to create a responsive fullscreen horizontal gallery scroll.
i have worked it out but the results are not okay.
Actuallt the image should be fully strecthed to an li. i's vertically scrolling.
secondly the li's are not shoing fine on firefox, but on chrome it works fine.
please help.
thanks.
my code snippet
ul {
display: inline-block;
height: 100px;
white-space: nowrap;
margin: 0;
padding: 0;
}
li {
display: inline-block;
max-height: 100%;
width: 25%;
}
here is the fiddle
FIDDLE
Thanks.
demo with li.image = 25%
Full li image demo
body {
width:100%;
margin: 0;
padding: 0;
}
you have missing width from body tag
Keep in mind that width: 100%; on slides class wont work unless the parent of this class has width defined in it (which is body here)!!
Since you li height is fixed, you can use img width as 100%
slides {
width: 100%;
overflow: auto;
margin: 0;
padding: 0;
}
ul {
display: inline-block;
height: 100px;
white-space: nowrap;
margin: 0;
padding: 0;
}
li {
display: inline-block;
height: 100px !imoprtant;
width: 25%;
}
li img{
width: 100%;
}
DEMO