I'm reading over aria right now and I have a preloader (spinner) and it doesnt show how much percentage is loaded. I can use
<div aria-busy="true" aria-label="Loading, please wait." role=""></div>
But what role should I use? It's not a progressbar since I dont have a percentage or any indicator how much is loaded.
You can still use progressbar even if you don't have a percentage. That's what we do.
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" aria-labelledby="__indicator1-label">
We don't use aria-busy but perhaps we should. We also use window.setTimeout() and update a visually invisible <span role="alert"> every X number of seconds so that the screen reader can hear "still loading" (or whatever text you want to use). We don't update any percentage, we just keep refreshing the "still loading" message.
You can use the following role for the loader.
role="progressbar"
Related
TL;DR how can I get the images to fill the grid squares on this page.
I am working on a site I inherited that has been through three different web designers so it's a bit of a mess on the back end. It also uses timber/twig/acf which were new to me so I spent last week trying to figure out how everything is configured. I was trying to replicate this archive page so was playing around with the CSS but when I left work Friday everything was fine...this morning suddenly the images don't fill the grid squares. I don't know if something I did changed it and it was delayed bc of caching or if there was an update or what but I would love to change it back before anyone notices. I actually have the old version of the page still open where the images do fill grid squares and have spent all day looking through the code to see what changed but can't find any difference.
It's this css rule that preventing it from taking 100% width:
.rtr-6-grid:not(.knowledge-cta) .p-absolute.p-center div {
width: 470px;
}
Change this :
<div class="d-flex d-flex--y-center d-flex--x-center p-absolute p-center rtr-fill">
<div>
<img src="..." width="1779" height="1779">
</div>
</div>
To this :
<div class="p-absolute">
<div>
<img src="..." width="auto">
</div>
</div>
When wiring together Trix editor content with Livewire, I am stumbling into problems. I believe that the issue is that when Livewire receives content from Trix, the content is swapped out and Trix becomes disabled. Is there a better way?
What I have done, that works, is as follows. At the moment, the page is the redirected to itself in order to reboot Trix (defeating the whole point of Livewire, but it's being used for other things too).
<div>
<input
id="newCommentTextTrixContent"
type="hidden"
wire:model="newCommentText"
>
<trix-editor
id="newCommentTextTrixEditor"
input="newCommentTextTrixContent"
></trix-editor>
<button wire:click="addComment(document.getElementById('newCommentTextTrixEditor').innerHTML)">Add Comment</button>
</div>
I have tried
wire:model on the hidden input -- nothing happens
x-on:trix-change="$set('comment', $event.target.innerHTML) -- this works, but Trix goes grey and ceases to work after the first keypress (reboot problem?)
I'm sure something like the latter is better, but with Trix somehow being rebooted each time. It all seems a bit messy - so the question is, what's the right way to do this?
I got it working. With up to date Livewire and Alpine installations, the code is roughly as follows.
<div wire:ignore>
<trix-editor
class="formatted-content"
x-data
x-on:trix-change="$dispatch('input', event.target.value)"
x-ref="trix"
wire:model.debounce.60s="newCommentText"
wire:key="uniqueKey"
></trix-editor>
</div>
Why does this work?
You need wire:ignore on the parent node, because Trix inserts the toolbar above the text area. wire:ignore stops Livewire from worrying about it and therefore not removing it or messing with it on the next cycle.
You need a wire:key because the DOM moves around a bit, and this helps Livewire to keep track of it.
I propose the long debounce, which is a hack as the .lazy modifier doesn't work well with text. Also, waiting for Ajax on each key press is painful.
The alpine event ensures that Trix events (like bold, italics etc) are still fired
That's it. I use this above to repetitively submit comments onto the end of a comment stream, and everything seems to work fine. Good luck!
Note, I also have CKEditor working similarly, as described here.
As an extension on #Kurucu 's answer, and the comment under it from #Rehan;
This seems to work very well. But when I apply styles like li or bold
it doesnt retain in the wire:model. Ex:
<div>foo<br>bar<br>foobar</div> I applied the Bullets here the tags
are missing. Did you face this issue? – Rehan
To fix the issue of not having an updated value when pressing buttons bold, italic, or quote for example, add the following part to the trix editor (note the x-on:trix-change="$dispatch('input', event.target.value)"):
<div wire:ignore>
<trix-editor
class="formatted-content"
x-data
x-on:trix-change="$dispatch('input', event.target.value)"
wire:model.debounce.1000ms="newCommentText"
wire:key="uniqueKey"
></trix-editor>
</div>
The above option works but wasn't getting the data back from my field, Here's what worked for me with a little tweak using AlpineJS's #entangle.
Below is my working solution:
<div class="mb-2" x-data="{ description: #entangle('description').defer }"
x-init="$watch('description', function (value) {
$refs.trix.editor.loadHTML(value)
var length = $refs.trix.editor.getDocument().toString().length
$refs.trix.editor.setSelectedRange(length - 1)
}
)" wire:ignore>
<label class="form-label">Job Description <span class="text-danger">*</span></label>
#error('description')
<span class="error d-inline-block"><i class="mdi mdi-alert-circle"> </i> {{$message}}</span>
#enderror
<input name="description" id="description" type="hidden" x-model="description">
<div x-on:trix-change.debounce.1000ms="description = $refs.trix.value">
<trix-editor x-ref="trix" input="description" class="overflow-y-scroll"
style="height: 20rem;"></trix-editor>
</div>
</div>
I got it to work by using Trix's built-in events.
<input id="about" name="about" type="hidden" value="{{ $about }}">
<trix-editor input="about" class="wysiwyg-content"></trix-editor>
<script>
var about = document.getElementById("about")
addEventListener("trix-change", function(event) {
console.log(about.getAttribute('value'));
#this.set('about', about.getAttribute('value'))
})
</script>
I have a lot of sub pages and latest 3 I am showing at homepage, I could display only title but image can't(every sub page has TV named 'image_prew' and I am trying to get value of this TV for image), here is my code:
<div class="cat">
<div class="role">
<h1 class="[[+pagetitle]]">[[+pagetitle]]</h1>
</div>
<div class="menu_prew-[[+pagetitle]]">
<img src="[[*image_prew]]" class="image"/>
</div>
<div class="clear"></div>
</div>
You don't say how you're fetching the sub-pages, but if you're using getResources you need to use the parameter &includeTVs=1.
And as Sean mentions above, in a template chunk TVs are placed in a placeholder tag -- use a plus sign not an asterisk.
try [[+tv.image_prew]] and check the documentation near the bottom "Displaying Template Variables with getResources" is clearly labelled
What is your output setting on the TV? Whenever you are outputting image source urls in your TVs, make sure in your output setting tab the output is set to "text". You want the text to render to your html tag. Default may or may not work depending on your input type setting, so I always force this to "text". I have had that issue once or twice;).
This question is answered in multiple forums and in SO already.
I have fixed grid layout issues by adding col-sx- class and it works fine. The issue I am facing now is about the background colors.
As suggested by many answers and forums, I have commented the entire print media queries in bootstrap.css file.
#media print { }
But still the colors are not shown when printing. The HTML codes are provided below.
Issue 1:
<div class="alert alert-success" role="alert">Automation Tester</div>
The above code adds a color to the div class in browser. But in print, it shows only the border.
Issue 2:
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
</div>
<span class="progress-type">CSS3</span>
<span class="progress-completed">50%</span>
</div>
For the above code, the background color is not shown.
Live HTML Document: http://purus.github.io/resume/
Please try to print preview the above page and you can see the difference in live for the "summary" and "Technical Skills" section.
If you already removed media queries, try to check checkbox Background in additional printing options of Chrome's print preview. It is turned off be default.
Other browsers have the same functionality.
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.