rundis / elm-bootstrap Goto Github PK
View Code? Open in Web Editor NEWResponsive and reliable web apps with Elm and Twitter Bootstrap
Home Page: http://elm-bootstrap.info/
License: BSD 3-Clause "New" or "Revised" License
Responsive and reliable web apps with Elm and Twitter Bootstrap
Home Page: http://elm-bootstrap.info/
License: BSD 3-Clause "New" or "Revised" License
Bootstrap dropdown menus work perfectly fine with alpha.6, but do not function with the newly released beta.
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.
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.
Hello.
https://runelm.io/c/8er is the example.
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
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
]
]
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:
navbar-toggleable-sm
class to a wrapper divmr-auto
and replace it with nav
class on the ul
elementThey 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).
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>
Navbar
so farNavbar.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
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 :-) )
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?
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;
col-xs-4
is now actually col-4
colXs.none
(not to happy with that one). so colXs.none
would result in a class of col
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)
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 ?
Currently failing, also might be worth having a separate test for button groups.
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 !
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.
The Card api has changed a lot without the tests being updated.
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.
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.
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.
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 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" ]
]
}
]
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.
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?
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" ]
]
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?
@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?
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.
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
?
Do you have wrappers for class="text-muted small"
or should I just do that manually?
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 Table
where 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 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'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
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 ? :-)
By design? Docs seem to imply that it does.
Or I am doing something wrong?
http://package.elm-lang.org/packages/rundis/elm-bootstrap/3.0.0/Bootstrap-Form-Input
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?
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
Please add a file input form field.
The bootstrap one might be tricky to implement though...
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.
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!
Adding support for dismissable alerts would be awesome
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.