Kategoriarkiv: Okategoriserade

CSS Vertical Align or: How I Learned to Stop Worrying and Love Display: Table

I grew up with it and it’s hard to shake. It follows me around, looking over my shoulder everytime I try to position anything. That deeply ingrained hatred of tables. Nothing was as ugly and disgraceful as using tables to position content (that and maybe using capital letters for your tags).

  • What, are you not using THE BOX MODEL? I can’t work like this.

I sometimes sit and glare longingly at those at the office that don’t have to support the older versions of IE. Imagine the glory and wonder of using Flexbox! To be able to roll around in align-items: center, revel in justify-content and delight in flex width. But, alas. It is not so, using flexbox for corporate oriented (especially SharePoint) styling is still some years off.

But I still have to vertically align things all the time. And that’s the reason for this post. Yes, it is true. I have started to use tables to get things to where I want them. Not actual tables, but virtual ones with div and span elements with display table. And I have come to, maybe not love it, but at least rather like it. It sort of works, if used correctly. There is a learning curve, an especially steep one if your brain is telling you to RUN AWAY. But with some time and determination you too can get there.

The problem to solve

Typically we’re talking about an icon that should be centered vertically to a text of unspecified height. Position: absolute won’t help you here, nor will margin top, since the height varies. What I used to do was use a background image with background-position: center. But these days we have to take retina screens into account. Begone blurry images!

But what about svg?

says you.

Yes, that would also be nice, but legacy systems prevent me from using that (long story, SharePoint is to blame). Also I would like to utilize icon libraries like FontAwesome.

The solution

Use table layout for this!
The wrapping parent gets:

And then every child element gets

And no padding or margin top or bottom on the children, that messes everything up. Both child elements now becomes as high as the highest of them, and the content is placed in the vertical middle. Magic.

Want a clearer picture and try it out yourself? Here’s a plunker where you can do that.

So you tried this and there’s no magic?

The problem with this method is that it’s mad hard to “debug”. It’s insanely difficult to understand what’s wrong when something is off in the aligning. Try to remove all set height, line-height and margins and paddings on the child elements, as well as all other positioning styling (relative or absolute).

Nothing new under the sun

Yes, people have of course used this before, but that doesn’t mean everyone has, or that it isn’t news to someone. After all, until recently I didn’t use it and I spend a fairly large amount of my day arguing with CSS.

Vi behöver bli fler!

Vi söker ständigt personer som är duktiga och brinner för det de gör. Samt vill jobba på ett personligt IT-bolag som befinner sig i stark tillväxtfas. Just nu letar vi extra efter följande personer. Du kan söka tjänsterna direkt på www.uptrail.com

SharePointutvecklare
Vill du bli en del av vårt team av Sveriges vassaste SharePoint-utvecklare? Vi söker dig som har eller vill få stor och bred erfarenhet inom SharePoint-plattformen och kringliggande Microsoft-produkter. Läs mer om tjänsten.

Presale och Lösningsarkitekt
Som Presale och Lösningsarkitekt hos oss kommer du att sättas på prov hos kunder där det ställs höga krav på kompetens och förmåga att driva arbetet framåt, du kommer att ansvara för att sälja in nya projekt hos nya och befintliga kunder. Läs mer om tjänsten.

Säljare på Stockholmsmarknaden
Som säljare hos oss kommer du att sättas på prov hos kunder där det ställs höga krav på kompetens och förmåga att driva arbetet framåt, du kommer att ansvara för nya och befintliga kunder och marknader. Läs mer om tjänsten.

UI Designer
Bool behöver förstärka sin grafiska avdelning med en UI Designer för arbetet med våra portalleveranser. Vi letar efter en formsäker UI designer som inte nöjer sig med annat än pixelperfektion. Har du dessutom kunskap inom HTML5 och CSS är detta meriterande. Läs mer om tjänsten.

Copy to SharePoint root from Sublime Text

