Why is colorbox not auto-adjusting the width? Instead it is showing a
horizontal scrollbar.
This is the div that is shown inside the model.
<div style="width:900px">
<div style="float:left;width:640px;height:640px;text-
align:center;background-color:#666;">
<img src="xyz.gif" alt="#" />
</div>
<div style="float:left;background-color:#eee;min-width:260px">
Show buttons here that must show
</div>
</div>
How can I make sure that my colorbox model auto-expands to show 900px div
and no scrollbar?
The div is 708px witdth. Where is it getting this value from?
Another problem:
The height is sometimes 34px, sometimes 600px+ even if I click the same link.
This is wrapping divs from firebug:
<div id="colorbox" class="" style="padding-bottom: 42px; padding-right: 42px; display: block; position: absolute; width: 708px; height: 542px; top: 0px; left: 337px;">
<div id="cboxWrapper" style="height: 584px; width: 750px;">
<div id="cboxMiddleLeft" style="float: left; height: 542px;"></div>
<div id="cboxContent" style="float: left; width: 708px; height: 542px;">
<div id="cboxLoadedContent" style="display: block; width: 708px; overflow: auto; height: 522px;">
Somehow the width of the parent divs are getting calculated.
You're specifying a width of 640px.... change that to min-width and then it would be allowed to grow.
By default, the plugin sizes itself to the dimensions of the digital asset you are displaying with it. But this can be overriden.
Consult the plug-in doc-o and pay special attention to the Dimensions section (height, width, etc.) and consider specifying a value of 100%.
ColoBox docs
Related
I want to switch between two slides by using a scroll and I want to have an indicator
to show which of the two slides that are being shown.
Building the scroll part was not very difficult and has been done.
My problem is:
How can I extract the idx value from the for loop to know which one of the to slides that is being shown?
This so that I can present which slide I am on with the indicators.
Scrolling
This is the code for scrolling between the two images.
HTML
<div class="container_large">
<div v-for="(i,idx) in this.slider_header " class="scroll" :key="idx" >
<div :style="{height:'82px', width:'100%'}" v-if="idx==0" >
Slide 1
</div>
<div v-if="idx==1" :style="{height:'92px', width:'100%'}" >
Slide 2
</div>
</div>
</div>
CSS
.container_large{
width: 100%;
/* width: 90%; */
display: flex;
overflow-x: scroll;
margin-left: 0%;
height: 99px;
position: absolute;
margin-top: 27%;
z-index: 2;
}
.scroll{
min-width:388px;
position: relative;
margin-top: 0%;
border-radius: 8px;
display: flex;
height: 92px;
z-index: 1;
margin-left: 2%;
object-fit: cover;
}
Indicators
This code is for the indicators to show which of the two images that are being shown at the moment.
<div :style="{height:'15px', position:'absolute',marginTop:'51%',borderRadius:'8px',zIndex:'3', width:'30px',marginLeft:'43%',backgroundColor:'grey'}">
<div id="slide1" :style="{borderRadius:'50%',height:'13px',marginLeft:'8%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
<div id="slide2" :style="{borderRadius:'50%',height:'13px',marginLeft:'51%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
</div>
I would like to add v-if="idx==0" and v-if="idx==1" to id="slide1" and id="slide2" respectively to show which one of them that is being seen but
since they fall outside of the for loop this doesn't work.
Question
How can I catch the idx value or solve this in some other way to present which slide that I am on?
Ok so I think you have too much v-if inside your v-for.
There is no need to create all of your slides with to then only render one of them with series of conditions.
Have you considered something like this?
<div class="container_large">
<div
class="slide"
:style="slides[activeSlide].style">
{{slides[activeSlide].text}}
</div>
</div>
I am working with a third party website which allows me to modify code to suit my needs. I have a product page with responsive columns. Administrative users can upload images for the products which end users can order. I've set it so the images are responsive as well, but because the product images are not all the same aspect ratio, I have some items which are taller than others, making the page leave spaces in the column blank. I want the images to stay responsive and keep their aspect ratio, but have the containers they are in all have the same height and responsive width. Changing max-height and min-height just gives the same response as setting height. How do I do that while keeping the width correct?
<div class="col-xs-12 text-center">
<div class="well text-center">
<href="product/{{LineItem.Product.InteropID}}">
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<img class="img-responsive" style="max-height: 200px; min-height: 200px; width: auto; margin: auto;" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</figure>
<div class="empty" ng-hide="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl">
<span class="fa empty"><i class="fa fa-camera"></i></span>
</div>
</a>
</div>
</div>
The best solution would be to force users to upload an image of a certain height/width, but barring that, you could just put the responsive images inside of a div that has a fixed size and it's css overflow property set to hidden.
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<div style="height:200px; width:200px;overflow:hidden;">
<img class="img-responsive" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</div>
</figure>
Now, the image is fully responsive, but any portions of it that are bigger than its container will be clipped.
HTML
<div class="img-wrap ratio-4-3">
<div class="img-content">
<img src="https://picsum.photos/200" />
</div>
</div>
SCSS
.img-wrap{
position: relative;
.img-content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
> img{
max-width: 100%;
max-height: 100%;
width: auto;
}
}
&.ratio-4-3{
padding-top: 75%;
}
&.ratio-16-9{
padding-top: 56.25%;
}
&.ratio-3-2{
padding-top: 66.66%;
}
&.ratio-8-5{
padding-top: 62.5%;
}
}
https://jsfiddle.net/huypn/pcwudrmc/25813/
Check out my fiddle to see what I'm working with:
http://jsfiddle.net/ETKYj/7/
It expands the height until the end of the duration, tripling the size of the page. I want the words to animate the distance of the init/load height of the page for the entire duration.
EDIT: I took the overflow suggestion and it works in fiddle, but if you notice, the words aren't falling at a the duration (slower because the page is shorter), they still fall as if the page is 3 times longer (and they are falling at different rates, which they shouldn't be) They should all behave like "first" falling in unison
Will
body {
overflow: hidden;
}
do what you're trying to achieve?
The following also might do, if you want to do that effect only in a part of the page:
#wordframe {
overflow: hidden;
width: 100%;
height: 100%;
}
.word {
color: #000;
font-size: 200%;
font-family: Gloria Hallelujah;
}
<div id="wordframe">
<div class="word" cue="5">first</div>
<div class="word" cue="10">second</div>
<div class="word" cue="20">third</div>
<div class="word" cue="20">fourth</div>
<div class="word" cue="30">fifth</div>
<div class="word" cue="35">sixth</div>
<div class="word" cue="40">seventh</div>
</div>
I'm experimenting with Dojo, so far it's very cool except for the fact that I can't seem to be able set the width of a TabContainer. I have the following code
<div id="tabs" dojoType="dijit.layout.TabContainer" doLayout="false">
<div id="javaTab" class="myTab" dojoType="dijit.layout.ContentPane" title="Java">
<h1>Hello I'm the Java Tab</h1>
</div>
<div id="rubyTab" class="myTab" dojoType="dijit.layout.ContentPane" title="Ruby">
<h1>Hello I'm the Ruby Tab</h1>
</div>
</div>
This are the CSS:
#tabs {
width: 100%;
height: 100%;
}
.myTab {
height: 600px;
width: 100%;
padding: 0 !important;
}
If I put a menu bar inside the the tabs then I find that their width is larger than my screen so I don't see the complete bar.
So is there a way to set the width of the generated "tab bar"?
Thanks guys!
Yup Peller is right, you can't set the size on each contentPane, but what you can do is to modify the width of the whole thing (tabContainer)
Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.
So, sample of what I'm doing:
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
<div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".
My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.
I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).
What am I missing here?
EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm
first of all - Inline styling is a big no no.
It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.
Please read up on standards compliant css at w3schools
The problem is your overflow property.
auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"
What you are looking for is "overflow: visible;"
Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):
alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png
And here is the updated source code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: absolute; z-index: 99999">
<div style="z-index: 99999; overflow-y: hidden; position: absolute;
overflow: hidden; height: 200px; left: 0; auto: 0;
border: 1px solid red">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.