rundis / elm-bootstrap Goto Github PK

Hi,

Even with correcting the example as per issue #54, I cannot get the select to emit an event on user Input.

Are you sure Select emits a onInput Html event, isn't it an onChange ?

In making a simple test case, the Modal forms do not work for me (in I.E. 11 nor chrome) if I do not include a usage of CDN.stylesheet somewhere in my view. To demonstrate, I have created a very basic Modal form from a trimmed down BootstrapLayout example.

The difference between the working and failing .elm files is simply the following:

C:>diff minWorks.elm minFails.elm
66,67c66
<     [ CDN.stylesheet
<     , h2 [] [ text "Getting started Works" ]
---
>     [ h2 [] [ text "Getting started Fails" ]

compiling minFails.elm and opening index.html in IE you will see something very similar to the image attached. Doing the same with minWorks.elm (after your clear cache to make sure it rebuilds) works fine, and yeilds the attached pic... (renamed .elm files to .txt for ease of upload)

Thanks for all your work, and until you get it fixed, I am happy to simply include a reference to CDN.stylesheet whenever I need to.

minFails.txt
minWorks.txt

Options as List - Lists handling internally
Currently most widgets take options as a List of some Module encapsulated "Option" union type.
The implentation isn't great though because it also treats in as a List internally, because you can easily specify the same option twice (or however many). For some options that could lead to quite unexpected results. (havent tested what bootstrap would show if you wanted a btn-small and btn-large, but when possible we shouldn't invite this ambiguity

Options as List - Record internally
A perhaps somewhat better solution would be like the one used in the Progress module. Where the options is defined as a record internally.
You can still add an option several times, but the behavior is a bit more predictable or in our hands.

I've been thinking a lot on how I'd love to figure out a way that was even less ambiguous and still gives a nice user experience for the API. (I tried using records/type-aliases in the API, but it didn't turn out very nice. Maybe I just didn't find the appropriate pattern.

Thoughts on where to go with this one ?

Being informed of tab changes would allow me to update the hash of my SPA allowing deep-linking into a tab control: https://ellie-app.com/3h8n9K8tXhva1/1 is an example use-case that currently doesn't work, but illustrates the desired behaviour.

There is currently no support for Html.Keyed style containers.

Html.Keyed is needed to optimize DOM updates when children are moved around.

In some cases, for instance Grid.col, you can just add a child Html.Keyed.node "div" [] but in others, for instance Grid.row, you cannot, because it only accepts Grid.col children.

I propose making a Bootstrap.Grid.Keyed (or Bootstrap.Keyed.Grid, or just BootStrap.Keyed) module that has

row : List (Option msg) -> List (String, Column msg) -> Html msg
col : List (Option msg) -> List (String, Html msg) -> Column msg

or as an alternative, put the functions in the Bootstrap.Grid module as

rowKeyed/keyedRow : List (Option msg) -> List (String, Column msg) -> Html msg
colKeyed/keyedCol : List (Option msg) -> List (String, Html msg) -> Column msg

and the same for other places where there are containers, like Tablewhere you would get a large DOM update if you move a row to the top unless it's keyed. I'm not sure where you would actually need keyed children, but I guess you cannot really predict real world usage.

I can make a PR if you think this is a good idea.

I've never done any animations in the web space (or anywhere come to think of it) before this lib. I'm pretty sure the implementation could be a lot nicer. Any takers ? :-)

Do you have wrappers for class="text-muted small" or should I just do that manually?

When you expand accordion's card it's height is "hardcoded" using style="height: SOMEHEIGHTpx;". This causes problems when I update the contents of the card dynamically (adding / removing more html nodes). Please see video illustrating the issue in the application I'm working on (the interface is in czech, but the issue should be understandable nevertheless :-) )

videoIllustratingIssue.zip

Would it be possible to change implementation from setting height in pixels to setting height in %? If not, could you please suggest a way to work around this, so that the card is expanded dynamically as its content gets added / removed?

Hey!

What do you think about exposing Bootstrap.Form.Option ?

I want to write a helper function for my forms to return the group option..

-- pseudocode 
groupOption -> field -> List(Error) -> List (Form.Option msg) :
groupOption field errors =
  if field in errors
    BForm.groupDanger
  else
    []
view =
        Form.form [ onSubmit SubmitForm ]
            [ 
               Form.group (groupOption "username" model.errros)
                [ Form.label [ for "username" ] [ text "Username or Email" ]
                , Input.text
                    [ Input.id "username"
                    , Input.onInput SetUsername
                    ]
                ]

Currently the Grid module exposes a large amount of functions (colXsOne, colXsTwo etc) for creating a column width option.

It would be possible to reduce tat, and still provide a nice safe type safe APi following the approach used by @rtfeldmen in his bootstrap repo.
I see two obvious alternatives in terms of exposed API
a) col1.xs col12.xs
b) colXs.one colXs.twelve
c) Keep as is (or change to use number literals rather than their name)

