Hello, when you create a menu with a dropdown that dropdown expansion gets cut off by the menu.

Below I created a menu using this vanila code http://beauter.outboxcraft.com/docs/navigation/
Note the Tutorial Dropdown - Works on Desktop, but gets cut off on mobile.

##Example:
Full width - Desktop

Responsive - Mobile

Probably a noob question but I I don't quite understand why certain parts of my code blocks are left out.

Especially everything in between < >

StartServers 4
MinSpareServers 20
MaxSpareServers 40
MaxClients 200
MaxRequestsPerChild 4500

Shows as:

StartServers 4
MinSpareServers 20
MaxSpareServers 40
MaxClients 200
MaxRequestsPerChild 4500

Any idea why that is the case?

Kind regards

Edit
I am sorry this does not belong here. Found the answer, have to use < and > to do < and > inside html

Short Description

topnav dropdown menu in wrong position

Platform

Version of Beauter: latest
Browser. Firefox 63, Microsoft Explorer, Microsoft Edge

Image

I am not sure if this will make a whole lot of sense, but when I use bootstrap I would generate blog posts as cards in PHP and then use a grid width like col-sm-4 to create 3 cards next to each other and if I have 9 blog posts it would be 3 rows of 3 cards.

However trying to do that with beauter, the CSS just does not behave so well.

Example code:

  <div class="row">
    <div class="col m12">
      <h2>Lastest Articles</h2>
    </div>
    <?php
    // get the latest articles - limit it to 20
    $stmt = $pdo->prepare('SELECT * FROM posts ORDER BY id DESC LIMIT 20');
    $stmt->execute();
    $articles = $stmt->fetchAll();
    foreach($articles as $article){
    echo '
    <div class="col m4">
      <div class="card">
        <a href="/blog/'.$article['url'].'">
          <img src="../img/blog/'.$article['feature_image'].'" class="_width100">
        </a>
        <div class="-content _alignCenter mt-3">
          <p><strong>'.$article['title'].'</strong></p>
          <p class="_alignLeft">'.$article['intro'].'</p>
          <a class="button _small _teal" href="/blog/'.$article['url'].'">Read Article</a>
        </div>
      </div>
    </div>
    '; 
    }
    ?>
  </div>

Result:

If there are just 3 blog posts it works, but when there is more the layout gets messed up - I know this is not the intended use, but most of what I do is dynamic content so I won't know the end count of items beforehand, I need the CSS to be smart and know that we mean to keep it 3 in a row and start a new stack when we have more than 3 posts.

I hope this makes sense?

There are some mistakes in the docs on the website, is the website on github, then I can fix it.

Short Description

Invisible characters in input field. Maybe white characters in white input field.

Platform

Beauter 3
Firefox 61.01, dark theme. Ubuntu 18.04 LTS

Hi,

1st great work on this, simple, clean and looks super.
I noticed that in the docs there is no mention about offsets but there are some hidden in the css:
@media (min-width: 550px) { .off-1 { margin-left:8.33% }

Works ok in desktop mode (ex: class="col d12") but there seems to be no offset for mobile ?

Chris

Could you modify the showsnackbar method to pass in parameter the text of the snackbar ?

showsnackbar( ID, "my new text" )

Any way to add a utility class to prevent the shadow on hover for cards?

I just want a normal card, no hover effect.

http://beauter.outboxcraft.com/docs/lists

You open with a <ul> but later down the list you close a </ol> that is never opened

Sorry, I'm blind, the lacking indentation made it impossioble to see!

I have successfully configured the modal example from your docs and it llooks good.

When I go to ad a second modal — myModal2 let us say — the button that triggers it triggers the first modal instead. The two modals are obaModal and myModal2 ... It looks like this in Pug ...

		button#myBtn2 Abra-me Sésamo

		// The Modal
		#myModal2.modalbox-modal
			// Modal content
			.modalbox-modal-content(style='width: 500px')
				span#modalbox-close2.-close ✖
				h2._alignCenter
					i.fa.fa-gears.fa-lg
					|   Engenho Novo LLC
				h4._alignCenter We Grok the Web Worldwide 
				p
					| Lorem ipsum dolor sit amet et cetera fake Latin
				button.right Fechar

		script.
			// Get the modal
			var modal = document.getElementById('myModal2');
			// Get the button that opens the modal
			var btn = document.getElementById("myBtn2");
			// Get the <span> element that closes the modal
			var span = document.getElementById("modalbox-close2");
			// When the user clicks on the button, open the modal
			btn.onclick = function() {
			modal.style.display = "block";
			}
			// When the user clicks on <span> (x), close the modal
			span.onclick = function() {
			modal.style.display = "none";
			}
			// When the user clicks anywhere outside of the modal, close it
			window.onclick = function(event) {
			if (event.target == modal) {
			modal.style.display = "none";
			}
			}

Both buttons open myModal2 in other words.

Hope this is not an annoying noob question. i.fa.fa-heart.fa-4x your boatiful Beauter.

I noticed that making a 5 column layout (full width), is impossible hard.
Bootstrap has the same issue and must be tweaked to support it.
https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap

One solution to this is to do like what pure-css does and implement multiple 5ths and 24ths based grids.
Maybe we could look into implementing something like this for beauter ?

Chris

Short Description

Slight vertical displacement of button text

Platform

Beauter 0.3
MacOS Sierra, Chrome 63, Safari 11

Image

Brief Description of the problem

Button texts (especially noticeable on small sizes buttons) are rendered with slight visual vertical displacement

Steps to Reproduce

Open official beauter doc site at section "buttons"
http://beauter.outboxcraft.com/docs/buttons/

Expected behavior

All button texts must be vertically aligned to button body

What happened instead

Vertical displacement, bottom space is about 5px higher

Solution if any?

Tried line-height:1 and padding:10px 30px 8px; looks far better, still not sure this is a solution

Are there any menubars?

Looking for a simpler solution to make parallax effect available on every device. Please take a look at .bg-parallax class.

Docs state:
npm install beauter

this fails with a 404 not found.
needed to do:
npm install @outboxcraft/beauter