Is there a way to cut down the amount of divs Vue creates? #34

New issue

Closed

opened 2018-05-03 23:43:14 +02:00 by NetOpWibby · 2 comments

NetOpWibby commented

2018-05-03 23:43:14 +02:00

(Migrated from github.com)

Five of these divs are unnecessary and mess up what used to be simple flex CSS stuff. Two ids of the same name isn't valid HTML but I don't know if that matters here.

![ss 2018-05-03 at 4 39 31 pm](https://user-images.githubusercontent.com/1288356/39604199-bc32441c-4ef0-11e8-90b3-fa81c7b5c3bc.png) Five of these `div`s are unnecessary and mess up what used to be simple `flex` CSS stuff. Two `id`s of the same name isn't valid HTML but I don't know if that matters here.

NetOpWibby commented

2018-05-03 23:54:20 +02:00

(Migrated from github.com)

With a page layout like this:

<!DOCTYPE html>
<html lang="en">
  <head/>

  <body>
    <header/>
    <main/>
    <footer/>
  </body>
</html>

This CSS would make it so <main> would be full height.

html,
body {
  width: 100%; height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Instead of looking like this, with extra white space at the bottom:

I can code around it (obviously), it just wouldn't look good (the code).

With a page layout like this: ```html <!DOCTYPE html> <html lang="en"> <head/> <body> <header/> <main/> <footer/> </body> </html> ``` This CSS would make it so `<main>` would be full height. ```css html, body { width: 100%; height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } ``` Instead of looking like this, with extra white space at the bottom: ![ss 2018-05-03 at 4 52 58 pm](https://user-images.githubusercontent.com/1288356/39604603-80124430-4ef2-11e8-9bf1-febb78476b4d.png) I can code around it (obviously), it just wouldn't look good (the code).

Krisseck commented

2018-05-06 16:46:19 +02:00

(Migrated from github.com)

Vue itself does not make any div's, it's all because of Vuetify framework. But that is going to be removed real soon so that also closes this issue.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry.tech#34

No description provided.