Ratchet CSS and Marionette Regions -


Hello MarionetteJS Gurus,

I probably have a very simple problem, but I can not Wrap my head how to solve it I have an application with 2 fields and 1 layout, and I am using the shaft CSS library for prototype. Functionally, the goal is simple: Display a list of contacts with a header and a search bar in a view. If the user selects a contact, remove the search bar and only retain the header.

The problem appears that it is necessary to swap and exclude the scenes in the wrapping device. The chess css needs the header bar directly above the content section to dock them at the top of the viewport, but the areas and layout of the merient (at least with my configuration) are preventing it from happening. Maybe I can improve my thoughts?

JSField of the resulting output: You will see that the header / search area overlaps the content area.

Menu region is included in a footer menu, and the main area includes a header area, a search field and a "main content" area Are there. Some snippets of my code are given below:

Area 

  var app = new merchant. Application (); App.addRegions ({headerRegion: "# Header-Area", Menu Region: "# Menu Area", Main Area: {Selector: "# Main-Area", Area Type: Main Regions}});   
  Layout / View   
  list.Layout = Marionette.Layout.extend ({Template: "# Contact-Layout" , Regions: {Header Region: "# Header-Area", Search Region: "# Secondary-Header-Area", Contact Region: "# Contact-Area"}}); List Search = Marriott ITEMUVO Extension ({tagname: "divis", template: "# contact-list-search", classname: "repeatedly-standard bar-header-secondary"}); List.Header = Marionette.ItemView.extend ({template: "# contact-list-header"});   
  Template   
  & lt ;! - App layout - & gt; & Lt; Script type = "text / template" id = "contact-layout" & gt; & Lt; Div id = "header-area" class = "repeated-standard" & gt; & Lt; / Div & gt; & Lt; Div id = "secondary-header-area" & gt; & Lt; / Div & gt; & Lt; Div id = "contact area" class = "content" & gt; & Lt; / Div & gt; & Lt; / Script & gt; & Lt; Script type = "text / template" id = "contact-list-header" & gt; & Lt; Nav class = "bar bar-standard" & gt; & Lt; H1 class = "title" & gt; Contact & lt; / H1> & Lt; / na & gt; & Lt; / Script & gt; & Lt; Script type = "text / template" id = "contact list-search" & gt; & Lt; Input type = "search" placeholder = "search" /> & Lt; / Script & gt; & Lt; Script type = "text / template" id = "menu-template" & gt; & Lt; Nav class = "repeatedly bar bar-footer" & gt; & Lt; / Neo & gt; & Lt; / Script & gt; Wrapping divisions inside areas were not a problem. However, you have to set specific CSS classes in those areas instead of nested elements. Like:  
  & lt; Div id = "header-region" class = "repeated-standard" & gt; & Lt; Div & gt; & Lt; NAV & gt; & Lt; H1 class = "title" & gt; All contacts & lt; / H1> & Lt; / Neo & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "secondary-header-area" class = "bar-header-secondary" & gt; & Lt; Div & gt; & Lt; Input type = "search" placeholder = "search" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 See:  
 You can pre-set those classes on your area elements or you can add these specific sections to the regional start, see:

Comments

Post a Comment

Popular posts from this blog

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -

In brief, the wrapper module is inserted during posting and the status of an entry is changed to 'modified' . Before changing the state, the state is set to 'separate', but calling attachments () causes the same error to be thrown away. I am using EF 6. Model / wrapper class public class avi model {public A is a {get; Set; } Public listing & lt; B & gt; B {received; Set; } Public cc {receipt; Set; }} Administrator edit public functioning (int? id) {if (id == null) {new HttpStatusCodeResult (HttpStatusCode.BadRequest); } If (! Conveyor Access (id.Value)) new HTTPTitus code result (HTTP status code. Forbidden); Var aViewModel = new AViewModel (); aViewModel.A = db.As.Find (id); If (aViewModel.Receipt == zero) {return HttpNotFound (); } aViewModel.b = db.Bs.Where (x => x.aid == id.Value) .Oolist (); AViewModel.Vendor = db.Cs.Where (x => x.cid == aViewModel.a.cID) .FirstOrDefault (); See Return (aViewModel); } [HTPFost] [Valid AntitiferousTeacon...
Read more

jasper reports - How to center align barcode using jasperreports and barcode4j -

I use iReport 5.5.0 . How to align a barcode component to the center The relevant piece of my jrxml is below & Lt; JR: Code 128 xmlns: JR = "http://jasperreports.sourceforge.net/jasperreports/components" xsi: schemaLocation = "http://jasperreports.sourceforge.net/jasperreports/components http: //jasperreports.sourceforge Purge / xsd / components.xsd "textPosition =" bottom "& gt; & Lt; Jr: codeExpression & gt; & Lt; [CDATA [$ F {number}]] & gt; & Lt; / Jr: codeExpression & gt; & Lt; / Jr: Code 128 & gt; & Lt; / componentElement & gt; "Text" itemprop = "text"> Create a style after this, it is called "barcode", like: & lt; Style name = "barcode" fontName = "Helvetica" fONTSIZE = "10" hAlign = "center" valign = "center" /> and set the property of your barcode element to "barcode".
Read more

django - CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False -

I use Django 1.6.5 with settings in my program txsite: DEBUG = true I set the lie to debug, but when I get the runner , I get the following error: CommandError: You have to set the settings. OLOWOWHESTS If DEBUG is False I ALLOWED_HOSTS = ['127.0.0.1', 'localhost'] but I get the same error. Does anyone know this address? Try ALLOWED_HOSTS = ['*'] Less secure If you are not on a firewall or public LAN, but what I use and it works. Edit: Interestingly enough, I have to add some of my 1.8 projects, even if DEBUG = True . Why so very uncertain
Read more