[FIXED] How do I get this layout (using CSS flexbox)?

Issue

I have the following markup:

<div class="container">
    <div class="strip">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
</div>

And I'm trying to figure out what CSS I need to add in order to get the content area to fill up whatever vertical space isn't taken up by the strip or the footer.

Please note that the container is position: fixed with top: 0 and bottom: 0 so that the container takes up 100% the height of the browser window. Also, the strip has a set height, but the footer does not (nor can it, as the content is somewhat dynamic). However, I want the footer to take up the minimum amount of space required and have the content area fill up the rest of the vertical space on the page.

I'm thinking that I need to use flexbox to do this, but I'm not sure.

Here's the CSS I have thus far:

.container {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
}

.strip {
    background: red;
    height: 5px;
}

.content {
}

.footer {
}

Solution

I hope this is what you wanted :) Without width or right set your container will basically have 0 width. .strip is positioned at the start of the container and .footer at the end. .content is allowed to stretch but won't stretch more than his neighbors without the flex-grow property which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.strip {
  justify-self: flex-start;
  background: red;
  height: 5px;
}

.content {
  justify-self: stretch;
  background: blue;
  flex-grow: 1;
}

.footer {
  justify-self: flex-end;
  background: yellow
}

<div class="container">
  <div class="strip">
  </div>
  <div class="content">
    test
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answered By - The24thDS

Answer Checked By - Clifford M. (PHPFixing Volunteer)

Read More

[FIXED] How to remove the unwanted jagged aliasing in Arial/Times Font for "writing-mode: vertical-rl & transform: rotate(180deg)"?

Issue

Given some vertical text as part of a sideways navigation using simply and only:

writing-mode: vertical-rl;
transform: rotate(180deg);

However, on both Chrome & Firefox, on both of my standard fontfaces used Arial & Times News Roman text becomes jagged aliased and has a wrong letterspacing.

I have discovered that by adding 0.1 to the degrees this "solves" the aliasing and renders the font beautifully and faithfully without any jagged aliasing:

transform: rotate(180.1deg);

However, this adds a slanted tilt and an extra pixel to the right of the menu items, long story short: it is not a(n elegant) solution to my problem and creates new problems.

Is there another (more elegant) way to get rid of the jagged aliasing introduced by the combination of vertical-rl and rotate(180deg)?

---

Arial/Times, 180degrees, straight but jagged and aliased.
Notice also how the letter spacing looks incorrect!

---

Arial/Times, 180.1degrees, no jagged aliasing and a correct spacing between letters.
But everything is slanted and tilted which is unwanted:

---

Demo

https://jsfiddle.net/8Lrv5epw/

Solution

I think i found a solution to solve this problem. You need a box-sizing property with a value of border-box.

*,
::after,
::before {
  box-sizing: border-box; 
}

nav {
  height: auto;
  font-family: 'Arial';
  letter-spacing: 0.5px;
  font-size: 1.2em; /* was 1em */
  display: block;
  width: 100%;
}
nav li a {
  display: flex;
  background-color: blue;
  text-decoration: none;
  color: #fff;
  padding: 1.5rem 1rem;
  text-align: center;
  transform: scale(0.8); /* scale down */
  transform: rotate(180deg);
}

*,
::after,
::before {
  box-sizing: border-box;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav {
  height: auto;
  font-family: "Arial";
  letter-spacing: 0.5px;
  font-size: 1.2em;
  display: block;
  width: 100%;
}

nav li {
  writing-mode: vertical-rl;
  background: blue;
  padding: 0em;
  border-top: 1px solid white;
}

nav li:first-of-type {
  border-top: none
}

nav li a {
  display: flex;
  background-color: blue;
  text-decoration: none;
  color: #fff;
  padding: 1.5em 1em;
  text-align: center;
  transform: scale(0.8);
  transform: rotate(180deg);
  /* transform: rotate(180.1deg); */
}

nav li.selected,
nav li.selected a {
  background-color: purple;
}

<nav>
  <ul>
    <li><a href="#">Bureau</a></li>
    <li class="selected"><a href="#">Initiatief</a></li>
    <li><a href="#">Dienst</a></li>
    <li><a href="#">Ontwerp</a></li>
    <li><a href="#">Concept</a></li>
    <li><a href="#">Oeuvre</a></li>
  </ul>
</nav>

Answered By - Anton

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How to position a table at the center of div horizontally & vertically

Issue

We can set a image as background image of a <div> like:

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

I need to set a table at the center of a <div> horizontally & vertically. Is there a cross-browser solution using CSS?

Solution

Centering is one of the biggest issues in CSS. However, some tricks exist:

To center your table horizontally, you can set left and right margin to auto:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

To center it vertically, the only way is to use javascript:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

No vertical-align:middle is possible as a table is a block and not an inline element.

Edit

Here is a website that sums up CSS centering solutions: http://howtocenterincss.com/

Answered By - ldiqual

Answer Checked By - Clifford M. (PHPFixing Volunteer)

Read More

[FIXED] How to remove additional tab on product page magento

Issue

I want to know How to remove additional tab on magento product page. I have using Ultimo theme on magento 1.7.0.2 I try to search from previous post but still can't remove it.

I have add additional information to a product description and change a name to "ข้อมูลสินค้า" My point is remove a second tab but still show information on "Product description

This is my product page. http://www.siameyewear.com/ray-ban-rb3025-001-58-aviator-large-metal.html

Thank you.

Solution

I'd create local.xml file inside your theme folder app/design/frontend/[your_package]/[your_theme] (if you haven't already)

