Link to home
Start Free TrialLog in
Avatar of coder
coderFlag for Australia

asked on

Not able to set 100% to width of the flex containers

Hi Experts,

     Not able to set width 100% for flex containers.  Is it right? that to set width 100% to flex containers.  I have a flex container, which is like header or nav bar.  I am pasting the code below for reference.  I am also attaching screen shots for referenceUser generated image

{% load static %}
{% load pipeline %}
{% load wagtailcore_tags  %}
{% load template_tags %}
{% load render_bundle from webpack_loader %}

<!doctype html>
<html>
  <head>
    <title>NTL</title>
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.png' %}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes,shrink-to-fit=no">
    {% stylesheet 'style' %}
    {% block head %}{% endblock %}
  </head>
  {% block body %}
    <body class="{% if body_class %}{{body_class|safe}}{% endif %} navigation-bar-shown">
      <input type="checkbox" class="hide" id="navbar-menu-toggle" />
      <input type="checkbox" class="hide" id="navbar-search-toggle" {% if query|length|get_digit:"0" != 0 %}checked{% endif %}/>

      <header class="navigation-bar-container">
        <label class="screen" for="navbar-menu-toggle"></label>

        <div class="navigation-bar container">
          <div style="background: #facb66; color: #333; font-size: 14px; padding: 10px; text-align: center">
            <div class="page">
              This is alpha. Help us by providing <a href="mailto:librariesnt.servicedesk@nt.gov.au?subject=NTDL+Feedback">feedback</a>.
            </div>
          </div>

          <div class="strip">
            <div id="navbar-search">
              {% get_search_path as search_path %}
              <form action="{{search_path}}" method="get" role="search" class="search-container" id="search-form">
                <div class="menu-container">
                  <label class="menu" for="navbar-search-toggle" id="navbar-clear">
                    <i class="material-icons">clear</i>
                  </label>
                </div>
                <input type="text" id="search-query" placeholder="Start typing search terms" name="query" value="{{query}}" class="query" autocomplete="off" />
                <span role="button" class="filter clickable" id="navbar-filter">
                  <i class="material-icons" style="verticalAlign: bottom">filter_list</i>
                </span>
              </form>
            </div>
            <div id="navbar-standard">
              <div class="menu-container">
                <label class="menu clickable" for="navbar-menu-toggle">
                  <i class="material-icons show-menu">menu</i>
                </label>
              </div>
              <a href="/" class="logo">
                Territory Stories
              </a>

              {% main_nav_menu %}

              <div id="autocomplete-screen">
                <ul id="autocomplete-results">
                </ul>
              </div>

              <label for="navbar-search-toggle" class="search" id="toggle-search-button">
                <i class="material-icons">search</i>
              </label>
            </div>
          </div>
        </div>
      </header>

      {% block content %}{% endblock %}

Open in new window





Please help me in resolving this issue.

With Many Thanks,

Bharath AK
issue1.PNG
Avatar of mohan singh
mohan singh
Flag of India image

Hi@Bharath A.K
 
can you provide me a live link of your page

Thank You
Mohan SIngh
Avatar of coder

ASKER

Hi Mohan,

 the link is http://54.*.*.*:8000/

With Many Thanks,
Bharath AK
Avatar of coder

ASKER

Hi Administrator,

    Its my bad I had forget to add code tag to the question.

Thanks for letting me know.

Kind Regards,
Bharath AK
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of coder

ASKER

Hi Julian,

       I am using bootstrap.  I had changed the class of the div from container to container-fluid. The problem got resolved.  I was under assumption flex has something to do with the parent containers width.  Thanks for clarifying.  Now my problem is resolved.

With Many Thanks,
Bharath AK
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of coder

ASKER

Hi All,

Now my problem is resolved.  Thank you all for your suggestions and help.

With Many Thanks,

Bharath AK
You are welcome