I'm having an issue with css scroll bars working the way I need them to. I have a modal footer that pulls JPG images via ajax. I have 3 div elements, side by side within that modal footer, one for each type of photo I'm pulling.
I want all the photos to flow horizontally within their respective divs with horizontal scrollbars only if needed and no vertical scroll bars at all. The pictures are 75x75 pixels each. I have the following code:
<div class="modal-footer">
<div id="photodiv" class="pull-left" style="padding:0px 2px; max-width:300px; max-height:80px; overflow: auto; border:1px solid gray;">
<div id="photoProgress" class="progress progress-striped active">
<div class="bar" style="width:100%;"></div>
</div>
<div><h3>Looking for photos...</h3></div>
</div>
<div id="notePhotoDiv" class="pull-left" style="padding: 0px 2px; max-width: 300px; max-height: 80px; overflow: auto; border: 1px solid gray;">
<div id="noteProgress" class="progress progress-striped active">
<div class="bar" style="width:100%;"></div>
</div>
<div><h3>Looking for progress notes...</h3></div>
</div>
<div id="pathPhotoDiv" class="pull-left" style="padding: 0px 2px; max-width: 300px; max-height: 80px; overflow: auto; border: 1px solid gray;">
<div id="pathProgress" class="progress progress-striped active">
<div class="bar" style="width:100%;"></div>
</div>
<div><h3>Looking for path reports...</h3></div>
</div>
<p>
<input class="btn btn-primary" type="button" id="save" value="Save" />
<input class="btn btn-secondary" type="button" id="cancel" value="Cancel" />
</p>
</div>
I have tried changing overflow property in all sorts of different ways and can't seem to get it to work.
I've tried adjusting overflow-x, overflow-y, overflow, I've tried changing from auto to hidden, scroll, visible.
The code currently has vertical scroll bars only. Can someone please point me in the right direction? I unfortunately can't provide a jsfiddle because it's for an intranet site and is pulling photos from an internal server. If need be I can provide screenshots of what it looks like.
I think I get what you're looking for. The problem is that you probably need white-space:nowrap; to keep the images in a line rather than wrapping to the next line. See this example:
http://jsfiddle.net/F8JPq/
Related
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;
Sorry for the title, couldn't think about a better description for now.
Situation: Mouse over the progress bar to show a title. The small area (in my real case it is bigger) from the gray that mix with the green did not show the title. Looks like the number is a layer ahead of the progress bar.
http://jsfiddle.net/w6fpszkx/
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading text-center">Title</div>
<div class="panel-body" style="padding: 0px 15px 15px 15px;">
<p class="text-center" style="font-size: 110px; line-height: 1;">82<span style="font-size: 23px;">%</span></p>
<div class="progress">
<div title="" data-html="true" class="progress-bar progress-bar-success" style="width: 82%" data-original-title="ON TIME<br><span class='label label-success' style='display: inline-block; width: 100%; margin-bottom: 5px;'>9 (82%)</span>">
<span>9 (82%)</span>
</div>
<div title="" data-html="true" class="progress-bar progress-bar-danger" style="width: 18%" data-original-title="EXPIRED<br><span class='label label-danger' style='display: inline-block; width: 100%; margin-bottom: 5px;'>2 (18%)</span>">
<span>2 (18%)</span>
</div>
</div>
</div>
</div>
</div>
Is it possible to reduce the top and bottom gray area from the "82" number to the top and bottom limits of the numbert itself? Thanks.
Yes. you have to adjust better the line-height of your element.
.text-center {
line-height: 0.75;
}
(and I removed the value "1" you added as style online in the html)
JSFIDDLE
Edited: But to be sure your tooltip will always show just add:
.progress {
position:relative;
z-index:1;
}
so your bar will always be OVER the number:
updated FIDDLE
Can anybody please help me align the Cancel button to the right of the progress bar? I've tried float and display inline with no success, and I'm out of ideas.
Here's the code:
<div class="row">
<div class="progress progress-striped active" style="width: 500px; margin: 0px auto; height: 40px;">
<div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div>
</div>
<div style="display: inline;"><button class="btn btn-warning">Cancel</button></div>
</div>
Here's a fiddle of it demonstrating my problem:
Try to this Define pull-left of your div as like this
<br><br><br>
<div class="row">
<div class="progress progress-striped active pull-left" style="width: 500px; margin: 0px auto; height: 40px; margin-right:10px;"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>
<button class="btn btn-warning pull-left">Cancel</button>
</div>
Demo
I added float:left to both the loading bar and the cancel button, plus some slight css to align the cancel button better such as top and left:
UPDATED EXAMPLE
You are using Twitter Bootstrap so : Use the bootstrap class instead of your hard style.
Fiddle : http://jsfiddle.net/wFLw5/1/
HTML :
<div class="row">
<div class="col-xs-10 progress progress-striped active"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>
<div class="col-xs-2"><button class="btn btn-warning">Cancel</button></div>
</div>
I think The Little Pig is most correct in suggesting you use the actual Bootstrap styles. However, you can align the cancel button to the right of the progress bar by setting display:inline-block; on both elements, and then offsetting the cancel button.
Issue screenshots:
I'm seeing this issue in a few of my divs. Everything looks fine on desktop until I test it out on an iPad. The div does not seem to wrap my content despite my attempt to use < span class="clearfix" ></span> before closing the div.
This is how the code looks like
<div class="span8">
<div class="box datepickerbox">
<span class="daterange_title span3">Activity summary for </span>
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="icon-calendar icon-large"></i> <b class="caret" style="margin-top: 8px"></b>
</div>
<span class="clearfix"></span>
</div>
</div>
All you need to change is
<span class="clearfix"></span>
to
<div class="clearfix"></div>
and Bootstrap clearfix rules do not specify the elemnt to be displayed as a block element and that's what you are missing.
i am having problem with re-size browser window
when i re-size the window customer login button does not come within the body
how to fix that issue i have given margin on it thats the problem
<div class="inner clearfix" style="margin-left: 1000px;">
<div class="logo">
Customer Login
</div>
</div>
http://jsfiddle.net/48y2Q/1/embedded/result/
http://jsfiddle.net/48y2Q/1/
You gave it a fixed margin:
margin-left: 1000px;
So it'll be 1000px from the left all the time. Change it to the following, for example:
float: right;
You can do this to make it aligned to the right:
<div style="margin-right: 50px; text-align: right;" class="inner clearfix">
<div class="logo">
<a class="customerLogin" href="">
Customer Login
</a>
</div>
</div>