Trying to only display one category content in the Squarespace Archive Block. Is this a theme specific issue or a way I can achieve this maybe with a code injection?
That is not a template/theme-specific issue. That is a limitation of the Archive Block across the entire Squarespace platform (no matter the template).
Possible workarounds include:
Use the Summary Block instead.
Use CSS to hide archive block groups that do not match the desired category.
Workaround 1
If using a Summary Block instead, set the Layout to "Grid", lower the "Gutter Width" and adjust other settings as desired. Under "Display", raise the number of items as desired (max of 30), check "Show Title", uncheck other content options, and set the "Category Filter" setting to the desired category.
Workaround 2
If you need to use the Archive Block and the Summary Block will not work, inserting the following CSS via the CSS Editor will hide lists of items that do not match the desired category. Note that you must swap out your target block ID and category for "yourblockid" and "Your Category" respectively. You can use your browser developer tools to find the block ID (but look for the pattern shown below; do not use IDs starting with "yui", since those are dynamically generated and will change).
#block-yourblockid .archive-group-name-link:not([href$='Your Category']) {
display: none;
}
#block-yourblockid .archive-group-name-link:not([href$='Your Category']) + * {
display: none;
}
Related
goal: accessibility
target screen readers: JAWS and NVDA
I am adding role="grid" to a list of items. Each row in the grid contains some grid cells representing the item name, description, etc. I cannot change the markup to use a table so this is why I am using role="grid".
My question first question:
Within the context I am working, it is easier for me to add a visually hidden header to each grid cell rather than adding a separate row to the grid with column headers for each column. Is it ok to label each grid cell with a header rather than creating a row of column headers (role="columnheader")? How will this affect the level of accessibility for screen readers? Do users always expect a grid to have column headers?
My second question:
I want to include some content which is not located within the container I have marked with role="grid" as a grid row. Is it possible to associate content outside the grid container with the grid as a grid row?
NOTE: Keep in mind that altering the markup is not an option so suggestions such as "build it as a table" will not help here.
Thank you!
I cannot change the markup to use a table so this is why I am using role="grid".
If you can specify role="grid" in your code then it seems like you could specify role="table". Is there a reason that's not possible? The reason I ask is because grids should be reserved for when the actual cell contents can be edited, kind of like a spreadsheet. The fact that a cell has an interactive element in it does not mean it should be a grid. So my first recommendation is to use role="table".
However, grids are recommended when you have a group of things where you can navigate to each "thing" using the arrow keys.
I'm guessing you already read the spec for grids.
it is easier for me to add a visually hidden header to each grid cell rather than adding a separate row to the grid with column headers for each column. Is it ok to label each grid cell with a header rather than creating a row of column headers
While you could do that, you'll miss out on some of the benefits of real column and row headers. With a basic <table>, it's very helpful for assistive technology users, such as screen readers, to have both <th scope="col"> and <th scope="row">. The latter is often overlooked.
Picture yourself in the middle of a big table. Lots of rows and columns. You know the current value of the cell in the table because the screen reader just announced it. Now you want to navigate down one cell. If you don't have a row header, then you will not hear any context for the next cell value. If you want to navigate left or right one cell, if you don't have a column header, then you will not hear any context for the next cell value.
If you hard code the column header as a visually hidden element, then you will always hear that column header announced for the cell even if you are navigating vertically down a column. That would be unexpected behavior for a screen reader user. The column header should only be announced if you navigate horizontally across a row, not vertically down a column. When you navigate vertically, the row headers should be announced.
I'm not trying to be harsh here but I think you need to go back to your statement:
it is easier for me
and decide if the ease of coding is more important than the end user experience.
If there's a technology reason you can't have column and row headers, because the library you're using doesn't allow it or some other reason, then as a last resort, you can try coding around it with visually hidden element but I would not recommend that as a first choice.
I want to include some content which is not located within the container I have marked with role="grid" as a grid row.
That's a little trickier. The aria-owns attribute is exactly what you need but it's typically used when a child element can't be owned by the parent via normal DOM nesting. In your case, it sounds like most of the elements are nested according to the DOM but you'll also have something outside the DOM.
The tricky part is when you mix the two. As documented in the spec:
If an element has both aria-owns and DOM children then the order of the child elements with respect to the parent/child relationship is the DOM children first, then the elements referenced in aria-owns.
So you might get some funky reading order if the literal DOM children are announced first and then the aria-owns children are announced second. Definitely worth a bit of testing. You might have to put an ID on every row, including the content outside the table, then use all of those IDs in aria-owns of the table even those most of the rows are "naturally" owned by the table because of the DOM.
I am not a developer but, I was trying to create a SharePoint list for online tracking of all open items in our team site. I was able to get the following code to standardize the font and font size for the columns through the below code
{
"$schema":"http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType":"div",
"style":{
"font-weight":"bold",
"font-family":"Trebuchet MS",
"font-size":"13px",
"font-size-adjust":"0.58"
},
"txtContent":"#currentField"
}
For two columns containing significant text content, I wanted to limit the maximum row height and introduce vertical scroll bar but, am unable to understand what will be the code and how to add it to the above written code .
Any help or guidance will be highly appreciated.
Thanks in advance.
Running the new code as proposed by #Thriggle did not reduce or modify the row-height of the column.
FURTHER EDIT
JSON code is being added in the List Settings section and choosing individual columns.
--
Kind Regards,
Nilotpal
You can add style properties to define how the cell should display.
The key additions to your style block would be "overflow-y":"auto" and "max-height":"50px" (replacing 50px with whatever maximum height you desire).
Your updated JSON for the advanced column formatting would look something like this:
{
"$schema":"http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType":"div",
"style":{
"font-weight":"bold",
"font-family":"Trebuchet MS",
"font-size":"13px",
"font-size-adjust":"0.58",
"overflow-y":"auto",
"max-height":"50px"
},
"txtContent":"#currentField"
}
Edit for clarity, here's where you'd add that JSON:
On the list view, click the view selector and choose to format the current view
Instead of applying the formatting to the entire row, add it to the desired column.
Click the link to enter "Advanced mode"
Paste in your JSON declarations and hit the Preview button to see if it works
Alternatively, you can go to the list settings page, then to the settings for the specific column to which you want to apply the formatting, and add the JSON to its Column Formatting setting. This will apply to all views of the list instead of just to the one view.
For all those reading this question, please note the key point of using JSON code formatting feature is that it will be available in "Modern" view of the SharePoint list. The coding shared in the ongoing conversation will provide the desired impact only if the SharePoint list is being viewed in the "modern" OR "new" experience.
This is really a trivial problem, but it is still annoying. I'm writing a tool to allow a user to set a bunch of numerical parameters for an analysis in the IPython notebook. I've set it up as a bunch of FloatTextWidgets in a ContainerWidget. They have rather long labels like "Number of Posture Points" or "Background Disk Radius". They don't line up nicely. This is because of the length: as explained on this page, "The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned... If a label is longer than the minimum width, the widget is shifted to the right."
My labels exceed the "fixed minimum width". What I want to know is how to change it. I have poked around in the Widget source code, and I can't find this anywhere.
EDIT: In response to #Jakob, here is some code, and here is a screenshot
In this example, "Threshold:" is small enough to fit within the label width, but all the others are too long.
To change the style from within the notebook:
from IPython.display import HTML, display
display(HTML('''<style>
.widget-label { min-width: 20ex !important; }
</style>'''))
use the layout argument for each widget. Here's the link to the documentation: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html
In particular it says, you an define description and widget separately in an HBox like this:
from ipywidgets import HBox, Label, Layout
label_layout = Layout(width='100px',height='30px')
HBox([Label('A description',layout=label_layout), IntSlider()])
Well, I found the narrow answer to my question: the minimum field width is defined in site-packages/IPython/html/static/style/ipython.min.css (located wherever your python libraries live -- on my Max that is /Library/Python/2.7/), where widget-hlabel is defined by
.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
min-width:10ex is the relevant part.
Although one can override this for an entire document, I don't see an easy way to change it one widget at a time. It would have to be done on the JavaScript side, since the FloatTextWidget class doesn't give separate access to the label component of the Widget from the python side. That would require developing a custom widget subclassed from FloatTextWidget, which seems like way too much effort for such a simple problem, and fragile to boot. At least, that's the only way I see to do it -- corrections welcome.
Instead, I have decided to eschew altogether the automatic labeling of widgets with their descriptions, and instead construct each label as an HTMLWidget, which gives me complete control over its appearance. Here's what that looks like:
I am trying to get the desired layout as in http://jsfiddle.net/yFxea/16/ and the affect I am trying to achieve is on click of the "record" in the left, that attributes for that record to be displayed on right. But the attributes section's location should be the same for all records and as I click on each record the previous record's attributes should hide and display the current record's attributes. I was able to get the desired look and effect but what broke is the additional requirement that both the record content and attributes should be nested under the same DIV (or section tag).
I understand that this is not a bootstrap question but I don't want to break anything that bootstrap does.
Thanks
I want to add a variable to a css class. Is it possile? I mean I want to do something like the following:
#box[i]
{
padding: [i]px;
}
(for example: div which is name "box10" is supposed to get padding of 10px.)
I understand this may not be the right syntax, but I hope you can help me achieve the concept setting my class' properties up to a variable value.
It's currently not possible to use variables within CSS, however there are a number of other options available.
The simplest option would be to create a CSS style for each of your box IDs.
You could use JavaScript to add padding to the box, but it is not sensible to include presentation within logic. In jQuery, a loop to do this would look like (assuming your boxes are ):
$('div[id^=box]').each(function() {
$(this).css('padding',this.id.substr(3)+'px');
});
You could use a pre-processor tool, such as LESS to set variables in your CSS; but you would still need to specify each selector.
Setting padding based on different box ID values seems like an odd problem to have. It may be worth taking a look at whether your approach to building this page is correct. Don't forget every ID on the page should be unique. If you wish to use the same ID on multiple elements, you should use CSS classes.
If you are trying to create a box sized based on a number of results (such as poll results), then it would be easier to use the style attribute and set a width/padding on each element rather than create an ID for every possible outcome. For example:
<div style="width:10px"></div>
No, you can't do that with pure CSS, but you can use less for that.
CSS variables are introduced only in W3C draft at this point and didn't supported by browsers yet.
u could just use javascript, to detect the "name" and then get the substring so u have the number. then just make something like this:
var box = document.getElementByName("box10");
box.style.padding = box.name.substr(3) + "px";