I have a popover code that is working fine. However when the popover is inside a div, then it stops working.
<section class="content-section">
<h2>What Are They?</h2>
//this popover is working
<p>Also known as <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Research community) pronounced 'M-Rock'. One of the terms used for a research community." title="" data-original-title="MROC (Market Research Online Community)">MROCs</span> (Market Research Online Community) the commun only, Webs.</p>
</section>
<hr />
<section class="content-section">
<h2>Pros and Cons</h2>
<section class="tabs" style=' margin-top:15em;'>
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Pros</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Cons</label>
<div class="content less-stuff">
<div class="content-1">
<h3>Pros</h3>
//this popover is NOT working
<p>Communities are usually larger than any set of <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Focus Group Interview or Group D with fewer participants - possibly 4-6." title="" data-original-title="Focus Group">focus groups</span>. This can allow minority opin-minded participants to take place - rich data that would never emerge in a focus group setting.</p>
</div>
<div class="content-2">
<h3>Cons</h3>
<p>Qualitative-nflection is lost.</p>
</div>
</div>
</section>
</section>
Here is the JSFIDDLE: https://jsfiddle.net/erkaner/46awL808/2/
You will see two words with blue background, first one is showing popover, but second one is not.
Does anyone have any idea how to resolve this issue?
It's side effects of your css selector.
Updated fiddle
Just use the right selector on your markup, I just replace section.tabs .content div with section.tabs .content > div, then it worked.
Related
I want to make full with the button on right side.
I added btn-block on button element but it's dont working i don't know why.
Jsfiddle Here
<div class="fieldset">
<div class="field qty">
<label class="label" for="qty"><span>Qlty</span></label>
<div class="control control-qty-cart">
<span class="quantity-controls quantity-minus"></span>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Aantal" class="qty-default input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":1}}">
</div>
</div>
<div class="actions">
<button type="submit" title="In Winkelwagen" class="action primary tocart btn-block" id="product-addtocart-button">
<span>In Winkelwagen</span>
</button>
</div>
</div>
Not sure where you took that bootstrap code from. I tried with this links and it worked. Also better to add it as an external library rather than to put the code there directly.
For bootstrap 3 (css): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
For bootstrap 3 (js): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
For bootstrap 4 get the cdn from this link: https://getbootstrap.com
i'm trying to force bootstrap to vertical align this col in desktop view. because it's overlaping otherwise
the mess now :
enter image description here
so the problem fix it self if i resize the windows until it reach the mobile view (it will automaticly vertical align the div.) but i want it to be like that in any windows size.
what i trying to :
enter image description here
here is the catch. i can only acsess the css on that particular div.
because it's dynamically generated. and i cant change the html part.
here is what the html looks like :
<ul class="subquestions-list questions-list checkbox-list list-unstyled">
<div class="row">
<div class="col-md-1">
<li id="javatbd736732X11537X92547SQ001" class="question-item answer-item checkbox-item">
<div class="checkbox">
<label for="answer736732X11537X92547SQ001" class="answertext"><input class="checkbox" type="checkbox" name="736732X11537X92547SQ001" id="answer736732X11537X92547SQ001" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)"><input type="hidden" name="java736732X11537X92547SQ001" id="java736732X11537X92547SQ001" value="">Grundlagen der Informatik</label>
</div>
</li>
</div>
<div class="col-md-1">
<li id="javatbd736732X11537X92547SQ002" class="question-item answer-item checkbox-item">
<div class="checkbox"><label for="answer736732X11537X92547SQ002" class="answertext"><input class="checkbox" type="checkbox" name="736732X11537X92547SQ002" id="answer736732X11537X92547SQ002" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)"><input type="hidden" name="java736732X11537X92547SQ002" id="java736732X11537X92547SQ002" value="">Theoretische Informatik</label></div>
</li>
</div>
</div>
</ul>
i can also acsess it with javascript using dom manipulation. but i dont think it helps that much.
please help me!
thanks!
I am trying to align inputs and buttons using the .input-group class as shown here.
It works well and shows the desired output when I place a button before the text box.
But, when I place the button next to the text box, the button doesn't stay close to the text box.
I am using Bootstrap 3 in my ASP.NET project, created using Visual Studio 2015 Community Edition.
Here is the code:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
I had the exact same problem and I looked at cale_b's fiddle and it appeared correct for me. So I scratched my head trying to figure out what was different in my environment. I noticed that in my site.css (my custom css for my app), I had the following:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Once I removed (or commented out) that CSS, then it worked. But now I need to find a different approach to default the max-widths on my inputs. Oh well, at least it solved my problem, hope it solved yours.
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.
I am doing jQuery Mobile, how to make the checkbox for "stay signed in" is same line with button login.
please refer my jsfiddle.net/mapsv3/sZdCu/
My goal is same interface with Google signin box like
Thank you for your help!
Using the grid/block classes from jquery mobile will allow you to inline your elements simply.
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-theme="d" id="loginButton" data-role="button" data-inline="true" data-mini="true" value="Login" href="booking.html" rel="external" >Login</a>
</div>
<div class="ui-block-b">
<input type="checkbox" name="checkbox-1" id="checkbox-1" data-mini="true">
<label for="checkbox-1">Stay Signed in</label>
</div>
</div>
You could also add
data-role="none" this will remove the styling on the checkbox. I had to build something similar and it was quite hard.