Search code examples
jqueryhtmlcssspotfire

How to align DIV group with other divs on a page

I've taken over a bunch of TIBCO Spotfire [2] templates. Based on one of those, we've received a request to create something really similar.

Unfortunately, I'm having troubles modifying the code, so every element is perfectly aligned vertically. On the "source" code, there's no issue since there are fewer tabs to be handled.

Currently it looks like that: enter image description here Expected behaviour would be to have Tabs, being in the same line as unavailable image & text next to it.

I've tried playing around with HTML/CSS codes, however as I'm not an expert in such (I can do basics), I came here looking for a helpful soul.

$(".topBar").css({
  "float": "bottom",
  "background-color": "#003DAF",
  "height": "100%",
  "font-family": "Segoe UI Light"
});

$(".btnGroup").css({
  "width": "90%",
  "margin-left": "2%",
  "display": "inline-block"
});

$("h3").css({
  "font-family": "Segoe UI Light",
  "font-size": "12px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "left",
  "margin-top": "1em",
  "margin-bottom": "0.5em",
  "margin-left": "0",
  "margin-right": "0"
});
$("h4").css({
  "font-family": "Segoe UI Light",
  "font-size": "12px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#000000",
  "text-align": "left",
  "margin-top": "0",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$("h5").css({
  "font-family": "Segoe UI Light",
  "font-size": "13px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "left",
  "margin-top": "0.5em",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$("h6").css({
  "font-family": "Segoe UI Light",
  "font-size": "13px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "right",
  "margin-top": "0.5em",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$(".hiddenButtons").css({
  "display": "none"
});

$(".logo").css({
  "float": "left"
});

$('.main-button-group').css({
  'display': '-webkit-flex',
  'margin': '0 0 1rem',
  'margin-bottom': '0px',
  'color': '#fff',
  'text-decoration': 'none'
});

$('.main-button-group .button-group').css({
  'display': 'inline-block',
  'position': 'relative',
  '-webkit-flex': '1',
  '-webkit-align-items': 'center',
  '-ms-flex-align': 'center',
  '-webkit-justify-content': 'center',
  '-ms-flex-pack': 'center',
  'max-width': '100em',
  'padding': '0.786em 0',
  'font-family': 'Segoe UI Light',
  'font-size': '0.7rem',
  'font-weight': '600',
  'text-align': 'center',
  'color': '#fff',
  'background-color': '#003daf',
  'letter-spacing': '1px',
  'cursor': 'pointer',
  'transition': 'background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out',
  '-webkit-appearance': 'none',
  '-moz-appearance': 'none',
  '-webkit-user-select': 'none',
  '-moz-user-select': 'none',
  '-ms-user-select': 'none',
  'user-select': 'none',
  '-webkit-touch-callout': 'none',
  '-webkit-tap-highlight-color': 'transparent',
  '-webkit-transform': 'translate3d(0, 0, 0)',
  'transform': 'translate3d(0, 0, 0)',
  'overflow': 'hidden'
});

$('.active').css({
  'background-color': '#09f'
});

$(".button-group").hover(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#003daf'
  });
});

$(".active").hover(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
});

$(".button-group").focus(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#003daf'
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<DIV class=hiddenButtons>
</DIV>
<!-- Navigation bar -->
<DIV class=topBar>
  <DIV class=logo>
    <IMG style="HEIGHT: 50px; MARGIN: 5px;" src="3309c8c106fc4624bd0939a1e78e45b8.png">
  </DIV>
  <DIV style="display:inline-block;; width:90%">
    <DIV style='float:left; width:100%'>
      <DIV style='float:left; width:8%; '>
        <H3>First Line
          <br/> Second Line
          <br/> Third Line</H3>
      </DIV>
    </DIV>
    <DIV class=btnGroup>
      <DIV class=main-button-group>
        <div id="tab1" class="button-group">Tab1</div>
        <div id="tab2" class="button-group active">Tab2</div>
        <div id="tab3" class="button-group">Tab3</div>
        <div id="tab4" class="button-group">Tab4</div>
        <div id="tab5" class="button-group">Tab5</div>
        <div id="tab6" class="button-group">Tab6</div>
        <div id="tab7" class="button-group">Tab7</div>
        <div id="tab8" class="button-group">Tab8</div>
        <div id="tab9" class="button-group">Tab9</div>
        <div id="tab10" class="button-group">Tab10</div>
        <div id="tab11" class="button-group">Tab11</div>
      </DIV>
    </DIV>
    <DIV style="FLOAT: left;  width:13%">
      <H5>Tab2</H5>
    </DIV>
  </DIV>
</DIV>

Note: code might be a mess since I'm still working on cleaning it up.

[2] BI reporting tool that allows use of HTML/CSS/JS/JQuery/etc. inside of it

Solution

  • See updated fiddle here https://jsfiddle.net/jefac65b/1/

    Remove the widths for the div and added flex

    <DIV style="display:flex;; width:90%">
    <DIV style='float:left;'>
      <DIV style='float:left;'>
        <H3>First Line
          <BR> Second Line
          <BR> Third Line</H3>
      </DIV>
    </DIV>

    Aligning the tabs centered to the left hand menu https://jsfiddle.net/oyt4fz9g/

    $('.main-button-group').css({
  'display': '-webkit-flex',
  'margin': '0 0 1rem',
  'margin-bottom': '0px',
  'color': '#fff',
  'text-decoration': 'none',
   'height': '100%',
    'align-items': 'center'
});