I am using the Gumby framework grid and am having a problem with the columns. I have the following code:
<div class="row appointment-container">
<div class="columns one">
<img class="appt-calendar" src="appt.png">
</div>
<div class="columns eight">
<div id="last-appointment">
<h4 class="confirm-appointment next-block">
<span class="appt-text">Lorem ipsum intellectus testus integer string float test test test</span>
</h4>
</div>
</div>
<div class="columns three">
</div>
</div>
With the following SCSS:
.appointment-container {
position: relative;
.appt-calendar {
max-height: 100%;
max-width: 100%;
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
}
The "columns eight" and "columns three" display correctly but the "columns one" has a height of only one pixel despite having content in it. What would cause this to happen?
It seems that
position:absolute
on the image caused the column to collapse to 1 pixel. I do not know if this is something only Gumby has or if other frameworks have the same framework but I will update this answer once I find out.
Related
Using Bootstrap 5, how I can extend a row to either be outside a container or appear to be outside the container and stretch to the viewport edge without a horizontal scrollbar.
Reviewing the questions related to this, I see the use of pseudo-elements. When I try to use a pseudo-element, a horizontal scrollbar appears, which is not the behavior I want. As stated in an answer below, I could use an overflow hidden on the body, but that isn't preferred since I feel that could cause styling issues elsewhere. Note that the example pen below is a very watered-down example.
CodePen showing an example of what I'm trying.
.full-width {
position: absolute;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg-dark vh-100">
<div class="row bg-light p-5">
<p class="text-dark">Hello World</p>
</div>
<div class="row full-width bg-info p-2">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
Edit:
I can accomplish what I'm looking for by separating the page at certain points with three containers. See this codepen for an example. This may be the approach I take, in my given situation. There are styling issues I'll need to take into account in the middle container, but could be accomplished fairly easily. If there's thoughts on a better way, please let me know.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-info p-2">
<div class="col">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p>More content here</p>
</div>
</div>
</div>
First of all you need overflow:hidden on the body. Secondly, content doesn't go directly in the row. Instead content should be placed inside a column (col) inside the row. Then make the col full-width...
https://codeply.com/p/krYOqrcJlR
<div class="container bg-dark vh-100">
<div class="row bg-light">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
<div class="row bg-info">
<div class="col full-width">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
body {
overflow:hidden;
}
.full-width {
position: relative;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
I'm using foundation for my grid system but this could be a problem in any grid system. I got basicly 3 cells wrapped by one container but one of the cells should grow to the page border (left in my Sampe-Image
but this also could be on the right side).
when I define a fixed width like in this fiddle, it works, but the background image too wide, I need a responsive version :-/
HTML:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="large-4 cell">
<div class="specialdiv"></div>
</div>
<div class="large-4 cell">
<p>test</p>
</div>
<div class="large-4 cell">
<p>test</p>
</div>
</div>
</div>
CSS:
.specialdiv {
position: relative;
border: 1px solid red;
height: 100%;
}
.specialdiv:after {
content: "";
display: block;
top: 0;
right: 0;
height: 100%;
position: absolute;
width: 2000px;
background: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
background-size: cover;
}
https://codepen.io/anon/pen/ZjeBOz
Any hints?
Im not sure what exactly you want, but if the goal is to keep the image in the cell with no regards to cropping you can just apply overflow-x: hidden; to .specialdiv
I have no idea why this is such a struggle. I want to place an image inside a container. That image should be responsive, meaning when the column gets smaller in width, the image should also get smaller. It does that now, but it maintains the height, meaning it will look stretched.
https://codepen.io/anon/pen/vmZKyM
<div class="container-fluid">
<div class="col-md-8 offset-md-2">
<div class="row">
<div class="col-md-4 offset-md-2">
<div class="row">
<p>Left column</p>
<img src="http://placehold.it/600x400" />
</div>
</div>
<div class="col-md-5 offset-md-1">
<div class="row">
<p>Right column</p>
<img src="http://placehold.it/700x400" />
</div>
</div>
</div>
</div>
</div>
I do not know the aspect ratio of the image (in this case I do), so I cannot achieve this with the padding-bottom trick (normally used for images).
How can I achieve this?
change max-width: 100%; to width: 100%; also change height: auto; to height: 100%;
If the container should have a fixed height, then give it an ID (or a class) and change the .img-responsive restrictions the other way around eg
.container {
height: 600px;
}
/*And then change */
.container .img-responsive {
display: block;
height: auto;
max-width: 100%;
}
/*To */
.container .img-responsive {
display: block;
width: auto;
max-height: 100%;
}
Not sure how it will work with a mix of orientations but if they are floated it shouldnt really matter
I recently made a website where I needed 6 columns with the y overflow visible. I couldn't make a clean 6 divisions. The width needed to be wider to adjust for the 6 scrollbars and a bit of padding.
Is there a better way than my attempt?
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
.col {
width: 15.2%;
padding-right: 15px;
float: left;
}
.section {
overflow-y: scroll;
width: 100%;
}
It's very sloppy and the columns don't reach the far right edge.
I don't know jquery well enough to attempt but will like take any advice.
****** I worked it out, so silly. You need to use % for everything including padding. Duh ******* Sorry for wasting anyones time!
I would say that it is better to set padding for the inner div .section, so there will be no need to adjust .col width.
Try this HTML code:
<div id="grid">
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
</div>
With this CSS:
#grid {
margin-left: -15px;
}
.col {
width: 16.6%;
float: left;
}
.section {
overflow-y: scroll;
margin-left: 15px;
height: 100px;
background: green;
}
Please note that #grid { margin-left: -15px; } will help you get rid of unnecessary white space before first column
take a look at Live demo
I have a fixed container and inside of that is an additional container which houses a number of DIVs based on user choices. I need these additional DIVs to line up horizontally and provide horizontal scrolling (but not vertical scrolling).
Such as this:
[x] [x] [x]
Essentially, my setup looks like this:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
</div>
</div>
The CSS breaks down as such:
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
#final {
display: inline-block;
float: left;
}
This setup works fine in Firefox however it continues to break in IE7. All of the "#final" divs are stacking vertically:
[x]
[x]
[x]
Any suggestions on how to fix this?
Several problems here. For a start:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
<div style="clear:both"></div>
</div>
</div>
You should have a DIV after your floats that remains constant, telling your browser not to float any subsequent elements (clear:both).
And you have several "final" DIVs, so they be in a CSS class, not an ID.
.final {
float: left;
}
That should do it!
Edit: That will fix your HTML/CSS errors, at least. But I've just noticed that you want the document to scroll right. The only way to do that is to set the width of the #container div to be wider than the sum of all the widths of the .final divs. Otherwise your browser will attempt to push everything "down".
Try this......
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
</div>
</div>
<style>
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
.final {
float: left;
}