Note, this is intended for your local development only, not a production environment!

At the moment I’m doing lots and lots of JavaScript for SharePoint, which means this:

  1. Write some JavaScript
  2. Use a Visual Studio plugin to copy to SharePoint root (usually Fishbone’s tool)
  3. Reload page (and by that I mean wait for a long, long time for the page to reload)

I’m doing my development in a virtual machine, with limited resources and Visual Studio seems to be hogging most of them, leaving next to nothing to the SharePoint server.

And I also like working in Sublime Text, I’m just so much more proficient in it.

Solution: Do it all i Sublime!

Here’s what we did: A shortcut to copying a file to the SharePoint hive using the Sublime build system.

1. Create a Sublime build file

In Sublime, go to Tools –> Build System –> New Build System

This creates you a file that looks like this:

Save that, name it to what you want your build system to be called (.sublime-bild as file ending). In it we will call on a powershell script. I saved it in the default location:

 

2. Creating a Powershell script to copy the file

Powershell will simply just do a Copy-Item. The file that you build with our custom build system will be copied from its current location to the hive. It looks like this:

This script takes one parameter: the location of the file that you are calling ”build” on. In order to put it in the correct location in the hive, it checks the folder hierarchy relative to the ”Layouts”-folder. This means that you have to have the file you’re working on in a path that contains a folder named ”Layouts”.

For example, my JavaScript file is located here:

This means that it will end up in the SharePoint hive here:

Save the script somewhere, and name it CopyToSharePointRoot.ps1

3. Using the Powershell script from the build file

We will now change the build-file to make it use the Powershell script with the correct parameter. Change the file you created in the first step to look like this:

In this, change ”exact-location-to-your-ps1-script” to the location of your CopyToSharePointRoot.ps1-file. Remember to have double \ for folders. The $file in the last row is a magic parameter given to the build file by Sublime, which we pass on to our script.

4. Using the build system

Got to Tools – Build –> Choose your new build system

If it’s not there, go back to step one and make sure you have the correct location and file ending.

Now open your file that you wish to copy to the hive, change it, hit save and the ctr + b. This should execute the script, and something like this should come up in your Sublime terminal:

 5. Wow, this would be so awesome as a Sublime package!

Fear not, we’re on it!

Update multi-value lookup column values in SharePoint 2010 using managed CSOM

Anatoly Mironov:

Reblogging this useful code sample for updating multi-value lookup columns using CSOM in C# in SharePoint 2010, but also valid for SharePoint 2013.

Originally posted on Bin's Dev Notes:

I received a task that needs to update multi-value lookup column value in SharerePoint 2010 using C#.  While it is easy to set columns of simple data types, with lookup column it is a bit more complicated.  Searching Web gives me following link which is helpful. However, that only works with single value column.   After a bit trial and error, I worked out following code that is functioning.

1

public void UpdateLookup(string siteUrl, int id, string lookupColumnName,

List multiLookupValues, string listName, string lookupListName)

{

using (ClientContext ctx = new ClientContext(siteUrl))

{

ctx.Credentials = new NetworkCredential(_username, _password, _domain);

var list = ctx.Web.Lists.GetByTitle(listName);

var item = list.GetItemById(id);

var lookUpList = ctx.Web.Lists.GetByTitle(lookupListName);

CamlQuery query = new CamlQuery();

query.ViewXml = CreateCaml(multiLookupValues);

var items = lookUpList.GetItems(query);

ctx.Load(item, i => i[lookupColumnName]);

ctx.Load(items);

ctx.ExecuteQuery();

var lookupValues = new ArrayList();

FieldLookupValue[] values = item[lookupColumnName] as FieldLookupValue[];

foreach (ListItem listItem in items)

{

var lookupValue = new FieldLookupValue { LookupId = listItem.Id };

lookupValues.Add(lookupValue);

}

item.ParseAndSetFieldValue(lookupColumnName…

View original 49 more words