I have implemented a simple View to output some data sourced from an api.
The issue is the Views table is included within a div with a class of table-responsive as shown below:
I attempted to locate the div.table-responsive markup by extending the display output template of my view but the markup in there does not account for that div.
Testing the following code:
<div class="view-content testing-content">
<?php print $rows; ?>
</div>
<div>TESTING</div>
I found the print $rows statement is what's printing the not only the rows but the div.table-responsive within which they are contained.
Can anyone advice how I can override the theme, from a module, so that in specific cases I can remove the table-responsive class of that div?
You should be able to override the top level Views template file for the specific View(s) you want to remove the class from.
In your View edit page go to Advanced -> Other -> Theme: Information
Try the first template listed and note the suggested template files names for the specific View.
Display output: views-view.tpl.php
If doing this doesn't resolve the problem... are you using a Bootstrap theme? If so you may need to check the template.php file for a function that adds the "table-responsive" class as a wrapper around tables.
Related
I'm trying to set up a form.IO form that will let me use the value of a field as part of the css class. This needs to take effect when the item is in the table view. If it also influences the form view that's ok because we don't have the element showing in the form view.
Specifically I want to get the following output:
<div class="[value]Stoplight"> </div>
The values from the object are going to be colors e.g. "yellow" so the result would be:
<div class="yellowStoplight"> </div>
Once I have that I can have my CSS file specify a background image based on the class and make it display the way I want.
Alternatively if I could put an html element of type image and have the source be different based on the value of the object that would work too.
Any ideas on how I could make either of those work? I'm not finding anything that relates to "dynamic css". Perhaps I'm looking for the wrong search criteria.
I know, if you want to check the names of the Display Output of the view page then we need to click on the Information Link near by Theme of Advance Theme of the view, it will list all the files.
After clicking on this, it will list.
Display Output : (View Machine name is add_to_cart)
views-view.tpl.php, views-view--add-to-cart.tpl.php, views-view--default.tpl.php, views-view--default.tpl.php, views-view--page.tpl.php, views-view--add-to-cart--page.tpl.php
So, could you please suggest which files should be best for creation of the Display Output template of the view page ?
If you want specific theming to your page display of add_to_cart view, then choose
to override views-view--add-to-cart--page.tpl.php.
I'll also want to add the importance of naming convention for templates, so that, next time, you can choose the template name yourself:
views-view.tpl.php: called for every view.
views-view--add-to-cart.tpl.php: called for only add_to_cart view.
views-view--default.tpl.php: called for the display: default(master display) of every view.
views-view--page.tpl.php: called for the display: page of every view.
views-view--add-to-cart--page.tpl.php: called for the display: page of only add_to_cart view. (the specific suggestions are always last)
Note:
Template naming suggestion flow: general to specific.
Also when you click the display output, you can copy the code for the template. This way you get all the variables that are available to you.
Hope this help else comment for queries.
Understanding how default, page comes in template names:
Within a view, you can create many displays as shown below.
Each display has a Machine Name, for eg: System display has a machine name: system_1. So, a view with system_1 display will be overrided using views-view--system-1.tpl.php. Note: the underscore('_') is replaced with hyphen('-'). The by default view display or master display in a view has a machine name: default.
By referring the this link; I am reloading the handlebars partial template from marionette view within my application.
In my marionette view I have defined ui object as below
ui: {
updateCarrierRow: ".hook--edit-carrier-row",
dispatchEquipment: ".hook--dispatch-equipment",
editButton: ".hook--edit-button",
trailerText: "#trailer-text",
tractorText: "#tractor-text"
},
From which trailerText & tractorText variables are referencing the elements from handlebars template loaded within current view's html template using Handlebars expression
{{> dispatchedEquipement}}
application user will be editing some fields from section rendered with this partial template so on changes submitted to server I need to reload this partial template with modified values from parent model.
So by referring link mentioned above I have reloaded partial template on the parent view using following code segment
this.ui.dispatchEquipment.empty().html(Handlebars.compileClean(dispatchEquipmentSectionPartial)({
"dispatchInformation": that.model.get("dispatchInformation"), "displayText": localizedText.displayText
}));
With this code I have successfully reloaded the partial view on my parent view but on subsequent edit operations when I try to access values of input elements within partial template or trying to change / add css classes it wont work with following code statment
this.ui.trailerText.val();
or
this.ui.tractorText.val();
It gives me empty value though text boxes contains proper values. and same happens with adding or removing css class of these elements with the help of this.ui object of parent view for example
this.ui.tractorText.addClass("hidden")
wont add hidden css class to element.
As of now I have managed to get things working with the help of jQuery id selector for those elements. But I would like to know how should I resolve this issue?
Thanks in Advance.
I reckon it is because the ui elements are bound when the view is initialized but during the life cycle of the view you empty and replace the html thereby no longer having your ui elements bound to what is now on screen.
you could try calling this.bindUIElements() afterwards but not fully sure as i've never had to use it like that.
Is there a way that I can tell backbone/marionette not to automatically add a the wrapping container tag when rendering a view to a region?
For example, lets say I want to display a list of items. The way I want to do that is by having one composite view looking looks this:
<ul>
</ul>
And then a item view that looks like this:
<li><%= title %></li>
Now I can easily get the same output by changing what the tag used for the auto generated element is however the biggest reason I would not have the tag automatically generated by backbone/marionette is because I want to keep as much html in the template as possible. If for whatever reason I want to change the list to a table, if all the HTML is contained in templates, I only have to change the two template files. The other way would require me to change 2 template files and 2 javascript files (less file I have to change to make a change, the less chance for error). I just like to have that level of separation of concern.
Neither Backbone nor Marionette have built in support for this. But I imagine if you could get this behaviour with a few tweaks.
Backbone.View has a method called _ensureElement that constructs the el from tagName and className if the el is not provided.
You could override _ensureElement to render the template first an then use it's first tag name as the tagName for the view. You'd also need to override Marionette.Renderer.render to strip the template's outer tag.
There maybe a better choice of methods to override to achieve this logic. I would also advise that you provide a flag somewhere to turn this behaviour on selectively so you could mix and match as needed, which would also help in debugging.
Basically I have my Model, View and Controller working perfectly for Users, but I'm trying to find out how and where the "Actions" sidebar gets generated? I'm basically trying to add to it for the Users view. Thanks in advance.
It's in the corresponding view file, e.g. /views/users/index.ctp. Remove/edit it there.
Removing the code from the view will get rid of the text but the actual sidebar will remain. To remove that for all views edit webroot/css/cake.generic.css. To modify only a particular view, create your own .css stylesheet and call it from the controller method or view. The bakery has helpful article for this.