I'm leaning towards b) for the following reasons: Order as in bootstrap proper, using the number 1 in an identifier doesn't out as clearly as I'd wish.

BTW it's a deliberate decision from my part that they don't return an Html.Attribute (my thinking has been in general to delay resolving to attributes as late as possible to make things more composable. Also note that the ColumnWidth type is used by other modules, well Form anyways.

Related to the discussion above;

• The term xs/Extra small has been removed in Bootstrap 4. So col-xs-4 is now actually col-4
  I've opted to keep it for now, but I'm open to discussing that of course.
• You don't have to specify a number of columns I've represented this as None (which gives the slightly odd colXs.none (not to happy with that one). so colXs.none would result in a class of col
• I just now noticed that you can also specify auto (for variable width content. So something like col-md-auto etc should be supported (might deserve a separate issue though)

thoughts @rtfeldman @mikeonslow ?
(happy for you to take this on Mike btw)

By design? Docs seem to imply that it does.

I'm wondering whether this module is trying to be too clever/helpful/restrictive. Maybe it turns out that people will need a lot more flexibility than what's currently offered and/or don't find the cleverness (things like, when you specify and Id for an input, it will automatically create a "for" attribute on the controls corresponding label when appropriate)

This thing could use a proper look through by an extra pair of eyes me thinks !

Or I am doing something wrong?

http://package.elm-lang.org/packages/rundis/elm-bootstrap/3.0.0/Bootstrap-Form-Input

Adding support for dismissable alerts would be awesome

When setting one option of a dropdown to disabled I found that I was still able to select that item in the list. On hover the mouse changed to indicate it was disabled, but upon click the item was still selected.

The API for Form.InputGroup specifies that custom attributes can be added with the Form.InputGroup.attrs function, however this does nothing to the html in practice.

It appears that although attributes are being added to the data structure, they are not properly being displayed.

Please add a file input form field.
The bootstrap one might be tricky to implement though...

Hi, pretty new to Elm and working on up-skilling in it using a pet project of my yoga site. I'm working backwards, trying to convert a Bootstrap theme to Elm using this package, but cannot find what I'm looking for in Navbar.elm (or I may not understand it if it's there) how to do certain things, e.g:

1. Add navbar-toggleable-sm class to a wrapper div
2. Override mr-auto and replace it with nav class on the ul element

They are the main ones for the moment. Any advise on how to approach this is appreciated. Please see Elm code below for what I have so far (linkAttrs are custom routes).

Desired nav HTML as on current static site

<nav class="navbar" id="nav">
      <div class="container">
        <a class="navbar-brand" href="index.html"><img alt="" src="img/logo-nav.png"></a> <button aria-expanded="false" class="navbar-toggler hidden-md-up pull-right collapsed" data-target="#navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span>☰</button>
        <div aria-expanded="false" class="navbar-toggleable-sm collapse" id="navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item active">
              <a class="nav-link" href="schedule.html">Schedule</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="instructors.html">Instructors</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact</a>
            </li>
          </ul>
        </div>

        <nav class="nav social-nav pull-right hidden-sm-down">
          <a href="http://facebook.com/ahimsayogajp"><i class="fa fa-facebook"></i></a> <a href="http://instagram.com/ahimsayogajp"><i class="fa fa-instagram"></i></a><a href="http://twitter.com/ahimsayogajp"><i class="fa fa-twitter"></i></a><a href="https://www.youtube.com/channel/UCihAjjXntS8Q-5a4wBIolgQ"><i class="fa fa-youtube"></i></a><a href="mailto:[email protected]"><i class="fa fa-envelope"></i></a>
        </nav>
      </div>
    </nav>

Elm Navbar so far

Navbar.config NavbarMsg
        |> Navbar.container
        |> Navbar.collapseMedium
        |> Navbar.collapseSmall
        -- Collapse menu at the medium breakpoint
        |>
            Navbar.attrs
                [ id "nav" ]
        -- Customize coloring
        |>
            Navbar.brand
                -- Add logo to your brand with a little styling to align nicely
                [ href "#" ]
                [ img
                    [ src "img/logo-nav.png"
                    , class "navbar-brand"
                    ]
                    []
                , text "Toggle navigation"
                ]
        |> Navbar.items
            [ Navbar.itemLink (linkAttrs HomeR) [ text "Home" ]
            , Navbar.itemLink (linkAttrs AboutR) [ text "About" ]
            , Navbar.itemLink (linkAttrs ScheduleR) [ text "Schedule" ]
            , Navbar.itemLink (linkAttrs InstructorsR) [ text "Instructors" ]
            , Navbar.itemLink (linkAttrs ContactR) [ text "Contact" ]
            ]
        |> Navbar.view model.navbarState

I am unable to size the cards for card.deck, and the sizing for card.columns is odd.

I want to have a deck of of cards, with either 1 column, or 4 columns. How can this be accomplished? I found no benefits to setting the Card.config [ Card.attrs [ class "w-100 p-3" ] ] with card.deck.

I found that card.columns was modified by Card.config [ Card.attrs [ class "w-100 p-3" ] ] , but the modifications were strange. I was never able to achieve 1, 2 or 4 columns of cards with card.columns.

Overall, I love it, but I wanted a little more control of the card layout with these options.

It would be nice to have the capability to display a modal without an explicit close button. The modal could then be closed by some other use interaction, such as clicking a submit button. If this sounds useful, I could make a pr.

Use IE11 (I know, but people still do it).

Visit the page http://elm-bootstrap.info/carousel

Compare the behavior there to the behavior you see on that page using Chrome. For me, I was unable to get the slides to change. The best I ever saw was that the slide changed once, but the original text was never cleared, so both text appeared.

I do not have a newer version of IE to test.
I am using Windows 7.

I implemented a sample Carousel with images and text, and buttons, which worked great on Chrome, but in IE11, failed. I will not provide source since http://elm-bootstrap.info/carousel shows similar problems still.

Thanks.

The example for Bootstrap.Form.Select.select is the following:

Select.select
        [ Select.id "myselect"
        , Select.onInput MySelectMsg
        ]
        [ Select.item [ id "1"] [ text "Item 1" ]
        , Select.item [ id "2"] [ text "Item 2" ]
        ]

but the <option>-tag does normally not include an 'id' attribute. The example should probably be like:

Select.select
        [ Select.id "myselect"
        , Select.onInput MySelectMsg
        ]
        [ Select.item [ Attribute.value "1"] [ text "Item 1" ]
        , Select.item [ Attribute.value "2"] [ text "Item 2" ]
        ]

I haven't been able to track down what's causing it, but on my Mac every time I open http://elm-bootstrap.info/getting-started Safari uses 100% of the CPU as soon as I scroll down a bit.

The same page works fine with Chrome on the same laptop.

If it isn't something obvious in the next days I can try and see what's going on using the developer tools.

Currently failing, also might be worth having a separate test for button groups.

I'm trying to make a Dropdown scrollable. I though of using the following CSS

.scrollable-menu {
  height: auto;
  max-height: 150px;
  overflow-x: hidden;
}

but I don't see any place where I would be able to pass down this class attr to Dropdown.dropdown.
I checked the relevant source code and seems that it does not allow to inject arbitrary classes to the div. Is there any way to do this that I'm missing?

Just to clarify, I know that this specific issue can be solved by targeting the parent div and applying the css to the dropdown-menu item, but just interested to know if there is way to pass down arbitrary attrs.

This is an awesome library, thank you so much for this!

Hi, thanks for the work on this repo, I'm using it through this repo at the moment : https://github.com/mathieul/brunch-with-elm-bootstrap

I'm trying to simply output a free Boostrap theme using this package's boostrap .elm syntax and believe there maybe no slideshow / carousel element yet. I saw the Accordion, but no carousel.

Is this something on the roadmap or something you would accept via PR?

https://v4-alpha.getbootstrap.com/components/carousel/

value attribute is documented for Select input, but is does not exist in module
https://github.com/rundis/elm-bootstrap/blob/2.0.0/src/Bootstrap/Form/Select.elm#L73

Hello.
https://runelm.io/c/8er is the example.

So I am trying the following code for form validation but I get the above error message.

checkValidationState field =
case field.state of
None ->
( Form.groupDanger, Input.danger, "" )

    Valid ->
        ( Form.groupSuccess, Input.success, "" )

    NotValid error ->
        ( Form.groupDanger, Input.danger, error )

The compiler infers the type as below, so when I add this line of code I get the error.

checkValidationState
: { a | state : ValidationState }
-> ( Bootstrap.Form.Option msg, Input.Option msg1, String )

Also a problem when trying to create a type for a ValidationType union type.

Can this be exposed?

I am using the bootstrap DropDown, and I have been unable to make the dropdown itself disabled. I can place the class "disabled" in the class set for each individual item in the drop down, but i would like to be able to disable the dropdown such that a user would be unable to open up the dropdown itself.

I would like to do something like the following for reference:

[ Dropdown.dropdown
model.inModel.dropdownDays
{ toggleMsg = DropdownDaysMsg
, toggleButton = Dropdown.toggle [ Button.primary ] [ text (toString promotion.days) ]
, options = [ Dropdown.attrs [ style [ ( "color", "white" ) ] , disabled True ] ]
, items =
[ Dropdown.buttonItem [ onClick (ChangeDays 1),] [ text "1" ]
, Dropdown.buttonItem [ onClick (ChangeDays 2) ] [ text "2" ]
, Dropdown.buttonItem [ onClick (ChangeDays 3) ] [ text "3" ]
, Dropdown.buttonItem [ onClick (ChangeDays 4) ] [ text "4" ]
, Dropdown.buttonItem [ onClick (ChangeDays 5) ] [ text "5" ]
]
}
]

To support the slide up/down effect I ended up wrapping the collabsible part in another div. Then I'm using debois/elm-dom on the collapse menu button click event to get the height of the hidden collapsed menu(-bar). Works most of the times, but sometimes it's getting the height of the element after the navbar which produces really funny animation results.

(also see #5)

I have an application which in JS gets the id of the selected Tab pane - and then I can update the contents of the pane

Simple example:
https://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> 
</ul>  
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    home tab!
  </div>
  <div class="tab-pane fade" id="profile">
    profile tab!
  </div>
</div>

Solution in JS (loads content via AJAX)
http://ericsaupe.com/tag/bootstrap-3-tabs-example-ajax/
It would be very useful to have this in elm-bootstrap

I just tried the Accordion and it seems to work fine. I would have liked to be able to specify that only one card should be shown at a time, like this : https://v4-alpha.getbootstrap.com/components/collapse/#accordion-example, but it doesn't seem to be supported.

After skimming the code it seems that changing Accordion.mapCardState or a similar function could be used to not only toggle the visibility of the clicked card but also set the visibility of all other cards in the accordion to Hidden.

Another question:
I am using several accordions in my application (one per page). I am guessing that this should work out fine as long as I use a unique Msg value constructor and accordionState in Model for each accordion, right?

Twould be nice if Progress.value was Float -> Option msg or an option was provided to supply the CSS width value manually. The existing Int [0,100] is a bit coarse for my use case.

@rundis I just took my first serious stab at using this today, and it's fantastic. I'm loving it. Big kudos to you for putting in the time and effort here. Thank you so much.

One need I'm running into that's not covered is to add custom classes, or custom styles to a bootstrap button. I took a quick look at the API and didn't see a way to do that at the moment. Do you think it'd be a good idea to provide an "escape hatch" of sorts, for when a user wants to apply some general HTML attribute to a button? Something like Bootstrap.Button.attribute : Html.Attribute -> Bootstrap.Button.Option?

That might be a good general pattern to follow through the rest of the library, though it gets tricky when there isn't an obvious DOM element to which the attributes would be applied.

Anyway, what are your thoughts on this?

Bootstrap dropdown menus work perfectly fine with alpha.6, but do not function with the newly released beta.

Modal with a lot of content is not scrollable

will try to figure out why but i'm really new to elm

btw great work so far

Might need to be split into several sub issues. There are certainly several of the modules that could help out with providing better accessibility support. (most "widgets" have the option to pass Html.Attribute(s) as an option, but when there are standards in place or we already have the info needed to add extra attributes etc, we probably should

The Card api has changed a lot without the tests being updated.

I'm trying to integrate Elm-Bootstrap with a custom Bootstrap stylesheet generated from the latest v4-beta twbs. Tooltips seem to lack the styling they used to have - it does seem that the twbs project has transitioned from the Tether widget to the Popper widget.

I'm using the latest 3.0.0 release of elm-bootstrap.

I can do some more investigation into this, but it seems like this project needs to update Popover CSS classes to reflect Popper styles: https://github.com/rundis/elm-bootstrap/blob/d6049e0461bf63cbc1005f83d78a7d4bc8bba1a8/src/Bootstrap/Popover.elm

twbs/bootstrap@v4.0.0-alpha.6...v4-dev

I am cloning an application that uses bootstrap (3) and it features a Navbar where the last item is a dropdown item, which is pushed all the way to the right.

You already mentioned, that as a workaround, I could model the dropdown with Bootstrap.Dropdown and then use that in customItems, which should be pushed right automagically.

I also tried to apply my meagre css skills, by trying to force float: right on li:last-child, but that had no effect. Absolute positioning did move the li finally, but broke, when the Navbar collapsed.

I hope this describes my use-case sufficiently, and I have no trouble to do the workaround, but it might be nice to have a way to position the Navbar-Items more easily, or maybe just introducing a "spacer" item.

Thank you for the wonderful library! Let me know, if I can provide anything else.