Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Can't get % widths to work on a div table

Tags:

html

css

twitter-bootstrap

So I am making a daily planner view for a website and I am having trouble formatting it. Here is the code I have below:

CSS

.responsive-calendar .controls {
    color: #666;
    font-weight: normal;
    font-size: 18px;
    font-family: "Open Sans",Arial,Verdana,sans-serif;
    text-align: left;
}

.responsive-calendar .controls a {
    cursor: pointer;
}

.responsive-calendar .controls h4 {
    display: inline;
}

.responsive-calendar .day-headers, .responsive-calendar .days, .responsive-calendar .timeslots {
    font-size: 0;
}

.responsive-calendar .header {
    background-color: #f3f2f2 !important;
    box-shadow: 0px 1px 0px 0px rgb(255, 255, 255) inset;
    color: rgb(102, 102, 102);
    font-size: 13px;
    line-height: 18px;
    padding: 10px 0px;
    font-weight: bold;
    cursor:default !important;
}

/* Daily Planner CSS */
.responsive-calendar .timeslot {
    height:auto;
    display:flex;
    display:-webkit-flex;
    flex-flow: row column;
    -webkit-flex-flow: row column;
}

.responsive-calendar .hour {
    display: inline-block;
    position: relative;
    font-size: 10px;
    border:1px solid rgb(221, 221, 221);
    width: 10%;
    text-align: center;
    flex: 1 1 100%;
    -webkit-flex:1 1 100%;
}

.responsive-calendar .appts {
    height:auto;
    display:flex;
    display:-webkit-flex;
    width: 900%;
    flex-flow: row column;
    -webkit-flex-flow: row column;
}

.responsive-calendar .appt {
    background-color:#CCC;
    display: inline-block;
    position: relative;
    font-size: 10px;
    border:1px solid rgb(221, 221, 221);
    width: 90%;
    text-align: center;
    flex: 1 1 100%;
    -webkit-flex:1 1 100%;
}

.responsive-calendar .appt a {
    color: #000000;
    display: block;
    cursor: pointer;
    padding: 5% 0 5% 0;
}

.responsive-calendar .timesection {
    display: inline-block;
    position: relative;
    font-size: 10px;
    border:1px solid rgb(221, 221, 221);
    text-align: center;
    flex: 1 1 100%;
    -webkit-flex:1 1 100%;
}

.responsive-calendar .timesection:hover {
    background-color: rgb(227, 235, 253);
    cursor: pointer;
    text-decoration: none;
}

.responsive-calendar .timesection a {
    color: #000000;
    display: block;
    cursor: pointer;
    padding: 3% 0 3% 0;
}

.responsive-calendar .timesection a:hover {
    /* background-color: #eee; */
    text-decoration: none;
}

.responsive-calendar .timesection.header {
    border-bottom: 1px gray solid;
}

.responsive-calendar .timesection.active {
    background-color: rgb(209, 206, 224);
}

.responsive-calendar .timesection.active:hover {
    background-color: rgb(227, 235, 253);
}

.responsive-calendar .timesection.not-current {
    background-color: rgb(205, 205, 205);
    cursor:default;
}

HTML

<div class="responsive-calendar">
    <div class="controls">
        <img src="images/left_16.png" />
        <?php echo date("M d, Y", mktime(0,0,0,$cMonth,$cDay,$cYear)); ?>
        <img src="images/right_16.png" />
        <a style="padding-left:15px;">Today</a>
        <a style="padding-left:15px;">Monthly View</a>
    </div>
    <div class="day-headers">
        <div class="hour header"><strong>Times</strong></div>
        <div class="appt header"><strong>Appointments</strong></div>
    </div>
    <div class="timeslots">
        <div class="timeslot">
            <div class="timesection hour">10:00am</div>
            <div class="timesection appt">Test 1</div>
        </div>
        <div class="timeslot">
            <div class="timesection hour">11:00am</div>
            <div class="timesection appt">Test 2</div>
            <div class="timesection appt">Test 3</div>
        </div>
        <div class="timeslot">
            <div class="timesection hour">12:00pm</div>
            <div class="appts">
                <div class="timesection appt">Hack Result 1</div>
            </div>
        </div>
        <div class="timeslot">
            <div class="timesection hour">12:00pm</div>
            <div class="appts">
                <div class="timesection appt">Hack Result 2</div>
                <div class="timesection appt">Hack Result 3</div>
            </div>
        </div>
    </div>
</div>

Here is a JSFiddle demo.

So in the demo, what I want is the hacked result (the last 2 rows of div table).

I am using bootstrap 3.3.4, and the attached CSS to style the page. I am not sure why I can't get the header divs to line up properly by the percentages (10%, 90%), but then the div's below don't want to match up below.

In the hacked result, I just added another class, appts, and inflated that to 900% and it gets close the what I wanted. But I want this done properly, and to understand why this isn't working as I hoped.

What I want is all the times to be 10% of the available width, and then the appts to occupy 90% of the available width. If there is more than one .appt, then they divide the 90% width evenly.

like image 850
David Avellan Avatar asked Oct 20 '22 13:10

David Avellan

1 Answers

How about this: 

