I have a React-Bootstrap Panel with a short title but possibly wide collapsible content, like so:
<Panel>
<Panel.Heading>
<Panel.Title toggle>
Hello
</Panel.Title>
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>
Really wide body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Panel.Body>
</Panel.Collapse>
</Panel>
This results in a really thin Panel.Heading when collapsed, but a really wide Panel.Heading when expanded, like so:
My question is, how can I make the width of my Panel.Heading match the width of Panel.Body, even when collapsed?
Related
I have a paragraph with a style like this:
<p style={{display:'flex', justifyContent:'flex-end'}}>{props.message}</p>
The following with mutliple lines looks like this:
As you can see it starts from right to left with small message, but if I have more text I want to achieve multiple lines like at the first message. How can I do that? Thanks in advance.
Edit: I tried all of the SO answers in wrapping but they didn't work.
With this same result:
<p style={{display:'flex',flexDirection:'row', flexWrap:'wrap-reverse', justifyContent:'flex-end'}}>{props.message}</p>
You can try setting a max-width on the element that contains the text.
p {
max-width: 45ch;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
I am trying to have a button that slides to a specific div on the same page. I have previously been able to do it when the other div to target had a specific id, using href="#div_id".
However, the div I am currently trying to target only has a class, and I am unable to add an id to that specific div.
This is all in wordpress, and since I am completely new I don't know how to do it via javascript (have to hook into the specific button, and call a function - which is too complicated for me).
Best regards, and thanks in advance
If you can use JavaScript, you can do this in the onload of your page. (Or at the end of the body, whatever you prefer.)
document.querySelector('.yourclassname').id = 'yourchosenid';
where yourclassname is the class of the div and yourchosenid is the id you want to assign to it. Then you can use the href as usual with href="#yourchosenid".
Note that both yourclassname and yourchosenid must be unique in order for this to work!
click here
<div>This is a filler. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="whateverclassyouhave"><strong>This is the intended target!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<script>
document.querySelector('.whateverclassyouhave').id = 'insertidhere';
</script>
You can't make url to class because class may be applied to many elements and id defines the unique element.
What you can do is try to override click behavior on class with JavaScript when class element matches your requirements.
Targeting elements by class is not very reliable solution, unless you're careful with them and not repeat them. I would suggest something like that, in jQuery:
link
and in JS file:
$('.js-scroll').on('click', function(e) {
e.preventDefault();
var target = $(this).data('target');
$('html, body').animate({
scrollTo: $(target).offset().top
}, 600);
});
In this way, you will have a smooth scroll to your desired element.
Suppose i have taken an image inside a column and taken text in another column in bootstrap, now want to align that image at the middle (vertically & horizontally) of that div. How to do that?
My codes are:
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="pia-icon-performance.png" class="img-responsive">
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
the image is not center along with the text. Please help
have you messed about with your margins?
i presume if you get the height of the container minus height of image divide by 2 and add that to a margin-top in css
img{
margin-top:100px;}
I am using bootstrap 3 for my website. I have used bootstrap provided tooltip which I have been displaying on image click.
But the problem I am facing is: when I click the first time on the image it works properly, but when I click on 2nd time its position changes. I have attached two images which I get on 1st click and on 2nd click. Please provide solution for it.
I'm adding coding which I'm using .
$('#trypersonalLink').tooltip({
title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
placement : "right",
trigger : "click",
html : true,
container : 'body'
}).on('shown.bs.tooltip', function () {
$('.tooltip.right').css('margin-left', '-86px');
$('.tooltip-inner').css({
'max-width':'370px',
'width':'445px'
});
});
Here is what happens :
You click on the button
The tooltip is loaded with default size, its position is JS-calculated (based on size)
shown.bs.tooltip is triggered
You change the tooltip size
Another click on the button
The tooltip is reloaded, but its position is re-calculated, based on its new size !
That's why your tooltip hasn't the same position on the first load only.
To fix this, you should avoid setting margin, max-width and width in shown.bs.tooltip. Use CSS for it !
$('#trypersonalLink').tooltip({
title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
placement : "right",
trigger : "click",
html : true,
container : 'body'
});
.tooltip-inner {
max-width: 370px;
}
Bonus
If you only want to increase this tooltip size, but not the other ones, you can specify a different container in your options :
$('#trypersonalLink').tooltip({
title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
placement : "right",
trigger : "click",
html : true,
container : '#extended'
});
$('#trypersonalLink2').tooltip({
title : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
placement : "right",
trigger : "click",
html : true,
container : 'body'
});
#extended .tooltip-inner {
max-width: 370px;
}
Bootply
When I stretch my browser window so no scrollbar appears, my content is fine. However, if I shrink my browser to a small height where a scrollbar appears, my background-color is cut off past the viewport. Here is the code, jsfiddle at bottom:
<div id="container">
<header>
<p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</header>
<div role="main">
<div id="content-listing">
<p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--end content-listing-->
<div id="content-display">
<article>
<section class="prop-desc">
<p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</article>
</div><!--end content-display-->
</div><!--end main-->
</div><!--end container-->
And the CSS:
/* ///// Globals ///// */
body{background-color:green;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
body,html{height:100%;}
::-webkit-scrollbar-thumb:vertical{height:10px;background:#fff;}
::-webkit-scrollbar {width:10px;height:5px;background:yellow;margin-right:5px;}
img{max-width:100%;}
/* ///// Layout ///// */
#container{width:90%;height:100%;}/*960px*/
header{width:17.708333333333%;float:left;background-color:blue;height:100%;}/*170px*/
div[role=main]{width:82.291666666667%;float:left;height:100%;}/*790px*/
#content-listing{width:29.113924050633%;float:left;background-color:red;height:100%;}/*230px*/
#content-display{width:70.886075949367%;float:left;background-color:orange;height:100%;color:#fff;}/*560px*/
To demonstrate what I mean, click the fiddle below and resize your window so there is no scrollbar and again so that a vertical scrollbar appears:
http://jsfiddle.net/g2748/3/
Try removing the height: 100%; from your divs. It should work.
So, the way I solved this was I added padding-bottom:20010px;margin-bottom: -20000px; to the 3 columns. I adapted this technique from here:
http://www.alistapart.com/articles/holygrail
I then added min-height:100% and overflow:hidden to the #container div. It's a little hacky bit it did the trick:
http://jsfiddle.net/g2748/6/