Astroid-Framework icon indicating copy to clipboard operation
Astroid-Framework copied to clipboard

Zero Template - search box is set to 100% wide

Open shoulders opened this issue 5 years ago • 5 comments

I think this is a CSS issue, It looks a bit daft 100% wide. I have check it is doing this in the quickstart package aswell.

.input-group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

Without modification

image

After I disable wdith: 100% in the rule above

image

Related to #97

shoulders avatar Jul 16 '19 17:07 shoulders

@chandanndeep what's the logic of width:100% for input-group. Is that bootstrap default?

chetanmadaan avatar Jul 16 '19 18:07 chetanmadaan

@shoulders

This is not a CSS issue. Search bar is displayed as such because the section layout is set to container. If you disable the width:100% from the class (.input-group) this might give a bad impact somewhere on your site. It a by default Bootstrap class.

itxchandan avatar Jul 17 '19 11:07 itxchandan

Suggestion: You can write your own CSS, how you need it.

itxchandan avatar Jul 17 '19 11:07 itxchandan

I can write my own CSS, lol (look at my github repo)

I personally would add a specific line of CSS into the framework to restict the size of the search box.

.search #searchForm .input-group {width: 0}
.search #searchForm .input-group {max-width: 400px;}

shoulders avatar Jul 17 '19 11:07 shoulders

No problem.

I recommend you, add max-width: 400px; don't change the width into width: 0;

itxchandan avatar Jul 17 '19 12:07 itxchandan