coder
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 reference
Please help me in resolving this issue.
With Many Thanks,
Bharath AK
issue1.PNG
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 reference
{% 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 %}
Please help me in resolving this issue.
With Many Thanks,
Bharath AK
issue1.PNG
ASKER
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
Its my bad I had forget to add code tag to the question.
Thanks for letting me know.
Kind Regards,
Bharath AK
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi All,
Now my problem is resolved. Thank you all for your suggestions and help.
With Many Thanks,
Bharath AK
Now my problem is resolved. Thank you all for your suggestions and help.
With Many Thanks,
Bharath AK
You are welcome
can you provide me a live link of your page
Thank You
Mohan SIngh