Can you provide an example that you wish to modify?

Normally you can achieve that by providing the following props

<Textbox
classNameInput="myCustomInputClass"
classNameWrapper="myCustomWrapperClass"
classNameContainer="myCustomContainerClass"
customStyleInput={{ paddingTop: '0', paddingBottom: '0', height: '50px', paddingLeft: '20px', paddingRight: '20px', border: 'none' }}
customStyleWrapper={{padding: '2px'}}
customStyleContainer={{padding: '3px'}}
/>

if you find something that cannot be done by those props, you can overwrite it directly from css.
e.g.

.myCustomWrapperClass input[type='text'].react-inputs-validation__textbox__input___20hDL{
  border-radius: 40px !important;
  border-color: transparent !important;
}

One more example

<div>
  <div>
    <Textbox
      tabIndex="1"
      id=""
      customStyleWrapper={{ height: '100%' }}
      customStyleContainer={{ height: '100%' }}
      customStyleInput={
        { 
          paddingTop: '0', 
          paddingBottom: '0', 
          height: '45px', 
          paddingLeft: '20px', 
          paddingRight: '0px', 
          border: 'none', 
          textAlign: 'right'
        }
      }
      value={name}
      type={`text`}
      placeholder="enter the name"
      onChange={this.handleNameChange}
      onBlur={() => {}}
      validationOption={{
        check: false
      }}
    />
  </div>
  <div className="border" />
  <div>
    <Textbox
      tabIndex="2"
      id=""
      customStyleWrapper={{ height: '100%' }}
      customStyleContainer={{ height: '100%' }}
      customStyleInput={
        { 
          paddingTop: '0', 
          paddingBottom: '0', 
          height: '45px', 
          paddingLeft: '20px', 
          paddingRight: '0px', 
          border: 'none', 
          textAlign: 'right'
        }
      }
      value={title}
      type={`text`}
      placeholder="enter the title"
      onChange={this.handleTitleChange}
      onBlur={() => {}}
      validationOption={{
        check: false
      }}
    />
  </div>
  <div className="border" />
</div>

from react-inputs-validation.

This is what I was looking for, thank you.

from react-inputs-validation.

Hi Guys :)

Firstly, thanks for the great library! Its really helped me to get some validations implemented on my forms. I was trying to update the width of the "Textbox" and "Select" components so that they don't stretch across the entire screen as seen below:

Can you please guide me on where the best place is to update the width/CSS so that for example the two elements can sit side by side?

Thanks.

from react-inputs-validation.

So I got the width of each element to scale down using the CSS elements seen below (including removing one of the borders), but I can't get them to be inline with one another? Do you guys have any suggestions with respect to that?

`.react-inputs-validation__textbox__wrapper___3tnXv{
width: 15em !important;
}

.react-inputs-validation__select__wrapper___1B4OH{
width: 15em !important;
}

.react-inputs-validation__msg___pxv8o .react-inputs-validation__error___2aXSp {
padding: 0% !important;
position: relative;
border: 0px solid #e5e5e5 !important;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

.react-inputs-validation__select__container___3jgUR {
padding: 0% !important;
position: relative;
border: 0px solid #e5e5e5 !important;
/box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);/
}`

from react-inputs-validation.

why don't you wrap Components inside a div? So that you can manipulate the with of the Textbox by manipulating its parent

maybe something like this
https://codesandbox.io/s/mo6y614v88

from react-inputs-validation.

Thanks @edwardfhsiao :) I was actually looking at doing something like this with the bootstrap libraries as well - I got to the same point i.e. where the boxes were centered underneath one another. Your way is simpler though, so I have adopted that :)

Is there a way to put the "input" and "dropdown" boxes next to each other? Something like:
"Place your name here ^-^" "US ⌄"

Instead of the current:
"Place your name here ^-^"
"US ⌄"

It seems like there is a "break" between the two components that I can't get rid of?

from react-inputs-validation.

you want dropdown to be inside the input or just line up next to the input ?

from react-inputs-validation.

Hi @edwardfhsiao,

Apologies for the confusion on my end. I would like to get them to align to one another as in the "mock" view below that I edited from your code sandbox above:

from react-inputs-validation.

@MRMTC https://codesandbox.io/s/mo6y614v88, you can always play around those CSS

from react-inputs-validation.

Awesome stuff, thanks so much @edwardfhsiao :) I hope you have a great week ahead!

from react-inputs-validation.

@MRMTC my pleasure

from react-inputs-validation.