SilkUI link buttons & forms

SilkUI link buttons & forms

  
In the grid, when you create a form, the "Save" button is nicely lined up with the input controls by having a left margin set in "cols". But if you are using SilkUI and want to use the links with the related styles (like "Button Success") then you can use the margin in "cols" because the Link widget does not have a Left Margin property. And you can't set CSS on the link to have "margin-left: 4cols;" because "cols" is not a CSS unit of measurement.

Sooooo...

What's the answer here?

Thanks!

J.Ja
I'm not entirely sure, but it seems columns are converted to percentage in CSS. You can inspect the button on the browser and get the percentage that is used by a button (margin-left property of ThemeGrid_Margin class usually ex.:10.4575163398693%) and apply it to your link.


J Ja 
I think rather than using Margins and so on the simplest would go with a padding and managing the space terms in between blocks or even create a own class and control it by gutter with some smart margins inside the cols...

you can try this 
<h1>Gutter<strong>Gutterless</strong><i class="fa fa-heart"></i></h1>
 
<div class="container">
    <div class="row">
        <h2>With Gutter</h2>
        <div class="col-sm-4">
            <a href="#" class="btn btn-block btn-primary">Full width Button</a>
        </div>
        </div>
    </div>
</div>
 
<div class="container">
    <div class="row no-gutter">
        <h2>Without Gutter</h2>
        <div class="col-sm-4">
            <a href="#" class="btn btn-block btn-primary">Full width Button</a>
        </div>
    </div>
</div>
 
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
 
h1 { margin-bottom: 50px; }
h1, h2 { text-align: center; }
.container {
  background: #e3e3e3;
  margin-bottom: 20px;
  padding-bottom: 50px;
}
p {
  background: pink;
  margin: 0;
}
i {
  color: pink;
}
I figured this out... there's actually no need for it. There's no benefit to using Links over Buttons, so I should just use Buttons. For whatever, reason, I was thinking that the SilkUI classes for this *only* applied to *links* with the "Button" class, and I didn't realize that Buttons with "Button" class would work too.

J.Ja
Justin James wrote:
I figured this out... there's actually no need for it. There's no benefit to using Links over Buttons, so I should just use Buttons. For whatever, reason, I was thinking that the SilkUI classes for this *only* applied to *links* with the "Button" class, and I didn't realize that Buttons with "Button" class would work too.

J.Ja
 There is at least one "limitation" with buttons, you can't add icons (Icon Widget) to them.
With SilkUI I don't use the Button Widget anymore, just links with the class "Button".
 
Hmm, that's a good point. So how do you line them up nicely on the Edit Forms where the buttons can get a margin measured in cols but links can't?

J.Ja
I have them aligned to the left (no margin), so that is not a problem for me :P

If you want the buttons aligned with the inputs just enclose them on another container with margin-left = X col