Edge
Reputation: 157
Switched to django now tab label width is stretching to tab content width... Hard to explain
This is very hard to explain but the length of the tab is stretching according to the page content width. It happened after we implemeneted an already made GUI with django framework here is a pic:
This pic represents the desired and how it was before we started using django. You can see the tab length matches the length of the title, which is what I want:
Here is the html:
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
<header>
<img src="{% static 'images/arda.png' %}" alt="logo">
<h1>Autism Resource Database Alaska<h1>
</header>
<!--<ul class="header_links">
<li> <a href="{% url 'home' %}">Home</a> </li>
<li> <a href="{% url 'about' %}">About</a> </li>
<li> <a href="{% url 'contact' %}">Contact</a> </li>
<li> <a href="{% url 'faq' %}">FAQ</a></li>
</ul>-->
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<labels for="tab1">Resource Browser</labels>
<div id="tab-content1" class="tab-content animated fadeIn">
<div id="searchbar">
<form action="/search/" method="get">
<input type="text" name="q" placeholder="Enter Query..." class="search">
<input type="submit" value="Search Database" class="button">
</form>
</div>
<div id="sidebar">
<form action="/result/" method="get">
<p> Demographics </p>
<input type="checkbox" name="male" value="selected" id="g_male" />
<label for="g_male">male</label><br>
<input type="checkbox" name="female" value="selected" id="g_female" />
<label for="g_female">female</label><br>
<input type="checkbox" name="age1-3" value="selected" id="age1-3" />
<label for="age1-3">Age 1-3</label><br>
<input type="checkbox" name="age3-18" value="selected" id="age3-18" />
<label for="age3-18">Age 3-18</label><br>
<input type="checkbox" name="age18+" value="selected" id="age18+" />
<label for="age18+">Age 18+</label><br>
<p> Disorders </p>
<input type="checkbox" name="Autism Spectrum Disorder" value="selected" id="asd" />
<label for="Austism Spectrum Disorder">Autism Spectrum</label> <br>
<input type="checkbox" name="Fetal Alcohol Syndrome" value="selected" id="fas" />
<label for="fas">Fetal Alcohol</label><br>
<input type="checkbox" name="Pervasive Developement Disorder" value="selected" id="pdd" />
<label for="pdd">Pervasive Development</label><br>
<input type="checkbox" name="Aspergers Syndrome" value="selected" id="aspergers" />
<label for="aspergers">Aspergers Syndrome</label><br>
<input type="checkbox" name="Cognative Development Disorder" value="selected" id="cdd" />
<label for="cdd">Cognative Development</label><br>
<p> Behaviors </p>
<input type="checkbox" name="sleep" value="selected" id="sleep" />
<label for="sleep">Sleep</label><br>
<input type="checkbox" name="safety home" value="selected" id="safety_home" />
<label for="safety_home">Safety Home</label><br>
<input type="checkbox" name="safety public" value="selected" id="safety_public" />
<label for="safety_public">Safety Public</label><br>
<input type="checkbox" name="safety travel" value="selected" id="safety_travel" />
<label for="safety_travel">Safety Travel</label><br>
<input type="checkbox" name="repetition" value="selected" id="repetition" />
<label for="repetition">Repitition </label><br>
<input type="checkbox" name="aggression" value="selected" id="aggression" />
<label for="aggression">Aggression</label><br>
<input type="checkbox" name="communication" value="selected" id="communication" />
<label for="communication">Communication</label><br>
<input type="checkbox" name="nonverbal" value="selected" id="nonverbal" />
<label for="nonverbal">Nonverbal</label><br>
<input type="checkbox" name="sensory" value="selected" id="sensory" />
<label for="sensory">Sensory</label><br>
<input type="checkbox" name="meltdown" value="selected" id="meltdown" />
<label for="meltdown">Meltdown</label><br>
<input type="checkbox" name="anxiety" value="selected" id="anxiety" />
<label for="anxiety">Anxiety</label><br>
<input type="checkbox" name="change" value="selected" id="change" />
<label for="change">Change</label><br><br>
<input type="submit" value="Submit" />
</form>
</div> <!-- closing sidebar tag -->
{% if error %}
{% endif %}
</div> <!-- closing searchbar tag-->
<div id="wrapper">
<main>
{% block content %}
{% endblock %}
</main>
</div> <!-- closing wrapper tag -->
<footer>
<a href="{% url 'admin:index' %}">admin login</a>
</footer>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<labels for="tab3">Help</labels>
<div id="tab-content3" class="tab-content animated fadeIn">
<form style="width: 100%">
</div>
</li>
</ul>
</body>
</html>
Here is the css:
body {
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 0px;
border-style: solid;
border-top-width: 12px;
border-top-color: #207cca;
font-family: Arial, Verdana, sans-serif;
color: #111111;
}
/* Beginning of header contents */
header {
height: 80px;
font-family: Impact;
color: white;
font-size: 46px;
background-color: #207cca;
box-shadow: 0px 8px 10px #888888;
margin-top: 0px;
margin-bottom: -20px;
}
header h1 {
margin: 0;
padding-top: 7px;
font-size: 45px;
font-family: Impact, Arial, sans-serif;
color: white;
overflow: hidden;
white-space: nowrap;
}
header img {
height: 70px;
width: 100px;
float: left;
padding: 10px 10px 0px 5px;
}
/* End of header contents */
#searchbar {
padding-top: 13px;
padding-left: 8px;
padding-bottom: 13px;
}
#wrapper {
width: 1000px;
background-color: #EEE;
border: solid 2px #ADADAD;
margin-top: 15px;
}
/* Beginning of sidebar content styling */
#sidebar {
width: 240px;
float: left;
padding-left: 8px;
padding-right: 8px;
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
}
/* End of sidebar */
/* Beginning of main content*/
main {
width: ;
margin-left: 250px;
padding: 5px;
background-color: #FFFFFF;
min-height: 800px;
}
main p {
font-size:12px;
font-family: Helvetica, sans-serif;
color: #555555;
}
main h2 {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
main h3 {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
.overview_heading {
font-weight:bold;
}
main img {
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
}
footer {
text-align: center;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
float: none;
list-style: none;
position: relative;
padding: 0;
margin-top: 18px;
margin-left: 115px;
}
.tabs li{
float: left;
}
.tabs labels {
box-shadow: 0px 4px 10px #888888;
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #207cca;
font-size: 20px;
font-weight: normal;
font-family: Impact, Verdana, sans-serif;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tabs labels:hover {
background: lightgrey;
top: 0;
}
[id^=tab]:checked + labels {
background: #207cca;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
line-height: 140%;
padding-top: 0px;
background: white;
color: black;
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
.search {
width: 158px;
margin-left: -8px;
margin-top: 50px;
box-shadow: 0px 4px 10px #888888;
padding: 10px 15px;
background: rgba(50, 50, 50, 0.2);
border: 0px solid #dbdbdb;}
.button {
box-shadow: 0px 4px 10px #888888;
padding: 8px, 15px;
left:-10px;
border: 6px solid #207cca;
background-color: #207cca;
color: #fafafa;}
.button:hover {
background-color:#fafafa;
border-color:#207cca;
color:#207cca;}
/* End of main content */
It has got to be simple. Please help because I have been trying for hours.
Upvotes: 0
Views: 183
Answers (2)
Edge
Reputation: 157
I had an extra closing </div> tag near the closing tags of the first tab element. Special shout out to palafox_e! Thanks homey.
Upvotes: 0
palafox_e
Reputation: 85
I think you miss li closing tag in the html
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<labels for="tab1">Resource Browser</labels>
<div id="tab-content1" class="tab-content animated fadeIn">
</li>
Upvotes: 1
Related Questions
- Django crispy forms tabholder can't change css
- How to configure tabwidth in djhtml?
- Tabs layout in Django
- css of bootstrap 3 in django not working as expected
- Django - Cant align html tabs properly
- Issue with tab's li checking
- Django + Bootstrap + nav-tabs are wrongly displayed
- Setting label width for tabs
- A question on tabs
- Django template formatting leads to "ragged" html