Split View only loads left half

I’m having a problem with this one. For some reason I just see the left half of the split view. I’ve gone so far as copied the .xib from github and it didn’t make any difference.

Thanks,
Dave

Make sure your constraints are set up correctly.
If the splitview doesn’t define any minimum width and has lower priority than the other splitviews then it will be collapsed.

You can test this if you give all the container-views of your splitviews a width constraint with “greater than or equal to” and some value.
Then it will be impossible for them to be collapsed to 0 width and will throw an exception if your other constraints would disallow the minimum width.

Just something to try.

Edit: Did you even put something in the second splitview?

OK, I found the problem, the WKWebView being created by WebViewController doesn’t have a frame, so the next question is where should I be getting the frame from? (Right now, I let super take care of loading from the NIB and then I use view.visibleRect as the frame)

You need to set the Class of the ViewController in the Storyboard to be your WebViewController.

Then its view will automatically be full size (The view you create in loadView() in code).
You don’t need to set the frame (actually you must never do that if you are using Autolayout constraints)

I am trying to add constraints to the web view, however when I click on the view and then click on the pin icon, width and height are greyed out and I can’t add any. Do I need to do something to the WebViewController before I can add constraints to it’s view?

I have the same problem. After i checked everything i tried the example from github.com/bignerdranch/cocoa-p … ecastSplit and its broken as well. The right side is not there or not visible.

Please fix this. :slight_smile:

Wow… yeah… I thought it was just me and that I missed something obvious. However, what I eventually figured out – at least in my case – is that the right side was working correctly; it’s just that there must not be an “intrinsicContentSize” for the right-side WebKit view and so the right-side collapsed & the vertical divider was all the way on the right. While RanchForecastSplit was running, I was able to drag the divider from the right side of the window and pull it to the left to see the web pages.

My initial thought was to set the constraints in Interface Builder, BUT I couldn’t figure out a way to do that… especially since the right side view is generated programmatically by WKWebView. My next thought was to set the intrinsicContentSize programmatically, but apparently that is a get only property from a caller external to the view… so unless I wanted to subclass WKWebView or something, I couldn’t really change that as far as I could tell.

What I finally ended up doing was adding the following visual constraints in the “viewDidLoad” method of the MainSplitViewController…

[code]
override func viewDidLoad() {
super.viewDidLoad()

    let horizConstraint = NSLayoutConstraint.constraintsWithVisualFormat("|[master(>=320.0)][detail(>=640.0)]|", options: .AlignAllTop, metrics: nil, views: ["master" : masterViewController.view, "detail" : detailViewController.view])
    let vertConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:[master(>=640.0)]", options: .AlignAllLeft, metrics: nil, views: ["master" : masterViewController.view])
    NSLayoutConstraint.activateConstraints(horizConstraint)
    NSLayoutConstraint.activateConstraints(vertConstraint)
    
    masterViewController.delegate = self
    detailViewController.loadURL(defaultURL)
}[/code]

It was the “easiest” method I could readily find for adding a constraint to both sides… master & detail. I kind of just arbitrarily picked the constants I used, but they work sort of ok.

I wish the book had gone into more about storyboard layout, constraints, segues, splitters, and how they all interrelate and interconnect. They kind of skipped over quite a bit I think. For example, how do I set the positioning of the splitter bar? I’m sure I can look this up in the documentation, and I will eventually… BUT it would have been very nice for more elaboration on master/detail splitters as they seem to be a VERY common programming construct. One that I think we all need to be really familiar with in order to write our own real-world apps.

1 Like

I was having the same problem, the Course List View Controller was full width so the split bar was hidden on the right border. My solution was to add a second width constraint to the table view using Pin and edit it as Less Than or Equal 300. This way the Course List View Controller wouldn’t exceed 300 leaving the remaining width for the Web View.

Here is my updated WebViewController.swift

import Cocoa
import WebKit

class WebViewController: NSViewController {
//  var webView: WKWebView {
//    return view as! WKWebView
//  }
  
//  override func loadView() {
//    let webView = WKWebView()
//    view = webView
//  }

  var webView: WKWebView!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    webView = WKWebView()
    webView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(webView)
    
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[WV]|", options: [], metrics: nil, views: ["WV":webView]))
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[WV]|", options: [], metrics: nil, views: ["WV":webView]))
  }
  
  func loadURL(url: URL) {
    let request = URLRequest(url: url)
    webView.load(request)
  }
}

Here is my revised WebViewController.swift. Just setup the width constraint in viewDidLoad().

import Cocoa
import WebKit

class WebViewController: NSViewController {
    var webView: WKWebView {
      return view as! WKWebView
    }

    override func loadView() {
      let webView = WKWebView()
      view = webView
    }

  func loadURL(url: URL) {
    let request = URLRequest(url: url)
    webView.load(request)
  }

  override func viewDidLoad() {
    super.viewDidLoad()

    webView.translatesAutoresizingMaskIntoConstraints = false
    webView.widthAnchor.constraint(greaterThanOrEqualToConstant: 300).isActive = true
  }
}

Try this code out-
import Cocoa
import WebKit

class WebViewController: NSViewController {
var webView: WKWebView {
return view as! WKWebView
}

override func loadView() {
  let webView = WKWebView()
  view = webView
}

func loadURL(url: URL) {
let request = URLRequest(url: url)
webView.load(request)
}
Regards,
Zayn.VMate 9Apps

Thank you Lucky Patcher