[Blazor] Mudblazor 컨트롤 줄바꿈 문제 (display: inline)

🌐 ASP.NET, Blazor, IIS, 웹 Q&A
1

MudBlazor에서 MudCheckBox나 MudSwitch 같은 컨트롤을 써야할 때가 많은데요…

문제는 이게 한줄에 안 나오고 무조건 아래와 같이 두 줄로 나오게 돼요…

image

class=“d-inline” 설정도 해보고 (MudBlazor에 정의된 display=inline 스타일)
style=“display:inline” 해보고
div로 각각의 checkbox를 감싸서 div 내부 스타일을 inline으로 설정도 해봤지만 안되네요…

혹시 이거 해결하셔서 한줄에 다 나열되도록 하신 분 계신가요?

4개의 좋아요
2

div로 묶어서 div에 style=“float:left” 넣어보셨나요?

4개의 좋아요
3

안되면 width도 건드려보세요. 간혹 width가 100%차지해서 다음 라인으로 가더라고요.

3개의 좋아요
4

width:150px 고정으로 줄여봤는데 안되더라고요
float:left 하니까 되네요!!
감사합니다!
(님 댓글 볼때마다 활어회 소주 자꾸 생각나는데, 요즘 횟값 너무 비싸서 괴로워요)

3개의 좋아요
5

div로 묶으면 안되고, 각각의 요소에 float: left 추가하니까 되네요! :smile:

3개의 좋아요
6

float: left 했을시 객체가 겹치는 문제도 있어서, 객체 선택이 안되는 문제가 발생하네요

아래와 같이 MudBlazor에 있는 flex 옵션을 사용해서 해결했습니다!

        <div class="d-flex flex-row">
            <MudSwitch Style="width:130px;" @bind-Checked="@_paramCharge" Label="지불" Color="Color.Primary" @oninput="SunapChanged" />
            <MudSwitch Style="width:130px;" @bind-Checked="@_paramFile" Label="첨부파일" Color="Color.Primary" @oninput="FileChanged" />
        </div>

참고 : MudBlazor - Blazor Component Library

5개의 좋아요
7

저는 보통 이거 써서 처리해요

5개의 좋아요
8

@Lazymoon 오! 좋네요:+1: 감사합니다^^

4개의 좋아요
9

CSS가 약하다보니 Mudblazor 쓰면서 style 관련 이해가 안가는 경우가 많아요
document 도 좀 약하고 확실히 style최적화된 샘플같은것이 있었으면 좋겠어요

3개의 좋아요
10

사실 샘플이나 설명은 엄청나게 널려있는데, 적재적소에 어떤 스타일을 쓰느냐 하는건 개인의 역량이 아닌가 싶어요.
개념 이해 + 반복/숙달이 되어야 하는듯… 저도 아직 갈 길이 머네요…^^

2개의 좋아요
11

MudBlazor의 Stack 컴포넌트 사용하면 간단히 해결됩니다.

MudBlazor의 CSS 유틸로도 안되거나 MudBlazor의 기본 스타일을 변경해야 하는데 API가 없을 경우에는 MudBlazor 컴포넌트의 Class에 자신만의 클래스 이름을 추가한 후 일반 HTML/CSS 개발하듯이 외부 css에 스타일 지정하면 MudBlazor 기본 스타일을 오버라이딩할 수 있습니다.

MudBlazor가 다 좋기는 한데 UI가 너무 크고 여백이 커서 이렇게 수정해야 할 부분들이 가끔 생깁니다.

5개의 좋아요