Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Trevor Hunka
    @Grizvok
    LOL
    Neil Duffy
    @skiv71
    not sure what I've missed, but a site I'm creating, that uses bulma, looked awful under mobile...
    Trevor Hunka
    @Grizvok
    Not sure what exactly you did wrong or missed, but bulma is great for responsive design.
    We'd have to see the code.
    Or potentially inspect the html through dev tools, but ain't nobody got time for that!
    nUKEmAN4
    @nUKEmAN4
    What is best to use modals with js or pure css? I will be making reply system
    nUKEmAN4
    @nUKEmAN4
    Hey, i have this https://hastebin.com/iqemixiseq.xml how could i pass information in modal?
    Trevor Hunka
    @Grizvok
    a data attribute
    Neil Duffy
    @skiv71
    navbar, when mobile, my navbar end (like a right aligned brand logo) is gone and ends up as a fullwidth item underneath the main navbar
    my navbar only has a single item left, and one right... and I'd like to preserve them regardless of media device
    will i have to ditch the navbar has use a banner of sorts, instead?
    nUKEmAN4
    @nUKEmAN4

    a data attribute

    Users can change that information in inspect element like when reply to comment

    Cryoten
    @cryoten
    When using a menu list, how would I go about adding an anchor to the right hand side of each li? So far, I have this which is near what I want... but I want the first anchor to be expanded.
    <li>
        <div class="field has-addons">
            <a class="is-active">foo</a>
            <a class="is-small is-primary">
                <span class="icon is-small">
                    <i class="fas fa-minus"></i>
                </span>
            </a>
        </div>
    </li>
    Adding flex-grow: 1 to the first anchor does the trick, but perhaps that's not the most appropriate way. For now, I'll do that with a temporary bit of inline css while I wait to see if anyone can come up with a better solution.
    Neil Duffy
    @skiv71
    just heads up, my new app is fully responsive now - feedback welcome https://smartpoll.io/vote?poll=NO5Z8FRbjxWitd2jBWLO
    Patryk Szylin
    @Patryk-Szylin
    Has anyone realized that buefy is missing the "is-fluid" modifier on the container class? Or am I doing something wrong ?
    Jannik Malken
    @MannikJ
    Hi! Maybe this is a stupiud question, but how can I disable any action (hover, file choose dialog) of a file input with name most easily? I am using it wrapped inside a vue base component.
    <div class="file has-name is-fullwidth">
      <label class="file-label">
        <input class="file-input" type="file" name="resume">
        <span class="file-cta">
          <span class="file-icon">
            <i class="fas fa-upload"></i>
          </span>
          <span class="file-label">
            Choose a fileā€¦
          </span>
        </span>
        <span class="file-name">
          Screen Shot 2017-07-29 at 15.54.25.png
        </span>
      </label>
    </div>
    Marco Aceti
    @MarcoBuster

    hi guys! I am using .sass
    I have imported the "tiles" component:

    @import "bulma/sass/grid/tiles"

    and I have copied the first example from https://bulma.io/documentation/layout/tiles/ but it's not working

    as the tiles component is not imported.
    the examlpe code:
    <div class="container">
            <div class="tile is-ancestor">
                <div class="tile is-vertical is-8">
                    <div class="tile">
                        <div class="tile is-parent is-vertical">
                            <article class="tile is-child notification is-primary">
                                <p class="title">Vertical...</p>
                                <p class="subtitle">Top tile</p>
                            </article>
                            <article class="tile is-child notification is-warning">
                                <p class="title">...tiles</p>
                                <p class="subtitle">Bottom tile</p>
                            </article>
                        </div>
                        <div class="tile is-parent">
                            <article class="tile is-child notification is-info">
                                <p class="title">Middle tile</p>
                                <p class="subtitle">With an image</p>
                                <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/640x480.png">
                                </figure>
                            </article>
                        </div>
                    </div>
                    <div class="tile is-parent">
                        <article class="tile is-child notification is-danger">
                            <p class="title">Wide tile</p>
                            <p class="subtitle">Aligned with the right tile</p>
                            <div class="content">
                                <!-- Content -->
                            </div>
                        </article>
                    </div>
                </div>
                <div class="tile is-parent">
                    <article class="tile is-child notification is-success">
                        <div class="content">
                            <p class="title">Tall tile</p>
                            <p class="subtitle">With even more content</p>
                            <div class="content">
                                <!-- Content -->
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    maybe I need to add some other component from the sass?
    if I import the complete bulma.css file it works. what I've missed?
    vxfil
    @vxfil
    hi guys, please help center this block vertically, it centers perfectly horizontally, but I can't seem to center it vertically
    <div className="columns is-desktop is-centered is-vcentered">
          <div className="column is-one-quarter">
            <div className="box">
              // code...
            </div>
          </div>
    </div>
    Abner Soares Alves Junior
    @abnersajr
    I'm having issues to properly build Bulma locally for developer purposes. I'm following what is in the readme but isn't working properly.
    The changes made in the Bulma root folder isn't reflecting in the docs.
    With npm run start in root folder this happens when I save my file:
      "status": 1,
      "file": "/Users/abner/Projects/bulma/sass/form/checkbox-radio.sass",
      "line": 9,
      "column": 12,
      "message": "Undefined variable: \"$input-hover-color\".",
      "formatted": "Error: Undefined variable: \"$input-hover-color\"
    Matt
    @duartemvix
    Omg I love bulma I finally found our hub
    Dmitry
    @xotonic

    Would that be a good idea to have an issue to replace img tags in documentation from being void elements to their closed variation? eg

    <img src="..." > => <img src="..." />

    Why? Because JSX doesn't recognize void elements and fails to compile sample snippets

    index.js: Expected corresponding JSX closing tag for <img> (152:20)
    
      150 |                     <p className="image is-32x32">
      151 |                       <img src="https://bulma.io/images/placeholders/128x128.png">
    > 152 |                     </p>
          |                     ^
    xlcrr
    @xlcrr
    Anyone looking to help an open source project ? For the last few years, I have been empowering people to map litter. https://github.com/OpenLitterMap/openlittermap-web is now open source
    Armaan A
    @Armster15
    How can I change the default color of the placeholder of a the input element?
    Marek Alexa
    @coding_hedgehog_gitlab
    Funny, I joined this group to ask question and from what I can see nobody's question got answer for a while. No need to waste time then.
    Kaitlyn Kenwell
    @Redrield
    Is there a way to exclude an item from being placed in the navbar hamburger menu on mobile without putting it in navbar-brand? I have an element that I'd like to place at the end of the navbar, and have it visible on mobile without having to click
    image.png
    That's how it looks on desktop, the element in question being on the far right. I'd like to replicate that as much as possible on mobile
    xlcrr
    @xlcrr

    Hi guys, I recently open sourced my app with 12+ years research behind it.

    https://github.com/OpenLitterMap is built with Laravel, Vue, Bulma, and react-native

    Inspired by OpenStreetMap, we apply the same principles of crowdsourcing and open data to litter and plastic pollution

    See openlittermap.com

    For more info, here is a presentation I gave at the UN last week https://www.youtube.com/watch?v=QhLsA0WIfTA

    We would love if anyone here could take an interest in our laravel project <3

    Marek Alexa
    @coding_hedgehog_gitlab

    Hi guys, I recently open sourced my app with 12+ years research behind it.

    https://github.com/OpenLitterMap is built with Laravel, Vue, Bulma, and react-native

    Inspired by OpenStreetMap, we apply the same principles of crowdsourcing and open data to litter and plastic pollution

    See openlittermap.com

    For more info, here is a presentation I gave at the UN last week https://www.youtube.com/watch?v=QhLsA0WIfTA

    We would love if anyone here could take an interest in our laravel project <3

    And people say Laravel is "dead". People build kickass projects with it.

    Guys I'm having problem with changing default Bulma variables. Can you please take a look at this https://stackoverflow.com/questions/65961913/how-do-i-change-bulmas-default-styling thread ?
    Arpit Patidar
    @iamarpitpatidar

    I am having issues with modals

    <div id="deleteModal" class="modal modal-fx-normal is-active">
        <div class="modal-background"></div>
        <div class="modal-content box"></div>
        <button class="modal-close is-large" aria-label="close"></button>
    </div>

    when I remove the "is-active" class manually or using js the background disappears instantly and the the buttons disappear after like 500ms
    is there any fix for that..?

    boop_xyz
    @boopxyz
    I am using the Bulma Menu but it wont go to the side and instead will go ontop of everything
    Jeana
    @tsidel
    Hi all - I hope this is the place to ask questions... in general on how to do stuff in Bulma. I have no idea if what I'm about to ask is possible in Bulma, or with sass at all. I'm using bulma inside of drupal, so we're overriding some of the variable definitions with our colors, sizing etc. But, what I'm wondering is it possible to override some of the variable definitions based on another class or ID in the div. For example, we have 2 panels on a page, one has an ID of "block-vhcodetaxonomyrelatedcontent" and the other has an id of "block-editorstoppicks" and I'd like to change the $panel-heading-background-color variable to be different per each panel so, say blue on the first one, and orange on the second one. Has anyone been able to do this with sass, and then within sass inside of bulma?
    Beyar
    @Beyarz
    Not with sass I believe
    Jeana
    @tsidel
    Here's a gist write up I did to maybe explain it better: https://gist.github.com/tsidel/051dbe7632434fd903e2f9fb7aa9edef
    How would you handle it the bulma way then if I wanted to change the variables and have panels look different in 2 different spots? Or is the framework assuming I want panels to look the same all the time?
    Jeana
    @tsidel
    I see panels specifically does have additional colors (https://bulma.io/documentation/components/panel/) with the additional is-(variable) name. There are predefined ones in the $color sass map, so now I'm trying to figure how I can add my own, that'll get me a little closer there.
    nUKEmAN4
    @nUKEmAN4
    hi anyone know how to fix empty white space on bottom and right side on mobile using columns?
    bootsie123
    @bootsie123
    image.png
    Hi! Does anyone know how to fix this alignment issue?
    Here's a link to part of the code if needed https://pastebin.com/NnGaXjZT
    bootsie123
    @bootsie123
    I ended up just making the width of the former larger until they aligned up. I'd still be curious to see if anyone has any suggestions on how to fix this when it's a smaller width