With the following HTML and JS:
<div id="dialog" style="display:none;">
<div class="dialog-title">Dialog Title</div>
Some text
<div class="dialog-buttons">
<button class="uk-button">Button 1</button>
<button class="uk-button">Button 2</button>
</div>
</div>
<button onClick="$('#dialog').modal();">open dialog</button>
I get a simplemodal that is not big enough for the contents, with styled buttons using UI-Kit (http://getuikit.com/). The buttons are too wide so are wrapped, making the second button appear outside of the modal.
Any ideas how to get the simplemodal sized correctly?
Thanks!
I've not got the perfect answer but I do have a working answer, adjust the css.
/* Container */
#simplemodal-container {
height:auto !important;
width:600px;
...
}
Related
I was reading bootstrap Collapse docs and decided to try horizontal collapse. Here is the code of a Vue component that used same code as bootstrap docs:
Vue component:
<template>
<section>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsId" aria-expanded="false" aria-controls="collapsId">
Toggle width collapse
</button>
</div>
<div>
<div class="collapse collapse-horizontal" id="collapsId">
<div class="card card-body" style="width:50%;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
</section>
</template>
But the transition to expand the .card does not work correctly. At first the .card has the whole height of the page and then suddenly it expands completely to 50% width! If I use style="width:500px;" instead of style="width:50%;", that works correctly. Could any developer please help me why it does not work with relative width? Bootstrap docs said:
Feel free to write your own custom Sass, use inline styles, or use our width utilities.
But that does not work correctly!
I have been using owl carousel 1.3 on pages that generally have a wrapper container that sets the width to 1200px.
I started to build responsive sites and don't use a fixed width on any wrappers now, i am also using version 2 of Owl.
I am using the bootstrap grid layout and trying to make my owl carousel responsive. However i can't get this to work and it seems it only works if you set a width on a parent div.
For example if i have this:
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel">
<div><h2>Item 1</h2></div>
<div><h2>Item 2</h2></div>
<div><h2>Item 3</h2></div>
</div>
</div>
<div class="col-md-4">
<h2> Just a right hand panel</h2>
</div>
</div>
</div>
The owl slider will take up 100% of the screen width, it will ignore the col-md-8 width of 66% so i end up with a broken layout.
Is owl carousel truly responsive or do you have to fix a width to it for it to work?
I know this is old problem but i sloved it with wrapper and little jQ code.
Owl-carousel doesnt support bootstrap class "container-fuild", and when you use this class for owl, will crash width of your page so you need to set width of the wrapper.
Remember add resize event.
My HTML ( div with class owl-wrapper used in jQ ):
<section class="container-fluid">
<div class="owl-wrapper">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel owl-theme ">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</section>
jQuery file:
$(document).ready(function($){
var windowWidth = $( window ).width();
$('.owl-wrapper').css('width', windowWidth);
$('.owl-carousel').owlCarousel({
loop:true
});
});
Try putting min-width : 100% on the parent container.
I have a panel that floats right within a container. When my data-spy affix executes, the side-panel gains the position: fixed property which removes the float: right. The panel becomes fixed at the correct height, but becomes fixed at the left in the container not the right in the container. I cannot simply state a fixed value for the left property because I am using a container fixed to 1200px, not container-fluid and the left offset changes whenever the user resizes their screen.
How can I set the panel mimic float-right while affixed near the top of the view?
<div id="navbarContainer" class="affix-top clearfix" data-spy="affix" data-offset-top="70">
<div class="navbar navbar-inverse navbar-static-top" role="navigation" id="topnavbar">
</div>
</div>
// code removed
<div class="container">
<div id="right_panel" class="panel right-panel pull-right">
<div class="panel-head">
Related Information
</div>
<div class="panel-body">A Basic Panel</div>
</div>
css
.rightpanelAffix{
position:fixed;
top:101px;
}
js
$("#navbarContainer").on("affixed.bs.affix", function () {
$("#body").addClass("bodyAffixPadding");
$("#right_panel").addClass("rightpanelAffix");
});
$("#navbarContainer").on("affixed-top.bs.affix", function () {
$("#body").removeClass("bodyAffixPadding");
$("#right_panel").removeClass("rightpanelAffix");
});
Please Show us some code. and may be you want to ask that you can't adjust your container size. Let me know if this helps.
Check this out
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-6"></div></div></div>
I am using Bootstrap's grid to align an input, a button and an alert message.
However, I found the height of alert message is much higher than that of button and input.
Is there a way to make the height of all elements in grid consistent?
Here is example and code:
https://jsfiddle.net/rktg0L2w/
<div class="container-fluid">
<div class="row" >
<div class="col-xs-3 col-xs-offset-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
<div class="alert alert-success"> Result: </div>
</div>
</div>
</div>
Thanks
Derek
Alert div isn't made to place inside your views. It has it's own padding and margin. It is usually put at the top of page.
However if you want to put it inside your view. You could either make it small by removing padding or make your view vertical align.
I made both alternatives in this https://jsfiddle.net/rktg0L2w/1/
1) For small alter div that matches your input change padding:
.alert-small{
padding: 7px;
}
2) In case you want to make both input and alter vertical align:
Place vcenter class on your row div and alert-large on your alter div.
.vcenter {
display: flex;
align-items: center;
}
.alert-large{
margin-bottom: 0px;
}
Bootstrap has its own standard, however you can change the code by edit the raw bootstrap css or override the bootstrap css code. For example :
padding is the problem in your case, click here for 1st picture
hola, click here for 2nd picture
However, you can make it specific by adding new class or with your superpower and your handsomeness tho
t(.__.t) my life
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.