as cake3 is using foundation framework, how can I use the reveal moadl function?
I tried simply copy and paste this to my view:
<p><a data-open="exampleModal1">Click me for a modal</a></p>
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
But when I test it, I don't get any error but also the div is visible and not hidden and the "Click me for a modal" does also nothing.
Do I need to include any further files on order to use this in cake?
Related
I would like to remove the button bar at the top (I can't get it to display anyway) and replace it with a simple close button on the top right corner of the photo. How wis this best done? Thanks.
Please show your code or give more information as to why you can't get the top bar to display if you want help with that.
The best way to do what your asking is to simply remove all buttons except for close from the HTML code on the page with your gallery.
See this code in the example documentation:
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
You want to delete or comment out the lines with the buttons you don't want. I prefer to comment it out so they are recoverable if you decide you want them later. In that case if you only want the close button it should look like this:
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<!--<button class="pswp__button pswp__button--share" title="Share"></button>-->
<!--<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>-->
<!--<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>-->
I have the following code inside my asp.net mvc core web application + bootstrap 4.0, which show a FAQ question:-
#foreach (var item2 in Model.OrderBy(a => a.Description))
{
<div class="card">
<div class="card-header" id="#item2.Id+'headingTwoa'">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
data-target="##item2.Id" aria-expanded="false"
aria-controls="collapseTwo">
#Html.DisplayFor(modelItem => item2.Description)
</button>
</h5>
</div>
<div id="#item2.Id" class="collapse" aria-labelledby="headingTwoa"
data-parent="#accordion" style="">
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
but the problem i am facing is that the question description will spell out of screen on small sized screens, while the answer text will align to the screen size.. so not sure how i can force the button text to span multiple lines on small sized screens?
Edit-1:-
Here is a markup for a question which spells out of page layout on small sized screens:-
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#1004" aria-expanded="false" aria-controls="collapseTwo">
What services are being provided? What if my practice is already performing these services?
</button>
https://prnt.sc/t3ptin From Bootstrap's official website -> I just added text to the button and it automatically spans on multiple lines
Please, provide screenshots of an actual webpage and HTML code not from your ASP.NET but from the "elements" tab of the browser. I believe you just have a really big word.
If so, check this link(interactive) https://developer.mozilla.org/ru/docs/Web/CSS/word-break
Edit 1
Just copypasted your button into exact same component on the bootstraps website(https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example) - https://prnt.sc/t3t7k6 Still works as expected.
It is still hard to give you a clear answer...
I will suggest two things:
try too add a btn-block class to your buttons
provide screenshots of what you have now and also screenshots of the computed props tab https://prnt.sc/t3t9rr 1) select your button 2) switch to computed tab 3) share all the props that browser applies to your button, maybe there is something custom
Thank you for reading my message, here is my problem :
I'm using a navbar made with Bulma in which I display either login/register buttons or a profile picture icon from FontAwesome using {{#if currentUser}} as shown below ("S'inscrire" and "Se connecter" means register and login in French) :
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
{{#if currentUser}}
<!-- Displayed only when the user is logged in-->
<i class="fas fa-user icon is-large" id="userProfile"></i>
{{else}}
<!-- Displayed when the user is NOT logged in-->
<a class="button is-primary register">
<strong>S'inscrire</strong>
</a>
<a class="button is-light login">Se connecter</a>
{{/if}}
</div>
</div>
</div>
When the user is not logged in it only show the buttons :
And when he logs in I have only the icon :
My problem is that when user logs out, I got both user icon and buttons :
and if I log in and out multiple times I get multiple icons.
Looks like it's a problem with FontAwesome icon, I've tried with a normal image instead of the icon and it behaved normally, but I need to use icons inside this type of statement in some place of my app.
Thanks in advance !
This is because font awesome 5 replaces the <i> tag with an svg which will break your code reactivity if it's not wrapped inside another flow element. Try wrapping the <i> with a <span> in order to keep the reactivity going:
<span>
<i class="fas fa-user icon is-large" id="userProfile"></i>
</span>
You could also make this a short stateless template:
<template name="icon">
<span>
<i class="fas fa-{{name}} {{#if large}}is-large{{/if}}" id="{{id}}"></i>
</span>
</template>
and call it like
{{>icon name="user" large=true id="userProfile"}}
I'm using standard Bootstrap 3 classes to style a modal. I'm having some issues with the alignment of a checkbox, and can't for the life of me figure out how to fix it.
Here's what it looks like when it's full-width:
The checkbox is not quite aligned center-vertical with the text, and it would be nice to fix, but that's not my main issue.
Here's what it looks like at a narrower view:
At first I thought it was something in my code, like a style that was overriding Bootstrap, but I've copied my html into a bootply using nothing but standard bootstrap classes, and it behaves the same way.
My css is nothing to write home about; can anyone help me?
You have to change some classes. In the form you have the class form-inline. You must get rid of that class because all the elements get inline inside.
In the input the class .form-control are set to width: 100%; by default, So you must clean that class.
HTML
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="trialModal" class="modal fade in" style="display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Free Trial!</h4>
</div>
<div class="modal-body">
<p style="display:none" id="confirm_message">Thanks for your interest in OurProduct.</p>
<p style="display:none" id="error_message"></p>
<form class="">
<div class="form-group">
<label for="mail">Email</label><br><input placeholder="jane.doe#example.com" id="mail" class="form-control" type="email"></div>
<div class="form-group">
<input class="" id="agree_terms" value="1" type="checkbox">I confirm that I am over 13 years of age and agree to the <a id="modal_privacy_link">Terms and Conditions and Privacy Policy</a>.
</div>
</form>
<div class="modal_privacy">
<h2>Terms and Conditions and Privacy Policy</h2>
<p>We may send you information about our products and services and may contact you about new features or products in which we believe you may be interested. We also may use your contact information for marketing and other purposes. Although we do not currently rent, sell, or otherwise share your information with third parties for purposes unrelated to our products and services, we may do so in the future. If you do not want your information to be shared, you should contact us at support#ourproduct.com. The supply of our products and services will not be conditional upon you consenting to the collection, use, or disclosure of personally identifiable information beyond that required to provide our products, services, or other related purposes.</p>
</div>
</div>
<!-- create new form in block here. just email. call new module to send email and create user--><div class="modal-footer">
<button id="email_link" class="btn btn-default" type="button">Email me a link</button><br><button id="download_trial_64" class="btn btn-default" type="button">Download 64-bit trial</button><br><button id="download_trial_32" class="btn btn-default" type="button">Download 32-bit trial</button><br><button id="working_link" class="btn btn-default" type="button" style="display: none"><span class="glyphicon glyphicon-refresh spinning"></span> Processing...</button>
</div>
</div>
<!-- /.modal-content --></div>
<!-- /.modal-dialog --></div>
DEMO HERE
As a good UX practice and HTML syntax, you should put your message between <label> tags to actually check the box when you click on the message.
<div class="form-group">
<input class="" id="agree_terms" value="1" type="checkbox">
<label for="agree_terms">I confirm that I am over 13 years of age and agree to the <a id="modal_privacy_link">Terms and Conditions and Privacy Policy</a>.</label>
</div>
I'm using a template based on Bootstrap 3 and there is a weird display issue with Firefox for file input elements: basically the click area covers a huge part of the page, which means that anything around them cannot be clicked without triggering a file upload.
Here is what I mean by large area (with Firebug, based on the <input type="file"> element):
While with Chrome it's fine:
And with IE it's also fine.
Here is the link to the theme page where you see the issue (only happening to the first type of "advanced file input", where the input element itself is displayed): http://www.keenthemes.com/preview/metronic_admin/components_form_tools.html
And here is the code for the file display:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input span3" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="documents-0">
</span>
Remove
</div>
</div>
Any idea how I can force the input element click zone to stay within its limits on Firefox?
Thanks in advance!