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..
Related
Anywhere I use a bootstrap button like Button it looks fine and how I want. However I am using the same button on another page within a jQuery UI div. So if I use the button the text is black (should be white) and the colour is off.
I do know I can overwrite the style manually but I'm just wondering does anyone know why this is happening in the first place? Is there anyway I can use the same line as I always do.
Here is an example of how it is written in my code:
<div id="tabs">
<form>
<div id="tabs-1">
<div class="form-control">
Button
</div>
</div>
</form>
</div>
.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}
.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}
.btn-success.focus,.btn-success:focus{color:#fff;background-color:#218838;border-color:#1e7e34;box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}
The code was working for me. But if its not working for you, then you can add the above code into the styling directly without removing bootstrap style link.This code does the same styling.
Thankyou
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 develop a small angular material application. My objective is to obtain the following design for a card, that fit on every kind of media (desktop, mobile, tablette)
my "app.component.html" is the following
<mat-toolbar color="primary">
<div style="width:100%;" class="md-toolbar-tools" >
Liste des annonces
<span flex></span>
</div>
</mat-toolbar>
<div fxLayout="row">
<div fxFlex="20%"></div>
<div fxFlex="60%">
<mat-card *ngFor="let annonce of annonces; let i = index" style="border:red">
<mat-card-content style="border:blue">
<img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
<div class="container" style="left: 45%; top:10px;">
<div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
<div>
<span>{{annonce.type}}</span>
<span style="float:right">{{annonce.prix}}</span>
</div>
<h4>{{annonce.surface}}</h4>
<h4>{{annonce.adresse}}</h4>
<div style="left:45%;">
<p>{{annonce.description}}</p>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div fxFlex="20%"></div>
</div>
<router-outlet></router-outlet>
I am terrible in placing elements and text in html pages, and therefore in a material card. I obtain the following output in the browser
Furthermore when I shrink my browser, I can't see the element and text on the rigth of the image placed correctly. I tried to reproduce the same on stackblitz (https://stackblitz.com/edit/angular-pexq15?file=package.json), but I got trouble with the angular material tags that are not taken in account.
So could you help me and tell me what is going wrong and comment the correct code so I improve myself in html/css. Thanks a lot
You should try leveraging the #angular/flex-layout Library for this. Additionally, you should consider moving your styles to your CSS File, since this will make your HTML File a lot cleaner and the styles more reusable. In your stackblitz you missed to include the styles for #angular/material in your SCSS File and you did not import the #angular/flex-layout module, which is why your stylings were messed up.
I tried to fix your example on Stackblitz. To get the desired spacings for your text, simply add paddings or margins to the left of those elements. Also beware of your image: You have to add a fitting height property, or it will become cropped/stretched.
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>
I use sematic-ui css framework and load a modal with svg content.
The modal loads the first time after a page refresh half way the screen.
After clicking the modal link it a second time without a page refresh, the modal is on its correct place.
This happens with all the modals on the page.
When i display a png in the modal, with the same html and css, it behaves as expected, it is placed in the correct place.
Code of the modal an the javascript calling it:
<script type="text/javascript">$(document).ready(function() {
$('.ui.button.modal1456524726671605').click(function () {
$('.ui.modal.modal1456524726671605').modal('show')
});
});
</script>
<div class="ui small modal modal1456524726671605"><i class="icon close"></i>
<div class="header ui">Window title</div>
<div class="content">
<figure>
<embed src="../static/img/charts/1456524726671605hnxiwhkc.svg" type="image/svg+xml" width="100%"/>
</figure>
</div>
</div>
I could not find out what is causing this behaviour, so maybe one of you have a clue for me!
Thanks in advance.