search

ihabsoliman / Bootstrap-Form-Builder

Web app for drag drop building bootstrap forms.
MIT License
41 stars 22 forks source link

Ensure `id` attribute is CSS-friendly #8

Open tomByrer opened 10 years ago

tomByrer commented 10 years ago

I'm using a lib that needs dot.nested.objects name attributes. But dot.notation makes bad CSS ID selectors (I could \ escape the CSS, but I don't want to torture the poor PhotoShop choppers ;).

I tried to remove the dots but couldn't hack in the code :/ So I separated name from id:

      "id": {
        "label": "ID",
        "type": "input",
        "value": "filebutton"
      },
      "name": {
        "label": "Name",
        "type": "input",
        "value": "name.val"
      },

Works so far, but I hacked the JSON & not YAML, plus all the default values for name is "name.val". I can PR after yours if you wish.

Improvements: on a fully default component template, editing ID, Name, or Label Text will auto-fill the other 2.

ihabsoliman commented 10 years ago

That's something for your build, you can fork it for your self, I am keeping this one clear from any client requirements just a base anyone can use

Sent from nexus4 On Apr 8, 2014 11:38 PM, "tomByrer" notifications@github.com wrote:

I'm using a lib https://github.com/maxatwork/form2js that needs dot.nested.objects name attributes. But dot.notation makes bad CSS ID selectors (I could \ escape http://jsbin.com/mimey/1/edit the CSS, but I don't want to torture the poor PhotoShop choppers ;).

I tried to remove the dots https://github.com/blakeembrey/camel-casebut couldn't hack in the code :/ So I separated name from id:

  "id": {
    "label": "ID",
    "type": "input",
    "value": "filebutton"
  },
  "name": {
    "label": "Name",
    "type": "input",
    "value": "name.val"
  },

Works so far, but I hacked the JSON & not YAML, plus all the default values for name is "name.val". I can PR after yours if you wish.

Improvements: on a fully default component template, editing ID, Name, or Label Text will auto-fill the other 2.

Reply to this email directly or view it on GitHubhttps://github.com/IhabSoliman/Bootstrap-Form-Builder/issues/8 .

tomByrer commented 10 years ago

That's not really a "client" requirement, that's a CSS requirement. CSS (thus the id HTML attribute) can't have anything but alphanumeric, - & _. Also spaces are bad.

I'm open to other ways to ensure the ID is CSS-friendly, like removing spaces & changing . to _ with a lib like camel-case

Edit: changed topic to reflect the real issue.