And insert the following lines there

<?xml version="1.0"?>

<layout version="0.1.0">

<catalog_product_view>
    <reference name="product.info.tabs">
        <action method="unsetChild">
            <child>product_additional_data</child>
        </action>
    </reference>
</catalog_product_view>

</layout>

After that clear the cache. If you prefer to edit XML in separate files (which I'm not), find catalog.xml of your theme. find the following line and comment them (<!-- -->)

<action method="addTab" translate="title" module="catalog"><alias>additional</alias><title>Additional Information</title><block>catalog/product_view_attributes</block><template>catalog/product/view/attributes.phtml</template></action>

Answered By - Sergei Guk

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] How to center an element horizontally and vertically

Issue

I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex, the horizontal text-align disappears.

How can I make both text alignments x and y for each of my tabs?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

Solution

• Approach 1 - transform translateX/translateY:

Example Here / Full Screen Example

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

---

• Approach 2 - Flexbox method:

Example Here / Full Screen Example

In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example). Remember the parent container will also need height (in this case, 100%).

html, body, .container {
    height: 100%;
}

.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

---

• Approach 3 - table-cell/vertical-align: middle:

Example Here / Full Screen Example

In some cases, you will need to ensure that the html/body element's height is set to 100%.

For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto, assuming the element is block level.

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

---

• Approach 4 - Absolutely positioned 50% from the top with displacement:

Example Here / Full Screen Example

This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

---

• Approach 5 - The line-height method (Least flexible - not suggested):

Example Here

In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.

Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}

<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

Answered By - Josh Crozier

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] Why is rowspan not working if i switch the order of the cells?

Issue

I have a really simple example that is driving me crazy. Can someone explain why is this working

<table>
  <tr>
    <td>January</td>
    <td rowspan="2">$100</td>
  </tr>
  <tr>
    <td>February</td>
  </tr>
</table>

While this isn't?

<table>
  <tr>
    <td>January</td>
  </tr>
  <tr>
    <td>February</td>
    <td rowspan="2">$100</td>
  </tr>
</table>

Solution

Perhaps the easiest way to understand what's happening here is to add a third row.

Firstly, we can have a table where the $100 spans January and February, but not March:

<table>
  <tr>
    <td>January</td>
    <td rowspan="2">$100</td>
  </tr>
  <tr>
    <td>February</td>
  </tr>
  <tr>
    <td>March</td>
  </tr>
</table>

Then, we can have one that spans February and March, but not January:

<table>
  <tr>
    <td>January</td>
  </tr>
  <tr>
    <td>February</td>
    <td rowspan="2">$100</td>
  </tr>
  <tr>
    <td>March</td>
  </tr>
</table>

As you can see, the value always spans down the table, not up it; similarly, a colspan spans right, not left. In your second example in the question, there is no row below February for the value to span down to, so the attribute has no effect.

Answered By - IMSoP

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How to Expand an HTML table sideways left and right in CSS?

Issue

Given a simple table that is a child of an article.

The table has a 100% width so it fits its article parent. I want the table to expand a little out, side ways both left and right, in a symmetrical way.

In my code the table does expand nicely on the left side, however it does not react to anything I set in CSS on the right side.

(Notice that the left text is nicely aligned with the text that is outside of the table, despite the table having margins set.)

The left side works perfectly, but the right side does not. What I want to achieve is for the right side of the table to expand in the same way outward and towards the right, a few pixels.

