1

My goal is to display a button group to the right of the page title. Currently it resides in region-content, which wastes space.input group I tried adding my own class to the div that contains btn-group class and use margin-top to move it up, but as soon as I save content, I get system help message that overlaps with the button group.

I also tried to add the block to other regions and get same thing if, say, I use breadcrumbs.

What's the best way or what are the classes I should use to position my block with button group to the right of the page title in main-container instead of region-content

  • This is hard to answer without knowing more about your HTML structure/theme/page template, but one sure-fire way to do this is with absolute positioning, though that's probably not ideal. You could also try to style your system help messages to not overlap the buttons. But if adding a block into the same region the page title is in won't work, you may need to modify your page template or use JavaScript. – cjl750 Sep 26 '16 at 22:44
  • I'm using Bootstrap 3 out of the box theme settings. The only thing I did is used the sub theme, which have not been modified yet. – Sash Sep 29 '16 at 14:50
  • Sorry, still doesn't help me that much. What version of Drupal are you using? Also, would it be possible for you to provide a link to this page or to at least copy the essential section of the page (as shown in the screenshot) over to Code Pen or jsfiddle or a similar site? – cjl750 Sep 29 '16 at 22:04
  • Sure, here's the link to demo I set up a while ago: admincenter.semargl.ca/contracts – Sash Oct 4 '16 at 19:32
0

Okay, so after looking at your demo, there's a couple things you can do.

The easiest method is to simply float #block-block-16 right, float .page-header left, set #block-system-main to clear: both, and be done with it.

But that's not great because we are kinda circumventing div.region.region-content by doing that. It'd be better if the header and the buttons actually shared a common parent. That seems to be what you truly want to do here. We can accomplish that with some JavaScript. That will also help with the minor problem the first solution introduces of having your gray underline not stretch across the page.

$(function() {

  $('#block-block-16').insertAfter($('h1.page-header'));
  $('#block-block-16, h1.page-header').wrapAll('<div id="top-container" class="clearfix"></div>');

});

From here, again we'll just float the buttons right and the page header left as before.

We can also take care of some details and clearfix the new div (included in the JS) and perhaps change our bottom border from being set on the h1 to being set on our new div, so that it stretches across the page, below the header and buttons.

You may also choose to remove the 9px padding-bottom on the h1 and instead change that to a 9px padding-top on div.region.region-content.

Hope that helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.