Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

How to change size of tagsinput #314

Closed
okproject opened this Issue · 4 comments

3 participants

@okproject

Hi,
I need to change container size and font size of tags in tags input.
Can you share how to do it please ?
Thanks.

@pytkin

Hello, @okproject. Tagsinput is block element, so you can set width for parent conteiner, or set fixed width in pixels for all .tagsinput's in page. You can do it in your css file:

.tagsinput {
  width: 250px;
}

Changing font-size of tags(in your css file):

.tagsinput .tag {
  font-size: XXpx;
}

Include your css file after Flat UI:

  <!-- Loading Flat UI -->
  <link href="css/flat-ui.css" rel="stylesheet">
  <link href="path/to/your-css.css" rel="stylesheet">

Also you do this, by changing files of framework.
less/modules/tagsinput.less:

//
// Tags Input
// --------------------------------------------------

.tagsinput {
  background: white;
  border: 2px solid mix(@inverse, @brand-primary, 90%);
  border-radius: @border-radius-large;
  height: 100px;
  margin-bottom: 18px;
  padding: 6px 1px 1px 6px;
  overflow-y: auto;
  text-align: left;
  width: 250px; // - add this line

  .tag {    
    border-radius: @border-radius-base;
    background-color: mix(@inverse, @brand-primary, 90%);
    color: mix(@brand-primary, @inverse, 65%);
    font-size: ceil(@component-font-size-base * 0.933); // ~14px - change this line

After that, you need recompile flat-ui.less using one of this tools; I think this tutorial will be helpful, if you newbie in LESS: Flat UI Pro Tutorial: Setting and Compiling Using LESS

@okproject

@pytkin
I want to use different size of tags in different areas. So , if i have 2 div content which contains different tags , what should i do ?

I mean

tag 1 , tag 2 etc...
tag x, tag y etc

I need 10 px size on div a content for tags and i need 20ox size on div b content for tags.
Can you share your advice please ?

@okproject

No answer yet ?

@pytkin

You can create a component which will extend your own classes with bootsrap tagsinput via mixins.

@andrew-ml andrew-ml closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.