I am using the UIKit bundle CSS with an ASP.NET site. I am using toggle to show/hide comments attached to a section of HTML.
<div class="uk-card-footer">
<div id="toggle-animation" class="uk-card uk-card-default uk-card-body uk-margin-small">
<p>Commetns here about various things that I wanted to mention to you </p>
<hr />
<p>Some more comments from someone else right here!</p>
</div>
</div>
However, the content (the two sections) starts off or defaults as visible. How do I adjust this so that the user has to click the button to toggle the information to visible initially? Rather than to invisible initially as appears to be the default?
The Answer is near that. If you are using the uk-hidden class it blocks everything. as written here: https://github.com/uikit/uikit/issues/3026 just add the attribute hidden to your div.
<div class"" hidden><p>Something</p></div>
<button uk-toggle="your settings">See more<button>
The documentation isn't very specific about this, but what you need is to toggle a custom class.
In the uk-toggle attribute, you want to add cls: uk-hidden;. Then, on the element that you want to show when your button is clicked, you want to add the class uk-hidden.
<div id="toggle-animation" class="uk-card uk-card-default uk-card-body uk-margin-small uk-hidden">
...
</div>
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
According to Bulma's site (and everywhere else) modals are not supposed to show unless they have the "is-active" class attribute. However, my modals keep showing up as formatted text wherever I put them. They do not pop-up over the page, and they always show. I'm guessing I need to add something in mystyles.css as "modal" never appears in the 3416 lines of code created by Bulma.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet" />
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content has-background-white py-5 px-5">
<h3 class="title mb-6">
Hi mom
</h3>
</div>
</div>
And here is what my site looks like on page load:
Does anyone know what code I need to add to get the regular modal behavior?
In your code snippet it works just fine and the modal is being hidden (display: none; on the .modal class by bulma). So you are probably not loading in bulma properly..
I am trying to fix an accessibility defect in an Angular project at work. When a page loads and I start to tab through the page, the first element that is visible in the form is read twice. My code is something like below
<form [formGroup]="form" role="form" attr.aria-label="Edit Form" novalidate>
<div class="form-row">
<div class="col-md-9 col-sm-12 col-lg-9 paddingLR0">
<!-- Hidden code not rendered due to ngIf=false -->
<div role="region" attr.aria-label="Edit button region" *ngIf="viewMode">
<!-- Hidden elements not rendered due to ngIf=false -->
<button *ngIf="isEditable" [disabled]="!canEdit" type="submit" (click)="enableEdit()">
Edit
</button>
<div class="back-header">
<a tabindex=0 (keyup.enter)="back()" (click)="back()" (mouseover)="changeBackIconOnHover('back-region-top')" (mouseout)="changeBackIcon('back-region-top')" id="back-region-top">
<img src="{{pathImg}}/back_black.png"
<span class="margin-left10">Back</span>
</a>
</div>
</div>
</div>
</div>
<!-- More code here -->
</form>
If you see the code the first element that is visible is the Edit button, nested in a div with role as region, which is in turn inside a form with role form. When I tab through the page instead of just reading the button just once Edit button JAWS reads Edit Form form region. Edit Button on first tab, then reads Edit button region. Edit Button. There are no tabindexes on the parent elements. Removing the role attribute and the corresponding labels does not work. How do I only make jaws read the edit button once?
The above problem was occuring because of an empty div which had a tabindex=0.
So in the code snippet above I had a commented line
<!-- Hidden code not rendered due to ngIf=false -->
That referred to multiple divs which are warning, success and error messages related to the form in my actual code. Each of those divs have an ngIf for conditional rendering and a tabindex=0 to make it tab accessible. Except one of those divs simply had a tabindex but no ngIf. So it was always rendered. Like below.
<div tabindex=0>
<div ngIf="condition"> {{errormessage}}
</div>
</div>
If JAWS tabs onto an empty element it reads the previous labels. I removed the outer div which was remaining empty and the problem is solved.
I have a (complex) toolbar panel which can be on top or bottom of a page (it's configurable). Is there any way to avoid copy/paste the toolbar in bottom of the page?
Here is code in copy/paste way:
<div id="topToolbar" data-ng-show="configs.toolbarPosition=='TOP'">
<!-- toolbar -->
</div>
<div>
<!-- inner page contents -->
</div>
<div id="bottomToolbar" data-ng-show="configs.toolbarPosition=='BOTTOM'">
<!-- exactly copy/pasted toolbar -->
</div>
Keep the tool bar html in separate file, and include where ever you need.
<ng-include src="'views/toolbar.html'"></ng-include>
Also if you needed add a controller for all functionality. This will help you to reuse your code.
you can check how components are made
and make component <toolbar></toolbar>
So I was reading the following article: Create Modal window with CSS3
However, I'm wanting to modify it by adding more than one modal box to my site.
Here is the code to the original modal:
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>etc..etc..</p>
</div>
There is no CSS call for the <div id=openModal"
To create multiple modals, my assumption would be to change the div to <div id=openModal2" class="modalDialog2">
The styling is only on the modalDialog box, So for a second modal, I would assume I'd change the class name for that too.
However, every time I do this, it does not open the modal box.
Here is my code:
Box 1
<div id="openModal1" class="modalDialog1">
<div>
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3. </p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
Box 2
<div id="openModal2" class="modalDialog2">
<div>
X
<h2>Modal Box 2</h2>
<p><strong>Box 2</strong></p>
<p>yadda yadda</p>
</div>
What am I doing wrong here?
you don't have to change the class. The role of classes is to apply the same style to different elements, so keeping it modalDialog will do the job.
Demo: http://jsfiddle.net/3Vykc/
I just solved this problem about an hour ago, right before reading this article. I didn't change the class at all, as indicated in the answer above. I simply created a new ID (with some new properties) for the second modal box and it worked fine.
This said, I ran into this article because I'm having a problem with overflow: scroll/auto only in Chrome with some iframed (yuck, but I have no choice, it comes from a third-party credit card vendor I have to use on this project) content for the modal box. Now if anyone has a solution for this one... :)