For the following markup:
<dl class="dl-horizontal">
<dt>A few words describing the term</dt>
<dd>The data associated with the term</dd>
</dl>
The dt term element is fixed width (at 180px) and cannot be changed with col- due to specificity of CSS. For example, the below does not work:
<dl class="dl-horizontal">
<dt class="col-sm-3">A few words describing the term</dt>
<dd class="col-sm-9">The data associated with the term</dd>
</dl>
Description lists are for name-value pairs and a fixed width is not suitable for some languages where the single word term is longer than 180px. Truncating is not possible (it truncates valuable meaning) and word-wrapping (using Stack Overflow overrides) is not readable.
Do I need to add extra classes or should I chase up with Twitter Bootstrap?
Edit
Given the lack of answers, I have opened an issue with bootstrap:
https://github.com/twbs/bootstrap/issues/14983
...you can always write overwrite code for the col-sm-3 and col-sm-9 classes (following the exact example), but I guess it would be easier to write your own classes using media queries and the same breakpoints you are using in your bootstrap file. You can also use this custom class to set a new minimum width.
#media (min-width:XXX) and (max-width:XXX) {
dt.col-sm-3 {
width:25%;
}
dt.col-sm-9 {
width:75%;
}
}
Related
Using DataTables, I am witnessing a reproduceable issue where the value of the data-filter html attribute is overriding the searchability of the data-search html attribute.
<td data-search="Jared Next" data-order="Jared Next" data-filter="Full-Time DM">
<div class="mb-2">
Jared Next
</div>
<div class="mb-2 text-muted small" title="Number of total deals posted by DM">
Posted: 294
</div>
</td>
When searching by "jared" the row does not appear.
When searching by "full-time dm" the row does appear.
Worth mentioning that the filter works as expected:
I apologize if I've not provided enough code to re-create the issue or if DataTables experts want the whole table.
I can easily provide it all.
The data-search and data-filter attributes are synonyms, in DataTables.
See here for details.
You should use one or the other, but not both at the same time.
Also, from the same doc link as above, in case it is relevant: Make sure the attributes are used consistently for every cell in a column:
In order for the HTML 5 data-* attribute detection and processing to work correctly, all cells in a column must have the same attribute available.
I am trying to generate a view that has collapsing panels in it. I need each panel to have a unique ID. I have successfully done it with the code below. but was warned in a different post that using #Html.Raw() is bad practice.
What is my alternative?
#Html.Raw("<div id=\"collapse")#Html.DisplayFor(modelitem => item.NAME)#Html.Raw("\" class=\"panel-collapse collapse collapse\" role=\"tabpanel\" aria-labelledby=\"heading")#Html.DisplayFor(modelitem => item.NAME)#Html.Raw("\">")
You need to understand why Html.Raw is a so-called "bad practice." If it were universally bad and should never be used then it wouldn't have been created in the first place. It's bad when it is used to write non-sanitized content to the browser because it leaves you vulnerable to an XSS attack.
Having that understanding, we can look at what you're doing and see that you are not writing out any user-provided data in your calls to Html.Raw so in this case it is probably an acceptable use.
Having said that, it seems like you could simplify things by passing a collection of divs to create in your model and just loop over them, something like the following, which may require some tweaking to get it just right.
#foreach(var panelName in model.PanelNames)
{
<div id="collapse#panelName
class="panel-collapse collapse collapse"
role="tabpanel"
aria-labelledby="heading#panelName">
}
You can simplify your code by combining text, markup, and razor Code.
In your case, use HTML with inline Razor expression :
<div id="#("collapse" + Html.DisplayFor(modelitem => item.NAME))" class="panel-collapse collapse collapse" role="tabpanel" aria-labelledby="#("heading" + Html.DisplayFor(modelitem => item.NAME))"></div>
More information about Razor syntax.
I am creating a custom template for a page using Concrete5. I have three blocks, wrapped in a div class, that I want to repeat throughout one page. For example:
<div class="block-wrapper">
<div class="title"><?php $a = new Area('Title'); $a->display($c);?></div>
<div class="description"><?php $a = new Area('Description'); $a->display($c);?></div>
<div class="autonav"><?php $a = new Area('Autonav'); $a->display($c);?></div>
</div>
And the CSS for would be something like this:
.block-wrapper {
padding: 20px 5px 20px 5px;
border: 1px solid #e8e8e8;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.title {
float: left;
}
.description {
float: right;
}
What I want is to be able to repeat the block-wrapper with the 3 editable blocks inside. For example, the generated page would look like:
<div class="block-wrapper">
<div class="title">Steve</div>
<div class="description">Engineer</div>
<div class="autonav">Link A | Link B | Link C</div>
</div>
<div class="block-wrapper">
<div class="title">Betty</div>
<div class="description">Designer</div>
<div class="autonav">Link D | Link E | Link F</div>
</div>
...and so forth. I hope I am being clear enough. Is this possible? What are my options? Ideally, I'd have as much freedom to style the blocks and block-wrapper as possible.
Depending on what exactly your situation is, there are a few different solutions. The built-in Concrete5 approach is to use the setBlockWrapper methods on the Area object. For example:
<?php
$a = new Area('Main');
$a->setBlockWrapperStart('<div class="block-wrapper">');
$a->setBlockWrapperEnd('</div>');
$a->display($c);
?>
Note that the block wrapper is not displayed while in edit mode.
Another approach (as #BGundlach mentions) is to use the free Designer Content addon and create a custom blocktype with separate fields for each piece of data, and provide the appropriate wrapper HTML around each field. Looking at your example, though, I see you have one of those fields being an "autonav" of sorts... so I'm not sure how exactly this would be populated.
A third approach is the non-free Designer Content Pro addon, which lets you create custom blockstypes with repeating items (which might be good for your nav field... so users could choose any number of nav links if they wanted... but this would be more of a "manual nav" versus an "auto nav").
Disclaimer: I'm the author of both the Designer Content and Designer Content Pro addons (but they were created to solve this exact sort of problem so I think it's a good fit here).
If I understand you correctly a possible option is to programmatically create the three areas. For example you could create a new Page attribute with a handle number_of_bio_blocks and then something like this
<?php
$num = intval(Page::getCurrentPage()->getAttribute('number_of_bio_blocks'));
if ($num) {
while ($num--) {
?>
<div class="block-wrapper">
<div class="title"><?php $a = new Area('Title ' . $num); $a->display($c);?></div>
<div class="description"><?php $a = new Area('Description ' . $num); $a->display($c);?></div>
<div class="autonav"><?php $a = new Area('Autonav ' . $num); $a->display($c);?></div>
</div>
<?php
}
}
?>
Or possibly just set an arbitrary number of Areas like 10 as those that are not filed in will not be displayed. There is not, to my knowledge, a way to add Areas through the interface. Also, creating those Areas like that would populate the database with additional unused Areas. I'm not sure if that is a concern to you.
Designer Content was suggested, and there is now Designer Content Pro which allows you to add multiple repeating fields in a block. This wouldn't allow arbitrary blocks, but if you need things like rich text and images, that might be a good option.
Why not use one area and a repeating block type? Fewer areas allows for better sure performance.
I'm not sure there's an autonav option in Jordanlev's designer content block, but I'm sure it will do all this for you. http://www.concrete5.org/marketplace/addons/designer-content/ I've used this as the basis for many of my own blocks. It puts you in control of all the markup.
The description states:
Designer Content is an invaluable tool that allows designers to easily create custom block types. The purpose of this is to make content editing straightforward for your users, and to ensure that your styles are maintained -- without having to rely on the complicated and error-prone TinyMCE styles. For example, let's say some of the pages on your site will contain information about company employees, and each employee has a name, a bio image, and a brief description -- you can create a custom block with a textbox field for the name, an image selector for the bio image, and a wysiwyg editor for the description. You can also surround each element in html snippets (divs with classes, for example) to ensure that the content will be styled appropriately, without your users having to deal with the finicky TinyMCE toolbar.
Only the content of the div is unique. So, in the following dynamically generated html, only "My Article-1245" is unique:
<div class="col-md-4 article">
<h2>
My Article-1245
Delete
Edit
</h2>
<p>O ephemeral text! Here today, gone tomorrow. Not terribly important, but necessary</p>
</div>
How do I select the edit/delete link of this specific div, using Selenium? assertText/verifyText requires an element locator, but I do not have any unique id/name (out of my control). There will be many such div blocks, with other content text, all dynamically generated.
Any help would be appreciated.
If text 'My Article' appears each time, you may use following:
//For Delete
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Delete']"));
//For Edit
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Edit']"));
Hope it meets your requirement :)
Matching by text is always a bad automated testing concept. If you want to keep clean and reliable test scripts, then :
Contact your web dev to add unique identifiers to the elements
Suck it up, and create selectors based on what's there.
You are able to create a CSS selector based on what you want.
What you should do is create the selector using parent-child relationships:
driver.findElement(By.cssSelector("div.article:nth-child(X) a[href^='delete']"));
As I am ignorant of your appp, this is also assuming that all of your article classes are under the same parent. You would substitute X with the number of the div you want to refer to. e.g.:
<div id="someparent">
<div class="...article" />
<div class="...article" />
...
</div>
I saw in Expression Engine I can use {embed:title} and {site_name} variables, but now I need a variable to pull an excerpt or description of the article itself. Is there such a variable/tag?
ExpressionEngine tags are based solely on custom fields which you yourself have defined. So in the field group for your "articles" channel, you'll have some fields, maybe {article_summary}, {article_body}, {article_image}, etc. To display your summary, just use {article_summary} in your template.
I'm assuming that you're coming from something like WordPress maybe, where every piece of content has the_content() and the_excerpt() ... aside from a handful of global variables, and some fields which are universal to all entries (like {title}, {entry_date}, etc), ExpressionEngine isn't like that. You define what fields you use for each channel - you have complete control.
Here is the actual code you have to include in your EE template.
{exp:channel:entries channel="article" limit="5" dynamic="no"}
<div class="home_thumb">
<h1>{title}</h1>
<div class="home_thumb_img">
<img src="{article_image}">
{if article_content}
<p>{article_content}</p>
{/if}
</div>
</div>
{/exp:channel:entries}