What have I overlooked here? Thanks!

body,
html {
  background: #EEE;
  margin: 60px;
  width: auto
}

article {
  background: #DDD;
  width: auto
}

table {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 0;
  margin: 0 -10px 0 -10px;
  /* Expand the Table on both left and right side */
}

th,
td {
  padding: .5em 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

table td {}

table th {
  font-weight: bold;
}

.today {
  background-color: #FFD700
}

tr:hover {
  background-color: #FFD700
}

<html>
<body>
  <article>

    Start<br> Start
    <br> Start
    <br>
    <br>

    <table>
      <tbody id="weekdagtabel">
        <tr id="day-1">
          <td>Maandag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-2">
          <td>Dinsdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-3">
          <td>Woensdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-4">
          <td>Donderdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-5">
          <td>Vrijdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-6">
          <td>Zaterdag</td>
          <td>Gesloten.</td>
        </tr>
        <tr id="day-0">
          <td>Zondag</td>
          <td>Gesloten.</td>
        </tr>
      </tbody>
    </table>

    <br> End
    <br> End
    <br> End
    <br>
  </article>
</body>
</html>

Solution

You don't actually want the table to be 100% width. You want 100% plus whatever negative margins you add to the parent.

body,
html {
  background: #EEE;
  margin: 60px;
  width: auto
}

article {
  background: #DDD;
  width: auto
}

table {
  border-collapse: collapse;
  width: calc(100% + 10px + 10px); /* Add the negative margins from below */
  border-spacing: 0;
  margin: 0 -10px 0 -10px; /* Expand the Table on both left and right side */
}

th,
td {
  padding: .5em 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

table td {}

table th {
  font-weight: bold;
}

.today {
  background-color: #FFD700
}

tr:hover {
  background-color: #FFD700
}

<html>
<body>
  <article>

    Start<br> Start
    <br> Start
    <br>
    <br>

    <table>
      <tbody id="weekdagtabel">
        <tr id="day-1">
          <td>Maandag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-2">
          <td>Dinsdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-3">
          <td>Woensdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-4">
          <td>Donderdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-5">
          <td>Vrijdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-6">
          <td>Zaterdag</td>
          <td>Gesloten.</td>
        </tr>
        <tr id="day-0">
          <td>Zondag</td>
          <td>Gesloten.</td>
        </tr>
      </tbody>
    </table>

    <br> End
    <br> End
    <br> End
    <br>
  </article>
</body>
</html>

Answered By - isherwood

Answer Checked By - David Marino (PHPFixing Volunteer)

Read More

[FIXED] How to pass local variable to partial from application layout in rails 3?

Issue

I have a couple of variables that need to be called in all controllers. Displaying latest news in the layout footer.

I create them in application_controller.rb

@hq_news_item = NewsItem.where(:branch_code => "CORP").first
@branch_news_item = NewsItem.where(:branch_code => "MN").first

In my layouts/application.html.haml

= render :partial => "layouts/footer_news"  , :hq_news_item => @hq_news_item, :branch_news_item => @branch_news_item

And then in my layouts/_footer_news I style them

= hq_news_item.title
= hq_news_item.author.name
... etc

Here is the thing, no matter what I do - it keeps saying that hq_news_item is undefined in partial.

All my other partials work fine. I think it has to do with the fact that it's a layout not a view. Can't find anything meaningful in the docs.

Any ideas?

Thank you.

Solution

I think you need to pass the variables as local variables to the partial:

= render :partial => "layouts/footer_news", :locals => { :hq_news_item => @hq_news_item, :branch_news_item => @branch_news_item }

Otherwise Rails won't really understand what you are passing as a variable to the partial and what you are passing as an argument to the render function.

Answered By - Pan Thomakos

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How rails render works in controller? Why something it doesn't use layout?

Issue

I tried to write render in an action, but layout behavior is different, why?

def show
   # assuming we have a partial in app/views/shared/_panel_show.html.erb
   #render "shared/_panel_show" # have layout
   #render "/shared/_panel_show" # without layout
   #render "shared/panel_show" # Template is missing
   #render :partial => "shared/panel_show" # without layout
   render :partial => "/shared/_panel_show",:layout => "application" # have layout
end

I want to render a partial and follow controller layout.

Solution

The whole point of a partial is that it only renders a part of a view and renders it without any layout.

I would suggest creating a new view (and action in our controller), say shared/full_panel_show, which just renders the partial.

<%= render :partial => 'shared/panel_show' %>

Now in your controller render the new view:

def show
  render :action => 'shared/full_panel_show'
end

Depending on what you are doping with the show view, you could just render the partial from it's view instead.

Answered By - Mike Sutton

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How to make layout with rounded corners..?

Issue

How can I make a layout with rounded corners? I want to apply rounded corners to my LinearLayout.

Solution

1: Define layout_bg.xml in drawables:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dp" android:color="#B1BCBE" />
    <corners android:radius="10dp"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

2: Add layout_bg.xml as background to your layout

android:background="@drawable/layout_bg"

Answered By - Gaurav Arora

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] how to adjust title space and plot plotly in r

Issue

gpX83= plot_ly(df_X83, 
           labels = ~Var1, 
           values=~Freq, 
           type ='pie', sort = F) %>% layout(title = list(text = paste0('Gráfico 83.1','<br>', '<sup>',
                                'Com que frequência você participou de novas capacitações?','</sup>'),x = 0.1), 
     colorway = c('#E41A1C', '#377EB8' , '#4DAF4A', '#984EA3','#FF7F00', '#FFFF33', '#A65628', '#F781BF'),
     legend= list(orientation='h')) 

I need to give a space between the title and area of the graph, does anyone know what function to use?

Solution

The margin needs a workaround. It can be added to the layout as margin =.

For example:

mrg <- list(l = 50, r = 50,
          b = 50, t = 50,
          pad = 20)

gpX83 <- plot_ly(df, labels = ~Project, values=~Emissions,
                 type ='pie', sort = F) %>%
  layout(title = list(text = paste0('Gráfico 83.1','<br>', '<sup>',
                                    'Com que frequência você participou de novas capacitações?','</sup>'),x = 0.1),
         colorway = c('#E41A1C', '#377EB8' , '#4DAF4A', '#984EA3','#FF7F00', '#FFFF33', '#A65628', '#F781BF'),
         legend= list(orientation='h'), 
         margin = mrg) 

Answered By - Mohanasundaram

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] How to modify $content_for_layout in CakePHP 1.3

