Using bootstrap 3.
I have a list-group-item, but when the width causes the text to pop to the next line, text is cropped, as shown in the picture, on the second line.
What can I do?
This is my code:
<div class="list-group-item getItemActivityHistory" item_id="6">
<div class="text-info"><b>חשמל</b>
<span class="pull-right">נוצל החודש:
<span>
666
</span></span>
</div>
<div>יתרת תקציב: <span class="leftToRight">לא הוגדר</span>
<span class="pull-right">
התחייבויות עתידיות: 100
</span>
</div>
</div>
overflow: hidden; solved the issue.
But I realy do not understand why. "hidden"' should do the opposite.
???
Related
I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?
It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>
You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>
I have a forum that i found the code for online and i am customizing it. I'm using bootstrap 3, and inside the forum i want to have an 8 x 4 grid. I followed a tutorial but instead of placing it side by side the two divs are top and bottom
<div class="row">
<div class="col-md-8">
<div class="firstPost"
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/banff.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div> <!-- end of 8 -->
<div class="col-md-4">
<p>Something goes here</p>
</div>
</div> <!-- end of row -->
your are missing a closing tag > here
<div class="firstPost"
should be
<div class="firstPost">
This is what I'm trying to achive:
I have list of images which are rotating inside a div (fade in, fade out effect)
in each rotation there is one which displays and all the rest are hidden (display: none)
I am trying to create a "resize" event which will always check the height of only existing image (the only one that is showing in the sequence) and assign this height to it's main container (in my case: the UL)
Here is my HTML:
<ul id="output">
<li>
<div class="description">Lorem Ipsum</div>
<img src="images/sample1.jpg">
</li>
<li>
<div class="description">Lorem Ipsum</div>
<img src="images/sample2.jpg">
</li>
<li>
<div class="description">Lorem Ipsum</div>
<img src="/images/sample3.jpg">
</li>
</ul>
and my JS:
jQuery(window).resize(function() {
slide_img = jQuery.find("ul#output li img");
slide_img_height = jQuery(slide_img).height();
if(jQuery(slide_img).css("display") != "none"){
jQuery("ul#output").height(slide_img_height);
}
});
It is not working. it also get the height of the "hiddden" images in the sequence and displays their height (which equals to 0)
how do I pull only the image with the display block always and get it's height and then assign it to the main UL?
Thanks
Let me make sure I understand your question:
1.) You have a container for several images, only one of which will be visible at a time.
2.) You want to change the size of the container to just fit the image currently displayed.
3.) Are you also trying to display the height (in pixels) as a text element?
If you're just trying to accomplish the first two, you can nest your images in a instead of like:
<div id='output'>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample1.jpg' />
</div>
</div>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample2.jpg' />
</div>
</div>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample3.jpg' />
</div>
</div>
</div>
If you do this, the height of your 'output' div will always be the height of the only displayed image. If you needed to display the value of the actual height, you could use:
var outputHeight = $('#output').height();
Since I can't add enough code in a comment to answer your follow-on question, here it is:
If you need to keep your original structure, try this:
<ul id="output">
<li class="container active">
<div class="description">Lorem Ipsum</div>
<img src="images/sample1.jpg" />
</li>
<li class="container">
<div class="description">Lorem Ipsum</div>
<img src="images/sample2.jpg" />
</li>
<li class="container">
<div class="description">Lorem Ipsum</div>
<img src="images/sample3.jpg" />
</li>
</ul>
Then you can select the <li>'s to be either hidden or visible with some CSS like this:
.contaner {
display: none;
}
.active {
display: inline;
}
Like this, the entire <li> gets removed when you set display: none; and only the visible one will take up space in the <ul>. That will let your <ul> only be as high as the currently displayed image.
Hopefully that answers your question.
So eventually, this is what I came up with and it works perfectly:
jQuery(window).resize(function() {
// variables presenting the LI, IMG and th eheigt of the img
slide_li = jQuery("ul#output li").css('display','list-item');
slide_img = jQuery(slide_li).find('img');
slide_img_height = jQuery(slide_img).height();
jQuery("ul#output").height(slide_img_height);
});
This way I was able to find the only image that has a display of "list-item" (I know it's weird but this is how the slider works, I didn't build it)
and then, get the image height and assign it to the main container which is in my case:
ul#output
Credit to #anson for doing his best to help
Thanks
We are using Bootstrap 2 on a Joomla 3.2.2 site. See: http://test.stuntlist.com/west
The first slide works perfectly, but when the second slide comes in, it disappears. You can see it start to transition between the slides, but then the area where the slide should be just disappears and the content is moved up into the slide area.
I don't see any JS errors on the site. We have used the same carousel code on other sites without this issue.
Here is the carousel code:
<div class="slideshow">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="/component/joomgallery/action-photos?Itemid=88"><span data-picture data-alt="">
<span data-src="/images/hero/slide01.jpg"></span>
<span data-src="/images/hero/portrait/slide01mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide01.jpg" alt=""></noscript>
</span></a>
<div class="carousel-caption">
<div class="container">
<h4>Slide Caption Goes Here.</h4>
</div>
</div>
</div>
<div class="item">
<span data-picture data-alt="">
<span data-src="/images/hero/slide02.jpg"></span>
<span data-src="/images/hero/portrait/slide02mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide02.jpg" alt=""></noscript>
</span>
<div class="carousel-caption">
<div class="container">
<h4>Second Caption.</h4>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
Any idea what could be causing the problem?
Thank you.
This is caused due to a conflict with Mootools, download the following plugin and apply your preferences and it'll resolve this problem:
https://extensions.joomla.org/extension/mootools-enabler-disabler
The problem is Joomla adds another DIV (We will call it JDIV) outside the Carousel container, when second/EVEN Numbered Slides are viewed some script sets the height of the JDIV equal to "0px", see my code below
<div class="col-sm-12 pharma">
<!-- this is the div which joomla is adding (JDIV) -->
<div style="margin: 0px; position: relative; overflow: hidden; height: 0px;">
<!-- this is the div which joomla is adding (JDIV) -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: -203px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
....
</div>
<div class="ind-div">
<ol class="carousel-indicators">
....
</ol>
</div>
</div>
</div>
</div>
The Solution
This solution worked for me and should also work for you too.
Add a CSS class named "#myCarousel" ( ID of the carousel) and sets its margin to 0px with important,
#myCarousel{ margin:0px !important; }
Secondly add another CSS class like
.pharma>div{ height:204px !important; }
where .pharma is the class which I have used on the DIV which is outside the JDIV. The height will be different from what I have used and might have to use media queries if using responsive.
To find the height simply inspect the element and note the height of the first slide and use that height in CSS class.
I do not have a fix for you but I was able to find a few issues. The first and biggest issue being that you have inline styling that is causing the image to "disappear". The image is really just moved 572px upwards and is off the screen. Notice the two images below. The first link is the image that does work. The second link is the image that does not display.
http://tinypic.com/r/hthi4y/8
http://tinypic.com/r/2hoix35/8
Using chrome, I opened the developer console and manually changed the margin to 0px instead of -572px and it fixed the issue. I would take a look at your JS again and see what values are being applied to each image because the entire display is being rendered dynamically, I assume for mobile devices.
I would like to have more than one button on the right side of the Header bar. The docs say you can customize using a DIV, but when I do that the buttons do not have their normal style. Any advice?
The above example puts more than buttons on the header but they are all positioned to the left of the header. I think you can group your buttons in a controlgroup and position the control the group to the right of the header. Maybe something like this:
<div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
//have your button here
</div>
Hope this helps.
This is how I did it, seems clean.
HTML
<div id="myHeader" data-role="header" data-theme="a">
<span class="ui-title"></span>
<div class="ui-btn-right">
<a id="myButton1" class="headerButton" href="#" data-role="button"></a>
<a id="myButton2" class="headerButton" href="#" data-role="button"></a>
</div>
</div>
CSS
.headerButton {
float: left;
margin-right: 5px!important;
}
I've seen this done in the footer (Shown Here), might give you an idea for the header or toolbar
You can use the grid class.
<div class="ui-grid-a ui-btn-right">
<div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
<div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>
<a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left
ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel"
data-theme="a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Cancel</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
</span>
</a>