Need to reduce size of input box and put a button next to it

Hello,

I'm working on a plugin in nopCommerce 3.80 with source in Visual Studio 2015.

When I use this code in my cshtml file:

<div class="form-group">
    <div class="col-md-3">
        @Html.NopLabelFor(model => model.Username)
    </div>
    <div class="col-md-9">
        @Html.NopEditorFor(model => model.Username)
        @Html.ValidationMessageFor(model => model.Username)
        <input type="submit" name="generatename" class="btn bg-green" value="Generate Name" />
    </div>
</div>

I displays this way: https://drive.google.com/file/d/0B3Jw7h2K4ZvkVTk2TkhtR3Z6N0E/view?usp=sharing

How do I make the input field smaller and put the "Generate Name" button to the right of the input box?

Thanks,
Tony

Hi.
You can see how it was done for example on Email Account details page.
Look at <div class="input-group"> in src/Presentation/Nop.Web/Administration/Views/EmailAccount/_CreateOrUpdate.cshtml.

Carneno wrote:
Hi-

This must be edited in your stylesheet.
If you use the DefaultClean theme, it is here:
/themes/DefaultClean/Content/css/styles.css

If you have a custom theme, look for the content/css/styles.css within it's theme folder.

Open it and press Ctrl+F
search for:  input[type="text"]
within the GLOBAL STYLES section of the stylesheet.

If you don't see a width definition for the text input, define one.
If you do, edit it to be narrower, like:

width: 120px;

Also, search for this class:
btn bg-green (which may actually be defined in a different stylesheet, like maybe your 3rd party menu plugin)
You will edit it the same way, for example:

min-width: 85px;
float: right;

RomanovM wrote:

Thanks Romanov.  That works great.

Is there a way to put more separation between the field and the button?

Also, can I make the field shorter?

Thanks,
Tony

embryo wrote:

Thanks embryo.

I think your idea will work, but won't it change the width for all of the input fields on all views?

Thanks,
Tony

Carneno wrote:

For the shorter field try to use <div class="input-group input-group-short"> instead of <div class="input-group">.
Regarding separation, you can wrap your NopEditorFor with div <div class="input-group-text">, it will give the result.
You can also edit css of input groups in \src\Presentation\Nop.Web\Administration\Content\styles.css for the desired result.

RomanovM wrote:

That worked Romanov, except that the length of the input field is too short to display the entire text.  I put in a style attribute like this: <div style="width:700px" class="input-group  input-group-short">.

That gave me the size I needed.

Thanks,
Tony