Issue

I am using CakePHP 1.3. In app/views/layouts/default.ctp I am using this:

<?php echo $content_for_layout;?>

According to CakePHP Application Development, by Ahsanul Bari and Anupom Syam,

"This line is mainly responsible for placing controller-rendered view contents inside the layout. We must include this to tell Cake where to place the action-specific controller-rendered views."

I was trying to figure out how to modify the content of $content_for_layout. But I guess that is not the kind of variable that I am supposed to modify to modify the layout. What I am trying to accomplish is to either modify $content_for_layout or create a new layout to customize some elements for an A/B testing experiment. Could you help me to better understand how to manipulate $content_for_layout? Thank you.

UPDATE 1:

I am configuring an A/B testing experiment. I have this in app/views/layouts/default.ctp:

<body>
    ..........
    <div id="split-test-homepage-content-original">
        ..........
        <?php echo $content_for_layout;?>
        ..........
    </div>
    <div id="split-test-homepage-content-redesign">
        ..........
        <?php echo $content_for_layout;?>
        ..........
    </div/>
</body>

With CSS I am hiding/showing either split-test-homepage-content-original or split-test-homepage-content-redesign depending on the version that the split test will show. But I am having problems because $content_for_layout is being rendered twice. Even though visually people only see one version but behind the scenes the page has $content_for_layout loading twice on the same page. This is causing all kinds of problems to me such as duplicate forms, JavaScript elements not working correctly as a result of duplicate variables, etc. What I want to do is to modify what $content_for_layout does for <div id="split-test-homepage-content-redesign">. One option I am considering is to use JavaScript so that in the jQuery(document).ready(function($) { section I can do something in the experiment so that if a variable contains a specific boolean value, I show one version or the other. Something like this:

if(javascriptvariable==true){ then use the following HTML for the view:

<div id="split-test-homepage-content-original">
    ..........
    <?php echo $content_for_layout;?>
    ..........
</div>

else, the Javascript will take care of not displaying the above, but this:

<div id="split-test-homepage-content-redesign">
    ..........
    <?php echo $content_for_layout;?>
    ..........
</div/>

Does the JavaScript approach make sense to you or should I do something about creating new layouts or modifying what $content_for_layout does? Thank you.

Solution

Duplicating content was definitely asking for trouble. I used a much better approach to manipulate CSS classes and ids only without duplicating content.

Answered By - Jaime Montoya

Read More