.responsive-calendar .controls {
  color: #666;
  font-weight: normal;
  font-size: 18px;
  font-family: "Open Sans", Arial, Verdana, sans-serif;
  text-align: left;
}
.responsive-calendar .controls a {
  cursor: pointer;
}
.responsive-calendar .day-headers,
.responsive-calendar .days,
.responsive-calendar .timeslots {
  font-size: 0;
}
.responsive-calendar .header {
  background-color: #f3f2f2 !important;
  box-shadow: 0px 1px 0px 0px rgb(255, 255, 255) inset;
  color: rgb(102, 102, 102);
  font-size: 13px;
  line-height: 18px;
  padding: 10px 0px;
  font-weight: bold;
  cursor: default !important;
}
.responsive-calendar .hour {
  font-size: 10px;
  border: 1px solid rgb(221, 221, 221);
  width: 10%;
  text-align: center;
  max-width: 10%;
  float: left;
}
.responsive-calendar .appts {
  height: auto;
  display: flex;
}
.responsive-calendar .appt {
  background-color: #CCC;
  font-size: 10px;
  border: 1px solid rgb(221, 221, 221);
  text-align: center;
}
.responsive-calendar .appt a {
  color: #000000;
  display: block;
  cursor: pointer;
  padding: 5% 0 5% 0;
}
.responsive-calendar .timesection {
  display: inline-block;
  position: relative;
  font-size: 10px;
  border: 1px solid rgb(221, 221, 221);
  text-align: center;
  flex: 1 1 100%;
  -webkit-flex: 1 1 100%;
}
.responsive-calendar .timesection:hover {
  background-color: rgb(227, 235, 253);
  cursor: pointer;
  text-decoration: none;
}
.responsive-calendar .timesection a {
  color: #000000;
  display: block;
  cursor: pointer;
  padding: 3% 0 3% 0;
}
.responsive-calendar .timesection a:hover {
  text-decoration: none;
}
.responsive-calendar .timesection.header {
  border-bottom: 1px gray solid;
}
.responsive-calendar .timesection.active {
  background-color: rgb(209, 206, 224);
}
.responsive-calendar .timesection.active:hover {
  background-color: rgb(227, 235, 253);
}
.responsive-calendar .timesection.not-current {
  background-color: rgb(205, 205, 205);
  cursor: default;
}
.appt {
  max-width: 100%;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="responsive-calendar">
  <div class="controls">
    <img src="images/left_16.png" />
    <?php echo date( "M d, Y", mktime(0,0,0,$cMonth,$cDay,$cYear)); ?>
    <img src="images/right_16.png" /> <a style="padding-left:15px;">Today</a>
    <a style="padding-left:15px;">Monthly View</a>

  </div>
  <div class="day-headers">
    <div class="hour header"><strong>Times</strong>
    </div>
    <div class="appt header"><strong>Appointments</strong>
    </div>
  </div>
  <div class="timeslots">
    <div class="timeslot">
      <div class="timesection hour">10:00am</div>
      <div class="appts">

        <div class="timesection appt">Test 1</div>
      </div>
    </div>
    <div class="timeslot">
      <div class="timesection hour">11:00am</div>
      <div class="appts">
        <div class="timesection appt ">Test 2</div>
        <div class="timesection appt  ">Test 3</div>
      </div>
    </div>
    <div class="timeslot">
      <div class="timesection hour">12:00pm</div>
      <div class="appts">
        <div class="timesection appt">Hack Result 1</div>
      </div>
    </div>
    <div class="timeslot">
      <div class="timesection hour">12:00pm</div>
      <div class="appts">
        <div class="timesection appt">Hack Result 2</div>
        <div class="timesection appt">Hack Result 3</div>
      </div>
    </div>
  </div>
</div>

What I've done:

HTML:

  • Wrapped the elements which have .timesection .appt with a div.appts.

CSS:

  • Completely removed .responsive-calendar .timeslot css.

  • Removed display:inline-block;, position:relative; and added float:left; to .responsive-calendar .hour.

  • Removed display:-webkit-flex;, width: 900%;, flex-flow: row column;, -webkit-flex-flow: row column; from .responsive-calendar .appts.

  • Removed flex, width, position and display from .responsive-calendar .appt.

  • At last added .appt a max-width: 100%;

Also find an example pen.

like image 90
cch Avatar answered Oct 22 '22 21:10

cch
Sign in to Comment

Related questions

Uncaught TypeError: Cannot read property 'style' of undefined error
At what point does using a handler function improve HTML parsing efficiency?
How to make table column non-copyable? (HTML/CSS)
Element with cut corner and semi-opaque background
Dynamically created SVG not working in Firefox, but works in Chrome
show SVG with image tag in inline html img tag
Show/Hide Header [duplicate]
Server Sent Events(SSE) in Google App Engine
Mouse scrolling freezes chrome tab
How to calculate the CRC of an arrayBuffer (From FileReader in javascript) compatible with the CRC32 function in php?
Fit div container to video size (fullscreen as well)
How to $setdirty to a single input
Drag and drop positioning problems+ updating the id
Spacing between superposed divs, without affecting width
Script not firing properly after preloader script
jQuery closest div with specific class/id
How to serve an image in Django using jquery
Generic Sensor API not working on localhost
JavaScript Function Not Defined Error (BUT IT IS DEFINED)
How to include an ng-template element without a condition in Angular 2

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!